Комментарии 32
А как правильно задать в CSS многоколоночный текст для печати?
0
Поддерживается font-variant пока что только в Firefox и Safari, поэтому использовать его как основную фишку дизайна не стоит.Ошибаетесь. Именно small-caps давно поддерживается всеми современными браузерами.
Да и не современными тоже.
+2
А можно ли с помощью css добавить межбуквенный интервал для двух отдельных (рядом стоящих) букв в строке?
0
letter-spacing?
+1
Да. Но не для всей строки. Например есть ситуации когда расстояние между двумя рядом стоящими буквами или символами выглядят так будто между ними letter spacing-а больше чем у остальных. Так визуально кажется. Вот в таком случае можно ли задать letter-spacing двум символам в строке?
0
Если всем, включая вашего дизайнера, кажется что letter-spacing для разных символов выглядит по-разному, это значит, что шрифт кривой.
Задать letter-spacing двум символам в строке можно только обернув их в span или другой тег с отдельным классом. Ну и для первой буквы в слове может сработать пресдоэлемент :first-letter. Но правильнее будет просто поменять шрифт:)
Задать letter-spacing двум символам в строке можно только обернув их в span или другой тег с отдельным классом. Ну и для первой буквы в слове может сработать пресдоэлемент :first-letter. Но правильнее будет просто поменять шрифт:)
+1
Это — скорее вопрос к производителю шрифта, возможно неудачный кернинг.
+3
Спасибо за статью! Правильное подчёркивание и возможность задать кавычки – это очень классно (жаль, что переносы Хром не поддерживает), а есть ли возможность задать вид вложенных кавычек? Например, в типографике русского языка кавычки отличаются в зависимости от уровня вложенности.
+1
жаль, что переносы Хром не поддерживает
Стоит отметить, что Chrome не поддерживает переносы только на Windows. На Mac пример с hyphens отображается корректно.
0
Задать вид вложенных кавычек можно, но только если соответствующий текст будет обернут в контейнер, которому нам останется только задать нужные кавычки через CSS.
0
Да, но это не вариант для практического применения, к сожалению. Предположим, если у вас встречается нечто вроде названия книги «История футбольного клуба „Ливерпуль“».
+1
Не обязательно. Свойство quotes может принимать сколько угодно пар кавычек в качестве значения и они будут использоваться для вложенных кавычек:
p {
quotes: "«" "»" "„" "“" "“" "”" "‘" "’";
}
0
В продолжение разговора о правильных с точки зрения типографики кавычек (и не только). Подумал сейчас, что хорошим вариантом было бы, если бы можно было применять правила типографики в зависимости от языка документа / секции. Если указан параметр
lang="ru"
, например, автоматически использовать кавычки «ёлочки», а в них вложенные рисовать „не ёлочками“ и т.д. А если для соседнего фрагмента выставлен параметр lang="en"
, то там использовать английскую типографику. Если для фрагмента не указано ничего, ориентироваться на документ.+1
Да, хорошая идея. Интересно, есть ли свйты, на которых это используется.
0
А в чем проблема? Есть псевдоселектор :lang для этого:
Живой пример
p:lang(ru) {
quotes: "«" "»" "„" "“";
}
p:lang(en) {
quotes: "“" "”" "‘" "’";
}
Живой пример
+1
Вот вы меня сейчас, без преувеличения, поразили до глубины души. Я и подумать не мог, что это уже есть и не просто в виде предложения (я придумал предложенный вариант на ходу) или, тем более, драфта, но реально работает в браузере. Спасибо!
0
Поправка: псевдокласс, а не псевдоселектор.
+1
Положительная тенденция, уделять должное внимание типографике. Выравнивание по левому краю выглядит нормально если в абзаце не более четырёх строк.
+1
Работает это везде, кроме настольных Chrome и Opera, в них все будет выглядеть как обычно.
Автопереносы работают в Chrome только на Android и Mac платформе. Столкнулся с этой проблемой, когда хотел добавить их при генерации PDF на headless Chrome'е, а он конечно был на Linux развёрнут. Интересно в чём проблема реализовать это свойство под эту платформу.
+1
Добрая тема! Жаль, что немного )
За hyphens и text-decoration-skip спасибо, не догадывался о существовании.
За hyphens и text-decoration-skip спасибо, не догадывался о существовании.
+1
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Типографика и современный CSS