Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
Facebook 0 Likes
Twitter 0 Followers
Instagram 0 Followers
Pinterest 0 Followers
YouTube 0 Subscribers
Подписаться
Маркетер
Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • CSS

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

  • 30.11.2001
Total
0
Shares
0
0
0
0
0
0

Автор статьи: Головин Андрей

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

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

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

Этот абзац начинается с “буквицы”, которая создана с применением возможностей позиционирования 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 является самым правильным с точки зрения стандартов. Кстати, можете использовать буквицу Альдуса.

Total
0
Shares
Телеграфировать 0
Поделиться 0
Репост 0
Твитнуть 0
alexvolkov

Предыдущий материал
  • HTML

Тонкие рамки возвращаются

  • 30.11.2001
  • alexvolkov
Read More
Следующий материал
  • HTML

Тонкие рамки наносят ответный удар

  • 30.11.2001
  • alexvolkov
Read More
Вас также может заинтересовать
Read More
  • CSS

Формализация CSS

  • Алексей Волков
  • 23.05.2012
Read More
  • CSS

Ножницы для CSS

  • Алексей Волков
  • 25.01.2005
Read More
  • CSS

CSS: фон и цвет

  • Алексей Волков
  • 27.05.2004
Read More
  • CSS

CSS: позиционирование блоков

  • Алексей Волков
  • 08.04.2004
Read More
  • CSS

Что такое каскадные таблицы стилей (CSS)

  • Алексей Волков
  • 02.02.2004
Read More
  • CSS

Что такое каскадные таблицы стилей (CSS)

  • Алексей Волков
  • 27.11.2003
Read More
  • CSS

Описание стилей элемента<A>

  • alexvolkov
  • 05.11.2001
Read More
  • CSS

Все правила CSS. Отступы

  • alexvolkov
  • 02.11.2001

Добавить комментарий

Для отправки комментария вам необходимо авторизоваться.

Свежие посты
  • Рассылка как продукт
    • 24.07.20
  • Google назвал лучшие приложения App Store за 2018 год
    • 14.12.18
  • Онлайн-конференция интернет-магазин от “А до Я” CyberE-com 2018
    • 25.05.18
  • Бесплатная онлайн-конференция по управлению репутацией
    • 04.12.17
  • Открыта регистрация на CyberMarketing-2017
    • 19.10.17
Маркетер
  • О проекте
  • Информационное спонсорство
  • Рекламным агентствам
  • Ссылки
(с) ООО "Маркетер". Официальный сайт. Маркетер: Статьи про рекламу, маркетинг, public relations, интернет

Введите ключевые слова для поиска и нажмите Enter