Автор статьи: Головин Андрей
Термином «буквица» называют типографский прием, при котором первая буква абзаца выполняется другим размером (большим) и начертанием. Во времена рукописных книг особо ценилось умение вырисовывать эти самые буквицы. Вот один из примеров, который принадлежит перу знаменитого Альдуса:
>
Кстати, по воросам шрифта, особенно русских гарнитур, советую вам посетить сайт Хомячья Словолитня.
С тех пор этот изобразительный прием довольно часто встречается в современной типографике. Но, к сожалению, реализовать его в HTML довольно сложно. W3C в рекомендациях CSS2 предлагает использовать правило firstLetter, но разработчики браузеров его пока не реализовали.
Рассмотрим 4 способа реализации буквиц. Начнем с самого простого, который первым приходит на ум — использования тэгов <FONT>
Код для этого фрагмента будет выглядеть так:
<FONT SIZE=»+3″ COLOR=»red»><B>Э</B></FONT>тот абзац…
Как видим, все элементарно. Но буквица должна выравниваться по верхнему краю. Т.е. верх буквицы должен совпадать с верхом строки, в которой она расположена. Для решения этой проблемы можно применить таблицу
| Э |
тот абзац начинается с «буквицы», которая создана с применением таблиц.
Код выглядит так:
<TABLE ALIGN=LEFT><TR><TD VALIGN=TOP><FONT SIZE=»+3″
COLOR=»red»><B>Э</B></FONT></TD></TR></TABLE>
Гораздо лучше. Но с этими способами возникает один вопрос. Тэг не рекомендован к использованию и рекомендации W3C говорят, что возможно его запрещение в следующих версиях браузеров. Правильным решением было-бы использование правила firstLetter, но, как я уже говорил, нам это не дано.
Более приемлемым способом является использование изображений:
тот абзац начинается с «буквицы», которая создана с применением изображения. Картинка с ней находится в файле 0031_01.gifКод выглядит так:
<IMG SRC=»images/0031_01.gif» WIDTH=27 HEIGHT=30 BORDER=0 ALIGN=»LEFT» ALT=»»>тот абзац…
Кстати, расположение изображений в тексте подчиняется темже правилам, что и расположение таблиц, о котором можно почитать в соответствующем опыте.
И в конце рассмотрим самый правильный с точки зрения CSS2 вариант.
Все выполняется с помощью следующего описания класса:
SPAN.dropCap {
position: relative;
top: -5px;
font-family: Verdana, Helvetica;
font-size: x-large;
font-weight: bold;
color: red;
float: left;
width: 0.8em;
height: 0.8em;
margin: 0px;
}
Несомненно, что этим вариантам далеко до великого мастера, но и это хорошо. Я вам рекомендую использовать последние два варианта. Вариант с изображением дает вам простор для фантазии, а вариант с CSS является самым правильным с точки зрения стандартов. Кстати, можете использовать буквицу Альдуса.
