|
|
|
Создание "буквиц". |
|
Термином "буквица" называют типографский
прием, при котором первая буква абзаца выполняется другим размером (большим)
и начертанием. Во времена рукописных книг особо ценилось умение вырисовывать
эти самые буквицы. Вот один из примеров, который принадлежит перу знаменитого
Альдуса:
Кстати, по воросам шрифта, особенно русских гарнитур, советую вам посетить сайт Хомячья Словолитня. С тех пор этот изобразительный прием довольно часто встречается в современной типографике. Но, к сожалению, реализовать его в HTML довольно сложно. W3C в рекомендациях CSS2 предлагает использовать правило firstLetter, но разработчики браузеров его пока не реализовали.
Рассмотрим 4 способа реализации буквиц. Начнем с самого простого, который первым приходит на ум - использования тэгов <FONT> Этот
абзац начинается с "буквицы", которая создана с применением
тэга <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> Гораздо лучше. Но с этими способами возникает один вопрос. Тэг <FONT> не рекомендован к использованию и рекомендации W3C говорят, что возможно его запрещение в следующих версиях браузеров. Правильным решением было-бы использование правила firstLetter, но, как я уже говорил, нам это не дано. Более приемлемым способом является использование изображений:  тот
абзац начинается с "буквицы", которая создана с применением
изображения. Картинка с ней находится в файле 0031_01.gifКод выглядит так:
<IMG SRC="images/0031_01.gif"
WIDTH=27 HEIGHT=30 BORDER=0 ALIGN="LEFT" ALT="">тот абзац...
Кстати, расположение изображений в тексте подчиняется темже правилам, что и расположение таблиц, о котором можно почитать в соответствующем опыте. И в конце рассмотрим самый правильный с точки зрения CSS2 вариант. Этот
абзац начинается с "буквицы", которая создана с применением
возможностей позиционирования 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 является самым правильным с точки зрения стандартов. Кстати, можете использовать буквицу Альдуса.
|
|
