Надоел медленный Интернет? 
Попробуй Ускоритель!

Marketscore - бесплатный сервис, практически вдвое увеличивающий скорость загрузки вашим браузером страниц и сайтов в Интернете. В среднем, скорость загрузки вэбстраниц с графикой и текстом ускоряется на 75%. 
Особенно заметен выигрыш, если у вас медленный модем или вы выходите в Интернет на маленьких скоростях (до 56 Кб/сек). Подробнее...

реклама у нас

***

Создание "буквиц"

Головин Андрей
Автор сайта Веб-мастеринг для желающих разобраться.
http://exper.ural.ru/

1Термином "буквица" называют типографский прием, при котором первая буква абзаца выполняется другим размером (большим) и начертанием. Во времена рукописных книг особо ценилось умение вырисовывать эти самые буквицы. Вот один из примеров, который принадлежит перу знаменитого Альдуса:

Кстати, по воросам шрифта, особенно русских гарнитур, советую вам посетить сайт Хомячья Словолитня.

С тех пор этот изобразительный прием довольно часто встречается в современной типографике. Но, к сожалению, реализовать его в 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 является самым правильным с точки зрения стандартов. Кстати, можете использовать буквицу Альдуса.

Источник: http://www.marketer.ru/

 


Copyright © "Internet Zone"info@izcity.com 
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/.
При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас. Подробнее условия использования материалов смотрите здесь.