• О блоге

    Блог был задуман как сайт для дизайнеров и всех, кто изучает и интересуется компьютерной графикой.

    К его созданию подтолкнуло желание создать место для общения и обмена опытом в изучении компьютерной графики и дизайна.

    Уроки Blender 3d   Текстуры   Уроки Photoshop   3d max   html/css

 
 
В процессе
 
 

Опанасенко Сергей (sergey@opanasenko.com.ua / sadesign)
Набираем в разрядку
12 февраля 2010

2.1.6 Набирайте в разрядку любую последовательность прописных и капительных букв, а так же длинные ряды цифр

«В некоторых текстах очень часто встречаются акронимы, например CIA (ЦРУ) и PLO (ООП), или такие аббревиатуры, как AD (н.э.) или BC (до н.э.). Нормальное значение разрядки в таких комбинациях капительных или прописных букв составляет 5-10% от кегля шрифта.
В цифровых шрифтах очень просто придать дополнительную ширину всем капительным знакам, таким образом разрядка добавляется автоматически. Ширины прописных выведены из расчета того, что они будут использоваться совместно со строчными, но тем не менее величины межбуквенных пробелов для текста, набранного только прописными буквами, могут быть автоматизированы с помощью таблиц кернинга.»

В CSS за разрядку отвечает свойство letter-spacing. Чтобы добавить 10% разрядки к тегу <abbr> пишем следующее:

ABBR {letter-spacing:0.1em}

Если создается статическая страница то можно расставить вручную <acronym> и <abbr> — утомительно, но выполнимо. Но если при создании сайта используется CMS то разработчик может использовать регулярные выражения для решения подобных вопросов.

Вот пример:
$search = '/\b([A-Z][A-Z0-9]{2,})\b/';
$replace = '<abbr>$1</abbr>';
$text = preg_replace($search,$replace,$text);

Эта функция ищет последовательности из более чем 3-х прописных символов, например CSS, HTML, W3C и обертывает их в тег <abbr>.

              ,





10 комментариев на “Набираем в разрядку”

  1. Интересная мысль, нужно у себя прописать в стилях.

    Только я вот протестировал и хорошо смотрится при 6%, а при 10% сильно «разлазятся» символы.

  2. 10% может оказаться очень полезным для больших кеглей :)

  3. Семантичней использовать acronym вместо abbr, потому что ie6, ie7 не понимают abbr.

  4. Вот нормальные сглаживания, только кернинг надо поправить img40.imageshack.us/img40...rendermarket.png

  5. Серега обнови кешь, логотип переделал и проредил :)

  6. Не Серега, используй мак-сглаживания. Вот сравни букву А: iurevych.com.ua/upload/re...ket-logo_n-a.png — справа я вставил маковскую, слева твоя из логотипа

  7. Дык на маке и делал :) видать твой мак мачнее чем мой :)

    Да и заметь у тебя начертание другое ;)

  8. Да, я использовал Ариал. Но все равно сглаживания разнятся. Ты не используй фотошоп, просто набери буквы в браузере и захвати экран ;)

  9. Еще важно после захвата с экрана перевести скриншот в Grayscale, потому что системные сглаживания по контуру буквы образуются цветными пикселями.

Оставить комментарий


    Перевод книги


    Скоро на сайте RenderMarket перевод книги Алекса Галузина
    «Создание игрового уровня за 11 дней»

В другом формате

Введите email для автоматического получения новых статей на почту:

Друзья и партнеры

sadesign — создание и поддержка
RenderStuff, бесплатная библиотека 3d полезностей
Умный блог
Система Orphus