x
 
Евгений Грибодёрчев
26 июля 2012

Здравствуйте, Артём! Расскажите пожалуйста, как на сайте бюро реализована разрядка у прописных букв?



Евгений, вот так:

<style>
  .smallcapitals {
    font-size: .875em;
    letter-spacing: .15em;
    margin-right: -.15em;
  }
</style>

<p><span class="smallcapitals">СССР</span>
  — Союз Советских Социалистических Республик.</p>

СССР — Союз Советских Социалистических Республик.


Чтобы не заканчивать совет так быстро, позволю себе лирическое отступление. Вы легко бы ответили на свой вопрос самостоятельно, проинспектировав элемент в любом современном браузере. Кухня верстальщика всегда на виду.

Браузеры не прячут исходный код — каждый желающий может разобраться, что и как работает, даже если код обфусцирован. Угадать же последовательность действий, например, техдизайнера, повара, серверного программиста или звукорежиссёра совсем не просто, тут без «как это сделано?» не обойтись.

До появления веб-инспектора в каждом браузере было не всегда просто определить связь между разметкой, стилями и скриптами. Теперь же это не составляет никакого труда:

Конечно, веб-инспектор не всегда помогает — бывает видишь код, понимаешь, как он работает, но не понимаешь почему сделано иммено так, а не иначе. В таких случаях помогает общение с автором или коллегами.


Возвращаясь к реализации маленьких прописных на нашем сайте, я бы хотел обратить внимание на правый отрицательный margin. Свойство letter-spacing увеличивает или уменьшает межбуквенный интервал, добавляя отступ справа от каждого символа. Чтобы пробел после .smallcapitals не увеличился, нужно отменить отступ для последнего символа:

.smallcapitals {
  font-size: .875em;
  letter-spacing: .15em;
  margin-right: -.15em;
}

В случае с уменьшенным интервалом, компенсирующий margin будет, наоборот, положительным:

.thinner {
  letter-spacing: -.25em;
  margin-right: .25em;
}

Веб-инспектор (средства разработчика) есть даже в ИЕ, нажмите F12.


P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Вадим Макеев
26 июля 2012

Расскажи, пожалуйста, как ты дошёл до значений 0.875 и 0.15 и насколько они универсальны для типичной гарнитуры. Или для каждой вердано-тахомы придётся подбирать своё?

Ростислав Чебыкин
26 июля 2012

Искусственная «капитель», механически сделанная из прописных букв, выглядит некрасиво, потому что она не сочетается по пропорциям и толщине штрихов с окружающими «нормальными» прописными и строчными буквами.

В современных браузерах (включая IE 10) работает свойство font-feature-settings, позволяющее включать честные опции OpenType, если шрифт их поддерживает:

http://www.w3.org/TR/css3-fonts/#font-feature-settings-prop
http://www.microsoft.com/typography/otspec/featurelist.htm


Например, вот код для настоящей капители:

font-feature-settings: ‘smcp’ 1;

В некоторых браузерах на движке Вебкит свойство поддерживается с префиксом -webkit-, в Файрфоксе — с префиксом -moz- и имеет другой синтаксис в старых версиях:

http://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/


Кстати, если нам зачем-то нужно писать ОДНИМИ ПРОПИСНЫМИ — в OpenType есть свойство, позволяющее задавать правильную разрядку между ними:

font-feature-settings: ‘cpsp' 1;

Среди других полезных эффектов OpenType — лигатуры, надстрочные и подстрочные индексы, натуральные дроби и расширенные наборы цифр (пропорциональные/моноширинные, маюскульные/минускульные).


27 июля 2012

Вадим, цифры подобрал Артём Горбунов. Они хорошо подходят для аббревиатур, набранных популярными шрифтами (Ариал, Таймс и т. д.) в среднем кегле.


27 июля 2012

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

http://ru.wikipedia.org/wiki/Капитель_ (шрифт)# (http://ru.wikipedia.org/wiki/Капитель_(шрифт)#)

Ростислав Чебыкин
27 июля 2012

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

Если интересно, почитайте мою статью на эту тему: http://dml.compkaluga.ru/forum/index.php?showtopic=23485. Правда, она была написана ещё до того, как свойство font-feature-settings стало поддерживаться в браузерах, а «классические» шрифты вроде Arial приобрели собственную капитель. А ещё там при перепечатывании пропала буква «Ѣ».


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

3 2 4 4




Недавно всплыло

Как сделать нагляднее таблицу перфорированных лотков? Часть вторая 5 Как написать хорошее резюме? 7 Поделитесь соображениями, как работать, путешествуя 8 Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5