Skip to content

Commit

Permalink
Update source
Browse files Browse the repository at this point in the history
  • Loading branch information
Roman Ganin committed Apr 13, 2016
1 parent 728a735 commit 2020e63
Show file tree
Hide file tree
Showing 80 changed files with 1,065 additions and 19 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
dist/
101 changes: 82 additions & 19 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,22 @@
Вступление
----------

Мы ежедневно решаем проблемы пользователей, создаем новые интерфейсы, сеем «чистое, доброе, светлое» в мир веб-технологий. Мы используем самые современные интструменты и библиотеки, пишем тысячи строк кода, оптимизируем и _рефакторим_ их, но…
Мы ежедневно решаем проблемы пользователей, создаем новые интерфейсы, сеем «чистое, доброе, светлое» в мир веб-технологий. Мы используем самые современные инструменты и библиотеки, пишем тысячи строк кода, оптимизируем и _рефакторим_ их, но…

### Пользователю __плевать__ на наши трудности

Пользователь хочет «здесь» и «сейчас», ему нужен __контент__. «Контент» – это, в первую очередь, текст.

### «Текст — не наша работа!»,

скажите вы, и будете правы. Текст предоставляют контент-менеджеры, копирайтеры, дизайнеры макетов. Но если __это__ не сделаем мы, этого не сделает никто. Мы – __ФРОНТ__енд-разработчики, _последний бастион_ на защите пользователя.
скажете вы, и будете правы. Текст предоставляют контент-менеджеры, копирайтеры, дизайнеры макетов. Но если __это__ не сделаем мы, этого не сделает никто. Мы – __ФРОНТ__енд-разработчики, _последний бастион_ на защите пользователя.

- <del>Рассказать об особенностях типографики (и её месте в вебе);</del>

Типографика
-----------

Далеко ходить не надо: большинство вопросов оформления текста школьная программа. Использование типографического набора там, где это необходимо – вполне посильная задача: правил не так много и они диктуются стандартами куда более древними, чем спецификации HTML или JavaScript.
Далеко ходить не надо: большинство вопросов оформления текста школьная программа. Использование типографического набора там, где это необходимо – вполне посильная задача: правил не так много и они диктуются стандартами куда более древними, чем спецификации HTML или JavaScript.

Примеры типографических символов:

Expand All @@ -41,8 +41,6 @@
* ° – градус
* пробелы



### Переносы (2 класс)

#### Проблема
Expand All @@ -61,7 +59,7 @@

#### Решение

__HTML__: когда использование стандартной _выключки_ по левому краю неприемлимо, исправить ситуацию может расстановка «мягких» `&shy;` переносов.
__HTML__: когда использование стандартной _выключки_ по левому краю неприемлемо, исправить ситуацию может расстановка «мягких» `&shy;` переносов.

__CSS__: спецификация описывает автоматическую поддержку переносов браузерами:

Expand All @@ -77,17 +75,55 @@ __CSS__: спецификация описывает автоматическу

__JavaScript__: есть фолбэк – [Hyphenator.js](http://mnater.github.io/Hyphenator/).

#### Проблема

Перенос ссылок — длинные ссылки могут выходить за рамки блока:

![Перенос ссылок](images/hyphens__link.png)

__CSS__:

```css
.link {
word-wrap: break-word;
word-break: break-all;
hyphens: auto;
}
```

### Пробелы

> https://habrahabr.ru/post/136348/
> https://habrahabr.ru/post/23250/
> http://prgssr.ru/development/vse-o-probelah.html
Существует больше десятка разновидностей пробелов [[wiki](https://en.wikipedia.org/wiki/Space_(punctuation)#Spaces_in_Unicode)]!

![Разновидности пробелов](images/space__types.svg)

__CSS__:
| Название пробела | HTML сущность | Код юникода |
| :-------------------------------- | :------------- | :---------- |
| Em&#8195;space | `&#8195;` | \u2003 |
| Ideographic&#12288;space | `&#12288;` | \u3000 |
| Figure&#8199;space | `&#8199;` | \u2007 |
| En&#8194;space | `&#8194;` | \u2002 |
| Punctuation&#8200;space | `&#8200;` | \u2008 |
| Three-per-em&#8196;space | `&#8196;` | \u2004 |
| Normal&#32;space | `&#32;` | \u0020 |
| No-break&#160;space | `&#160;` | \u00A0 |
| Mathematical&#8287;space | `&#8287;` | \u205F |
| Four-per-em&#8197;space | `&#8197;` | \u2005 |
| Thin&#8201;space | `&#8201;` | \u2009 |
| Six-per-em&#8198;space | `&#8198;` | \u2006 |
| Hair&#8202;space | `&#8202;` | \u200A |
| Narrow&#8239;no-break&#8239;space | `&#8239;` | \u202F |
| Zero-width​​&#8203;space | `&#8203;` | \u200B |

__HTML__: есть тег `<nobr>неразрывный пробел</nobr>` — <del>deprecated</del> никогда не был частью стандарта

__CSS__: определяет отображение пробелов между словами.

```css
.nobr {
Expand All @@ -101,8 +137,6 @@ __CSS__:

> https://habrahabr.ru/post/24544/
HTML: есть тег `<nobr>неразрывный пробел</nobr>` — <del>deprecated</del> никогда не был частью стандарта

__CSS__: позволяет управлять использованием альтернативных начертаний для цифр, дробей и порядковых числительных:

```css
Expand Down Expand Up @@ -145,9 +179,10 @@ __CSS__: позволяет управлять использованием ал
* (+7 123-45) 1-23-45
* (+7 12-34-56) 12-34


### Тире (5 класс)



### Кавычки (5 класс)

### Списки
Expand All @@ -159,7 +194,7 @@ __CSS__: позволяет управлять использованием ал
Типографы
---------

![Типо граф](images/graf.jpg)
![Типо граф](images/typo-graph.png)

### студии Артемия Лебедева

Expand Down Expand Up @@ -188,25 +223,52 @@ http://rmcreative.ru/blog/post/tipograf

### Ширина текстового блока

#### Responsive text
### Адаптивный кегль

![Адаптивный кегль](images/responsive-type.gif)

@TODO: единицы измерения для текста.

* [postcss-responsive-type](https://github.com/seaneking/postcss-responsive-type) — часть пакета Rucksack;
* bower-пакет [Typographic](https://github.com/corysimmons/typographic) (SASS→PostCSS)

- <del>сказать: «Для этого есть плагин на PostCSS!»;</del>
* <del>сказать: «Для этого есть плагин на PostCSS!»;</del>

### Полноширный заголовок



### Висячая пунктуация

> https://amplifr.com/ru используют висячую пунктуацию
### Подчёркивание ссылок



### Вертикальный ритм

> http://vithar.github.io/bem.info/ru/methodology/solved-problems/
> http://prgssr.ru/development/estetichnyj-sass-chast-3-tipografika-i-vertikalnyj-ritm.html
#### Инструменты:

> http://topfunky.com/baseline-rhythm-calculator/
> http://drewish.com/tools/vertical-rhythm
> http://toki-woki.net/p/Boks/
> http://baselinecss.com/
> https://github.com/markgoodyear/postcss-vertical-rhythm
> https://github.com/F21/postcss-vertical-rhythm-function
### Буквица

Буквица — художественный приём оформления текста за счёт увеличенния первой буквы абзаца, базовая линия которой ниже на одну или несколько строк базовой линии основного текста.
<img src="images/bukvica.png" align="left" alt="Б">уквица — художественный приём оформления текста за счёт увеличенния первой буквы главы или раздела, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. В рукописных книгах буквицы часто украшались миниатюрами и орнаментами, на смену которым пришли простые буквы в виде обычной литеры наборного шрифта, но увеличенного кегля.

__CSS__: как такового правила нет, но эффект без проблем достигается с помощью псевдоэлемента `::first-letter`:

Expand All @@ -225,7 +287,7 @@ __CSS__: как такового правила нет, но эффект без
}
```

### Капитель
### КАПИТЕЛЬ

> КЁРНИНГ, ШРИФТЫ?<br>
В П#%$У ЭТУ КАШУ!<br>
Expand All @@ -236,7 +298,9 @@ __CSS__: как такового правила нет, но эффект без
| :--: |
| Влади́мир Влади́мирович Маяко́вский — русский! Советский! Поэт! |

Капитель ≠ капс.
КАПИТЕЛЬ ≠ КАПС.

Начертание в гарнитуре, в которой строчные знаки выглядят как уменьшенные заглавные. Чтобы подчеркнуть разницу между капителью и строчными буквами, её делают немного выше строчных, а полуапроши капительных знаков увеличивают.

- <del>показать практические примеры (и приёмы) оформления текста.</del>

Expand Down Expand Up @@ -309,7 +373,7 @@ $block-height : 1em * $line-height;

## Дополнительные материалы

* Главред и советы Бюро Артемия Горбунова;
* Главред и советы Бюро Артемия Горбунова + Электронный учебник «[Типографика и вёрстка](http://artgorbunov.ru/projects/book-typography/)»;
* TypoWolf

### На «сладкое»
Expand All @@ -326,5 +390,4 @@ $block-height : 1em * $line-height;
Спасибо за внимание, с вами был
Роман Ганин,

* @Realetive

* @Realetive
20 changes: 20 additions & 0 deletions examples/hanging-punctuation_first-last.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Висячая пунктуация</title>
</head>
<style>
body { background: #001f3f; font-family: 'Ahem'; padding: 30px; text-align: center;}
p { font-size: 26px; line-height: 1em; color: #fff; margin: 30px auto 25px; text-align: left; display: inline-block; border: 2px solid #ffdc00; }

.hang {
hanging-punctuation : first last;
}
</style>
<body>
<p class="hang">(←Висячая пунктуация→»</p>
<p class="hang" style="width:13.93em;">(←Эта скобка будет <del>наказана</del> «подвешена».<br>(И последняя скобка тоже будет «подвешена» (по возможности→)</p>
</div>
</body>
</html>
20 changes: 20 additions & 0 deletions examples/hanging-punctuation_first.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Висячая пунктуация</title>
</head>
<style>
body { background: #001f3f; font-family: 'Ahem'; padding: 30px; text-align: center;}
p { font-size: 26px; line-height: 1em; color: #fff; margin: 30px auto 25px; text-align: left; display: inline-block; border: 2px solid #ffdc00; }

.hang {
hanging-punctuation : first;
}
</style>
<body>
<p class="hang">(←Висячая пунктуация»</p>
<p class="hang" style="width:13.93em;">(←Эта скобка будет <del>наказана</del> «подвешена».<br>(А последняя — нет)</p>
</div>
</body>
</html>
20 changes: 20 additions & 0 deletions examples/hanging-punctuation_last.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Висячая пунктуация</title>
</head>
<style>
body { background: #001f3f; font-family: 'Ahem'; padding: 30px; text-align: center;}
p { font-size: 26px; line-height: 1em; color: #fff; margin: 30px auto 25px; text-align: left; display: inline-block; border: 2px solid #ffdc00; }

.hang {
hanging-punctuation : last;
}
</style>
<body>
<p class="hang">(Висячая пунктуация→)</p>
<p class="hang" style="width:11.79em;">(Эта скобка не будет <del>наказана</del> «подвешена».<br>(а вот последняя — будет→)</p>
</div>
</body>
</html>
28 changes: 28 additions & 0 deletions examples/initial.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Буквица</title>
</head>
<style>
body { background: #333; }
p { background: #fff; width: 440px; margin: 30px auto 25px; padding: 25px; font-size: 26px; line-height: 1em; hyphens: auto}

.initial-letter::first-letter {
font-size : 3em; /* Размер буквицы */
padding-right : .03px; /* Отступ справа */
color : #e7685d; /* Цвет буквицы */
float : left; /* Обтекание по правому краю */
line-height : 0.6em; /* Положение относительно текста */
}

.initial-letter {
clear : left; /* Clearfix */
}

</style>
<body>
<p class="initial-letter">
Буквица — художественный приём оформления текста за&nbsp;счёт увеличения первой буквы главы или&nbsp;раздела, базовая линия которой ниже на&nbsp;одну или&nbsp;несколько строк базовой линии основного текста.
</p>
</body>
</html>
24 changes: 24 additions & 0 deletions examples/link__hyphens.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>Переносы</title>
</head>
<style>
body { background: #333; }
p { background: #fff; width: 440px; margin: 30px auto 25px; padding: 25px; font-size: 26px; }
.hyphenate {
word-wrap : break-word;
hyphens : auto;
}
</style>
<body>
<p class="hyphenate" lang="ru">
Спасибо, что пришли на&nbsp;«Апрельскую встречу SPB&nbsp;Frontend».
Отчёт о&nbsp;мероприятии:
<a href="#" lang="en">
https://vk.com/spb_frontend_meetup_130416?test=very_long_get_parametr_for_test_browser_hyphens
</a>
</p>
</body>
</html>
24 changes: 24 additions & 0 deletions examples/link__hyphens_disabled.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>Переносы</title>
</head>
<style>
body { background: #333; }
p { background: #fff; width: 440px; margin: 30px auto 25px; padding: 25px; font-size: 26px; }
.hyphenate {
word-wrap : break-word;
hyphens : auto;
}
</style>
<body>
<p class="hyphenate_disabled" lang="ru">
Спасибо, что пришли на&nbsp;«Апрельскую встречу SPB&nbsp;Frontend».
Отчёт о&nbsp;мероприятии:
<a href="#" lang="en">
https://vk.com/spb_frontend_meetup_130416?test=very_long_get_parametr_for_test_browser_hyphens
</a>
</p>
</body>
</html>
Loading

0 comments on commit 2020e63

Please sign in to comment.