Типографика и современный CSS

в 5:50, , рубрики: css, html, web-разработка, Блог компании Wargaming, Разработка веб-сайтов

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

Пока одни новые CSS свойства, отвечающие за разного рода красивости (вроде filter, mix-blend-mode или transition) привлекают внимание всех и каждого, другие многим кажутся недостойными внимания и мало освещаются в интернете. Взять хотя бы свойства, отвечающие за типографику. Многие из них работают уже давно, но известны немногим. А зря, ведь они тоже могут быть весьма полезными и эффектными. Давайте же исправим эту несправедливость и осветим то, что обычно остается в тени.

Правильные переносы слов (hyphens)

С переносом строк в CSS всегда было что-то не так. Сначала у нас было свойство word-wrap, которое вроде бы работает, но числится как черновое и не рекомендуется к использованию. Затем появилось word-break, которое расставляет переносы отталкиваясь исключительно от того, помещаются ли слова в контейнер, да еще не помечает их никакими знаками. И лишь теперь, спустя столько лет, CSS-переносы готовы встать с колен: теперь у нас появилась возможность переносить слова по правилам языка. Все благодаря свойству hyphens:

article {
    hyphens: auto;
}

Возможные значения:

  • manual — Слова переносятся только в тех местах текста, где добавлен спецсимвол &shy; или тег <wbr>. Используется по умолчанию;
  • auto — браузер добавляет переносы автоматически на основе встроенного словаря;
  • none — слова не переносятся.

css hyphens

Важный нюанс: чтобы словарь переносов заработал, в теге <html> необходимо указать атрибут lang с кодом языка:

<html lang="ru">

Также этот атрибут можно задать непосредственно в абзаце текста:

<p lang="en">Some long text</p>

Работает это везде, кроме настольных Chrome и Opera. В них все будет выглядеть как обычно, но в остальных браузерах мы получим нормальные переносы, так что можете смело пользоваться (конечно, если вам в принципе нужны переносы в тексте).

Капитель (font-variant: small-caps)

Капитель — это начертание в гарнитуре, при котором строчные знаки выглядят как уменьшенные заглавные. В CSS его можно задать с помощью свойства font-variant, отвечающего за представление строчных букв. Возможные значения:

  • normal — значение по умолчанию;
  • inherit — наследует значение родителя;
  • small-caps — то, что нас интересует. Отображает все строчные символы как заглавные, но уменьшенного размера.

h1 {
    font-variant: small-caps;
}

Выглядит это весьма интересно:

css font-variant

Поддерживается font-variant пока что только в Firefox и Safari, поэтому использовать его как основную фишку дизайна не стоит.

Поиграться с другим текстом или шрифтом можно здесь:

Продвинутое оформление подчеркиваний (text-decoration-skip)

О свойствах text-decoration-style и text-decoration-color я уже писал. Но существует еще одно: text-decoration-skip. Оно включает пропуск выносных элементов в подчеркиваемом тексте, что выглядит довольно-таки эффектно.
css text-decoration-skip
Свойство может принимать несколько значений, но более-менее работают только:

  • ink — подчеркивающая линия пропускает буквы, заходящие за базовую линию;
  • objects — значение по умолчанию. Линия пропускает такие объекты, как изображения и inline-block элементы

a {
    text-decoration-skip: ink;
}

Работает в Chrome, Opera и Safary (причем, Safari на маке по-умолчанию использует text-decoration-skip: ink).

Оформление кавычек (quotes)

А вы знали, что в CSS можно задать формат всех кавычек, использующихся на сайте? Для этого есть специальное свойство quotes. Оно применится к содержимому тега <q>, а также к псевдоэлементам со свойством content равным open-quote или close-quote.

Типографика и современный CSS - 5

q {
    quotes:  "«" "»";
}

Типографика и современный CSS - 6

q {
    quotes: "“" "”";
}

Типографика и современный CSS - 7

q {
    quotes: "022" "022";
}

Свойство давно поддерживается всеми браузерами.

Тюнинг многоколоночных текстов (orphans и widows)

Свойства orphans и widows можно назвать аутсайдерами. Вот, например, что об одном из них написано в документации Mozilla:

Свойство widows CSS определяет какое минимальное количество линий должно быть оставлено в начале новой страницы на paged носителе. В типографике, «висячая» строка (widow) это последняя строка параграфа, оказавшаяся в начале следующей страницы. Установка свойства widows позволяет предотвратить висячие строки.

На нестраничных носителях, таких как screen, CSS свойство widows не имеет эффекта.

Выглядит как что-то бесполезное для 99.9% разработчиков. Скажите, как часто вам приходилось им пользоваться? Если такое случалось хотя бы один раз, пожалуйста, напишите об этом в комментариях.

Но это не все, на что способны эти свойства! Почему-то мало где описано, что они работают и для многоколоночных макетов!
css orphans

article {
  columns: 2;
  orphans: 10; /* минимальное число строк для всех столбцов, кроме последнего */
}


css widows

article {
  columns: 2;
  widows: 5; /* минимальное число строк для последнего столбца */
}

Сразу возникает вопрос: «а что если для блока указать оба свойства? Не начнут ли они конфликтовать?». В таких случаях widows имеет приоритет и учитывается в первую очередь.

В контексте стилизации страниц свойства давно работают везде, кроме, почему-то, Firefox-а. Также, применительно к стилизации колонок они не работают еще и в IE/Edge.


Как видите, среди малоизвестных и, порой, старых свойств можно найти много полезного и интересного. Не за горами свойства для более тонкой настройки переносов, потока текста для разных блоков (CSS Regions), оформления врезок (CSS Exclusions) и многое другое. Если вы знаете другие типографические новинки в HTML и CSS, которые уже работают в браузерах, пожалуйста, пишите в комментариях!

Автор: Павел

Источник

Поделиться

* - обязательные к заполнению поля