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

[kovserg]

А как правильно задать в CSS многоколоночный текст для печати?

[Paul_King]

Честно говоря, такими вещами особо не занимался, но думаю, что как-то так:

@media print {
   columns: 2;
   ...
}

[kovserg]

А как добиться того же эффекта но на экране. Что бы длинный текст нарезался не на две очень длинные колонки, а на группы по две колонки и по 60 строк например.

[Paul_King]

Боюсь, что сделать это можно только с помощью JS,

[XAHTEP26]

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

Ошибаетесь. Именно small-caps давно поддерживается всеми современными браузерами.
Да и не современными тоже.

[Paul_King]

Большое спасибо за замечание! Добавил это в статью.

[sordes]

Блин, не успел сумничать)

[boolkaco]

А можно ли с помощью css добавить межбуквенный интервал для двух отдельных (рядом стоящих) букв в строке?

[Paul_King]

letter-spacing?

[boolkaco]

Да. Но не для всей строки. Например есть ситуации когда расстояние между двумя рядом стоящими буквами или символами выглядят так будто между ними letter spacing-а больше чем у остальных. Так визуально кажется. Вот в таком случае можно ли задать letter-spacing двум символам в строке?

[Paul_King]

Если всем, включая вашего дизайнера, кажется что letter-spacing для разных символов выглядит по-разному, это значит, что шрифт кривой.
Задать letter-spacing двум символам в строке можно только обернув их в span или другой тег с отдельным классом. Ну и для первой буквы в слове может сработать пресдоэлемент :first-letter. Но правильнее будет просто поменять шрифт:)

[boolkaco]

Например T|P
Если шрифт большой то будет заметнее разница.

[Paul_King]

Если вам кажется, что во всех шрифтах T и P имеют неравные отступы, остается только смириться, либо создать свой шрифт:)

[vbif]

Это — скорее вопрос к производителю шрифта, возможно неудачный кернинг.

[ingumsky]

Спасибо за статью! Правильное подчёркивание и возможность задать кавычки – это очень классно (жаль, что переносы Хром не поддерживает), а есть ли возможность задать вид вложенных кавычек? Например, в типографике русского языка кавычки отличаются в зависимости от уровня вложенности.

[monochromer]

жаль, что переносы Хром не поддерживает

Стоит отметить, что Chrome не поддерживает переносы только на Windows. На Mac пример с hyphens отображается корректно.

[ingumsky]

Гм, надо проверить в Линуксе. Спасибо!

[Paul_King]

Задать вид вложенных кавычек можно, но только если соответствующий текст будет обернут в контейнер, которому нам останется только задать нужные кавычки через CSS.

[ingumsky]

Да, но это не вариант для практического применения, к сожалению. Предположим, если у вас встречается нечто вроде названия книги «История футбольного клуба „Ливерпуль“».

[XAHTEP26]

Не обязательно. Свойство quotes может принимать сколько угодно пар кавычек в качестве значения и они будут использоваться для вложенных кавычек:

p {
  quotes: "«" "»" "„" "“" "“" "”" "‘" "’";
}

[ingumsky]

В продолжение разговора о правильных с точки зрения типографики кавычек (и не только). Подумал сейчас, что хорошим вариантом было бы, если бы можно было применять правила типографики в зависимости от языка документа / секции. Если указан параметр lang="ru", например, автоматически использовать кавычки «ёлочки», а в них вложенные рисовать „не ёлочками“ и т.д. А если для соседнего фрагмента выставлен параметр lang="en", то там использовать английскую типографику. Если для фрагмента не указано ничего, ориентироваться на документ.

[Paul_King]

Да, хорошая идея. Интересно, есть ли свйты, на которых это используется.

[ingumsky]

Сомневаюсь. Мне вообще кажется, что типографике уделяется недостаточно внимания. Это хорошо ещё, что сейчас хотя бы что-то есть.

[XAHTEP26]

А в чем проблема? Есть псевдоселектор :lang для этого:

p:lang(ru) {
  quotes: "«" "»" "„" "“";
}
p:lang(en) {
  quotes: "“" "”" "‘" "’";
}

Живой пример

[ingumsky]

Вот вы меня сейчас, без преувеличения, поразили до глубины души. Я и подумать не мог, что это уже есть и не просто в виде предложения (я придумал предложенный вариант на ходу) или, тем более, драфта, но реально работает в браузере. Спасибо!

[mayorovp]

Поправка: псевдокласс, а не псевдоселектор.

[XAHTEP26]

Точно. ) Что-то у меня переклинило.

[Smalll]

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

[Axiont]

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

Автопереносы работают в Chrome только на Android и Mac платформе. Столкнулся с этой проблемой, когда хотел добавить их при генерации PDF на headless Chrome'е, а он конечно был на Linux развёрнут. Интересно в чём проблема реализовать это свойство под эту платформу.

[tolfy]

Добрая тема! Жаль, что немного )
За hyphens и text-decoration-skip спасибо, не догадывался о существовании.