Css буквица: Буквица | htmlbook.ru

Содержание

Буквица | htmlbook.ru

Буквица является художественным приёмом оформления текста и представляет собой увеличенную первую букву, базовая линия которой находится на одну или несколько строк ниже базовой линии основного текста. Буквица привлекает внимание читателя к началу текста, особенно если страница лишена других ярких деталей. Обычно кроме самого символа используются изображения растений, животных и других объектов. Это, конечно, не обязательно, но может придать определённый настрой содержанию. Если хочется применить на сайте этот эффект, лучше всего для этого подойдет рисунок, выровненный по левому краю (пример 1).

Пример 1. Создание буквицы с помощью рисунка

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Буквица</title>
  <style>
   .cap {
    float: left; /* Выравнивание по левому краю */
    margin: 0 2px 2px 0; /* Отступы вокруг буквы */
   }
  </style>
 </head>
 <body>
  <p><img src="images/n.png">еобходимо,
  манипулируя полученными предметами материального мира и фрагментами
  информационного поля, эмпирическим путем достигнуть логического
  завершения конкурса.</p>
 </body>
</html>

Отступ от буквицы до текста задаётся свойством margin, в данном случае оно одновременно устанавливает пустое пространство справа и снизу от изображения. Результат примера показан на рис. 1.

Рис. 1. Рисунок в качестве буквицы

Достоинства рисунков в качестве буквицы заключаются в следующем: применение любого шрифта и разных эффектов, простота метода, а также возможность использования в качестве формата анимированный GIF-файл, что даёт дополнительные возможности оформления. Но есть и недостатки: если буквица на сайте применяется довольно часто, то нужно подготовить множество рисунков разных букв; также усложняется возможность редактирования текста, т. к. придётся вместо простого изменения буквы вставлять новый рисунок.

Буквица в тексте

Можно создать буквицу не в виде рисунка, а в качестве простого текста, увеличенного по сравнению с базовым шрифтом. Для того чтобы текст огибал первую букву, её необходимо выделить с помощью псевдоэлемента ::first-letter и задать свойство float, как показано в примере 2.

Пример 2. Использование ::first-letter для создания буквицы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Буквица</title>
  <style>
   p::first-letter {
    font-size: 3em; /* Размер буквы */
    color: red; /* Цвет буквы */
    float: left; /* Выравнивание по левому краю */
    margin: 0 4px 2px 0; /* Отступы вокруг буквы */
   }
  </style>
 </head>
 <body>
  <p>Необходимо, манипулируя полученными предметами 
  материального мира и фрагментами информационного поля, 
  эмпирическим путем достигнуть логического
  завершения конкурса.</p>
 </body>
</html>

С помощью стилей также удобно сразу задать цвет буквицы и необходимые отступы между символами. Результат примера показан на рис. 2.

Рис. 2. Буквица

Буквица на поле

Ничто не мешает расположить буквицу слева, чётко отделив её от основного текста, как показано на рис. 3. Таким образом, можно добиться простого выразительного эффекта.

Рис. 3. Расположение буквицы на поле

Разница с предыдущим методом только в том, что буквица не обтекается текстом снизу. Для этого мы должны весь текст абзаца сдвинуть вправо через margin-left, а буквицу сдвинуть влево на то же расстояние (пример 3).

Пример 3. Буквица на поле

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Буквица</title>
  <style>
   p::first-letter {
    font-size: 36px; /* Размер буквы */
    color: red; /* Цвет буквы */
    float: left; /* Выравнивание по левому краю */
    margin: 0 2px 2px -30px; /* Отступы вокруг буквы */
   }
   p {
    margin-left: 30px; /* Сдвигаем текст вправо */
   }
  </style>
 </head>
 <body>
  <p>Необходимо, манипулируя полученными предметами 
  материального мира и фрагментами информационного поля, 
  эмпирическим путем достигнуть логического
  завершения конкурса.</p>
 </body>
</html>

Буквица | WebReference

Буквица является художественным приемом оформления текста и представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Заметьте, что это не просто увеличенный символ, буквица не выступает над блоком текста, а является его частью. Чтобы выделить первую букву воспользуемся псевдоэлементом ::first-letter, он устанавливает стиль первого символа текста. Для этого добавим его к селектору p, как это показано в примере 1.

Пример 1. Создание буквицы

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Буквица</title> <style> p::first-letter { font-size: 3em; /* Размер буквицы */ padding: 3px; /* Поля вокруг первой буквы */ margin-right: 5px; /* Отступ справа */ color: #e7685d; /* Цвет буквицы */ float: left; /* Обтекание по правому краю */ line-height: 0.33em; /* Положение относительно текста */ } p { clear: left; } </style> </head> <body> <p>Жил однажды бедный человек, и было у него сыновей что дырочек в сите, даже на одного больше. Днем и ночью горевал бедняга: что ему делать с детьми, очень уж много их, не перечесть. Никак не мог он придумать столько ремесел, чтобы каждому что-нибудь другое досталось.</p> </body> </html>

Результат данного примера показан на рис. 1. Для начала увеличиваем размер буквицы через свойство font-size и устанавливаем желаемые поля вокруг буквы. Чтобы происходило обтекание используем свойство float со значением left. Тогда первые буквы будут выравниваться по левому краю, а остальной текст обтекать их справа и снизу. Свойство float может затронуть и нижние абзацы текста и получится некрасиво, поэтому для каждого абзаца отменяем его действие через clear. Положение буквы по вертикали относительно остального текста можно регулировать с помощью line-height. Экспериментируйте со значениями и получите разные варианты буквиц.

Рис. 1. Буквица

Если убрать свойство float и margin-right в примере, то мы получим выступающий инициал (рис. 2) — так называется увеличенная первая буква предложения, базовая линия которой совпадает с базовой линией основного текста. В отличие от буквицы выступающий инициал располагается на одной линии с текстом.

Рис. 2. Выступающий инициал

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич
Как сделать буквицу на HTML странице при помощи CSS : WEBCodius
Приветствую Вас, дорогие читатели! Сегодня рассмотрим как создать эффект оформления страницы — буквицу.
Буквица — это прием оформления текста, который представляет из себя увеличенную первую букву. Обычно применяется в печатных изданиях, в книгах, когда первая буква статьи, рассказа или главы оформляется особым образом и такое оформление может содержать в себе изображения растений, животных и других объектов.
С помощью буквицы привлекают внимание читателя к началу текста. Создание буквицы на html страницах не составит особого труда. Далее рассмотрим как это сделать.

Буквица в тексте
Самый простой способ — это просто увеличить первую букву текста и выделить ее цветом. Для этого лучше использовать псевдоэлемент :first-letter, с помощью которого можно определить стиль первого символа в тексте элемента. Например:
<!DOCTYPE html>
<html>
  <head>
    <meta charset=»utf-8″>
    <title>Буквица</title>
    <style>
      p::first-letter {
        font-size: 300%; /* Размер буквы */
        color: red; /* Цвет буквы */
      }
    </style>
  </head>
  <body>
    <p>Когда ночная роса и горный ветер освежили мою горящую голову и мысли пришли в обычный порядок, то я понял, что гнаться за погибшим счастием бесполезно и безрассудно. Чего мне еще надобно? — ее видеть? — зачем? не все ли кончено между нами? Один горький прощальный поцелуй не обогатит моих воспоминаний, а после него нам только труднее будет расставаться.</p>
  </body>
</html>
Результат:
С помощью свойства CSS float можно сделать, чтобы текст обтекал первую букву. Для этого изменяем стили следующим образом:
<style>
p::first-letter {
  font-size: 300%; /* Размер буквы */
  color: red; /* Цвет буквы */
  float: left;/*выравнивание по левому краю*/
  margin: 0 4px 4px 0; /* Отступы вокруг буквы */

}
</style>
Результат:

Посмотреть в браузере
Буквица картинка
Для использования каких-то эксклюзивных шрифтом при оформлении буквицы или для использования каких-то эффектов в качестве первой буквы можно использовать рисунок выравненный по левому краю.
Пример создания буквицы с помощью рисунка:
<!DOCTYPE html>
<html>
  <head>
    <meta charset=»utf-8″>
    <title>Буквица</title>
    <style>
      .bukvica {
        float:left;
        margin:0 2px 2px 0;
      }
    </style>
  </head>
  <body>
    <p><img src=»k.jpg»>огда ночная роса и горный ветер освежили мою горящую голову и мысли пришли в обычный порядок, то я понял, что гнаться за погибшим счастием бесполезно и безрассудно. Чего мне еще надобно? — ее видеть? — зачем? не все ли кончено между нами? Один горький прощальный поцелуй не обогатит моих воспоминаний, а после него нам только труднее будет расставаться.</p>
  </body>
</html>
Результат:
Посмотреть в браузере
Но у этого способа есть большой минус: если буквица на сайте применяется довольно часто, то придется подготовить множество рисунков различных букв и в этом случае усложняется редактирование текста, т. к. вместо обычного изменения первой буквы придется вставлять новый рисунок.
На этом все. Теперь вы запросто сможете оформить буквицу на своих сайтах. До новых встреч!
Буквица для сайта — css код | Кодинг
Продолжаем добавлять стили для собственного использования на нашем сайте и параллельно показываем нашим читателям, как реализованы те или иные элементы оформления текста. На этот раз в центре нашего внимания буквица — первый символ абзаца. Это отличный способ стилизации текста. Посмотрите пример прямо в этом тексте. Красивая красненькая первая буква абзаца сразу обращает на себя внимания и придает тексту вид журнальной статьи, а легкая тень придает объемность. Шаблоны сайтов с такими элегантными css-элементами всегда выделяются и обращают внимание читателей и пользуются большой популярностью у веб-мастеров.
Когда вы будете писать текст с использованием буквицы, то придется слегка задумываться над тем, с какой буквы и какого слова начать абзац. Хотя, описанный здесь метод работает в любом случае — вам не надо ни о чем заботиться — первая буква в абзаце формируется автоматически. Это может быть даже не буква, а номер. Например, номер пункта. Или даже специальный html-символ. Главное, чтобы он был в том шрифте, который использован для буквицы.
✔ Вот в этом абзаце приводится пример, как можно буквицу использовать не стандартно для выделения нужного вам фрагмента текста специальным значком или символом. Это по сути просто имитация маркированного списка, но совершенно оригинальным способом. Впечатляет.
Использовав например, div для формирования абзаца, можно разместить абзац без первой стилизованной буквы так как это сделано в настоящем абзаце. Все просто, понятно и доступно. Отметим, что предложенный здесь способ формирования буквицы хорошо подходит и для адаптивного шаблона — размер буквы настраивается под размер основного шрифта текста.
1 А здесь приводится пример, использования нумерации в качестве первого символа в абзаце. Создается иллюзия номера. Подводя итог, можно сказать, что варианты использования буквицы ограничены только вашей фантазией и потребностями форматирования вашего текста.
Теперь остается только привести css-код, который позволил нам реализовать варианты оформления текста, приведенные на этой странице. Отметить, что это чистый css, котором использован псевдоэлемент :first-letter. Справедливости ради отметим, что этот элемент не срабатывает, если перед текстом есть картинка. А теперь код для блока p:
p:first-letter { float: left; margin-right: 10px; font: 2.4em/1 Georgia; text-shadow: 1px 1px 3px silver; color: crimson; }
Как улучшить буквицу с помощью свойства initial-letter
От автора: буквицы ставятся в начале строки текста и используются для украшения. Начальная буква занимает несколько строк текста, а сам текст сдвигается немного вправо.
Традиция использовать буквицы в тексте стара, как сама типография, и сегодня мы можем имитировать их с помощью CSS псевдоэлемента ::first-letter. Однако, как известно, стилизовать данный элемент крайне неудобно, но тут нам поможет наше свойство initial-letter. Давайте посмотрим, что это за свойство такое, что мы можем делать с его помощью, а также чего можно ждать в будущем от него.
Старый способ
Давайте сначала взглянем на демо ниже. Мы видим параграф текста.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Теперь с помощью псевдоэлемента ::first-letter мы получаем доступ к первой букве параграфа. В этом подходе мы должны были бы заставить текст обтекать первую букву с помощью p::first-letter { float: left; }, т.е. выдергиваем первую букву из параграфа и задаем нужный ей размер:
Неплохо, дальше можно прописать свойства line-height, задать позиционирование и т.д. Данный способ также довольно хорошо поддерживается в браузерах. Однако он не идеален; нам нужен полный контроль и гибкость, чтобы выжать из буквицы все по максимуму.
Новый способ
Свойство initial-letter (на данный момент обсуждается как редакторский проект на W3C и будет стандартизировано в скором времени) даст нам полный типографский контроль, именно то, что мы хотели. Данное свойство используется в паре с first-letter. Первое принимаемое значение – размер первой буквы, т.е. сколько строк оно займет.
p::first-letter { initial-letter: 3; }
p::first-letter {
  initial-letter: 3;
}
А так это будет выглядеть:
Оговорка
И на этом нам придется остановиться, простите. Поддержка данного свойства все еще очень слабая. На момент написания статьи демо выше корректно отображалось только в Safari OS X и в версии для iOS, и то, потому что мы используем префикс: -webkit-initial-letter: 3;
Если в демо выше у вас ничего не работает, вот вам скриншот:
Первая буква в Safari OS X
Первое, что можно заметить, это разные шрифты. Видимо, ни один браузер не может показывать нормально свойство initial-letter и веб-шрифты. Системные шрифты на странице отображаются корректно, но их необходимо явно объявлять; добавление в конец стека шрифтов стандартных serif или sans-serif; никак не влияет на отображение. Чтобы все заработало, необходимо что-то типа font-family: «my web font», arial;.
Во-вторых, верхняя строка убегает за видимую область страницы. Это баг, так что нам нужно его пофиксить, пока его не уберут. К нашему счастью это можно сделать, загнав границы первой буквы выше верхней границы параграфа (т.е. дав понять браузеру, что верхняя строка не должна равняться по ширине всему контейнеру). Сделать это можно с помощью большого margin-top:
Второе значение
Продолжим. Второе значение для initial-letter опциональное. С его помощью можно указать, насколько строк должна провалиться первая буква. К примеру:
p::first-letter { initial-letter: 3 2; }
p::first-letter {
  initial-letter: 3 2;
}
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Выше мы объявили, что первая буква должна занимать 3 строки по высоте, но утопать она будет всего лишь на две строки.
Такие буквы называют «притопленными», а не буквицами. Если вам ничего не видно, ниже скриншот:
Делаем буквицу адаптивной
Большая буквица может смотреться отлично, но на узких экранах она должна становиться частью общего адаптивного шрифта. На маленьких экранах, обычно, уменьшают размер текста. Поэтому и буквицу необходимо уменьшить.
/* базовые стили параграфа */ p { font-size: 1em; } /* базовые стили буквицы */ p::first-letter { initial-letter: 2; color: #c69c6d; margin: 1em .2em 0 0; } /* mobile first медиа запрос */ @media only screen and (min-width: 800px) { /* стили параграфа для больших экранов */ p { font-size: 1.25em; } /* стили буквицы для больших экранов */ p::first-letter { initial-letter: 3 2; margin: 1em .5em 0 0; } }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* базовые стили параграфа */
p {
    font-size: 1em;
}
/* базовые стили буквицы */
p::first-letter {
    initial-letter: 2;
    color: #c69c6d;
    margin: 1em .2em 0 0;
}
/* mobile first медиа запрос */
@media only screen and (min-width: 800px) {

    /* стили параграфа для больших экранов */
    p {
        font-size: 1.25em;
    }

    /* стили буквицы для больших экранов */
    p::first-letter {
        initial-letter: 3 2;
        margin: 1em .5em 0 0;
    }

}
Фолбэк
Если вы просматривали демо выше в неподдерживающем свойство браузере, то вы, скорее всего, хотите избежать подобной ситуации впредь:
Применились все стили кроме собственно тех, которые отвечают за буквицу. С помощью CSS feature query можно применять стили выборочно. Оберните стили для буквицы в условие @supports:
@supports (initial-letter: 1) or (-webkit-initial-letter: 1) { /* стили initial-letter */ }
@supports (initial-letter: 1) or (-webkit-initial-letter: 1) {

/* стили initial-letter */

}
Если свойство initial-letter поддерживается, стили применятся и наоборот. Обратите внимание: даже CSS feature query не имеет универсальной поддержки, так что подумайте, прежде как использовать их. Лучше воспользоваться Modernizr.
Разбираясь в данном вопросе дальше, вы, возможно, захотите подключить dropcap.js JavaScript polyfill от Adobe, но в этой статье мы не будем о нем рассказывать. Почитать об этом полифиле можно в блоге Dudley Storey.
Заключение
Пока что еще слишком рано, но свойство initial-letter уже подает большие надежды. Следите за новыми свойствами initial-letter-align (используется для неримских алфавитов) и initial-letter-wrap (с его помощью можно более точно подогнать обтекающий текст).
Демо в статье довольно функциональны, но вы только представьте, какие возможности в декорировании шрифтов могут открыть эти свойства! В принципе, мы сможем применять большую часть общих свойств и к буквице:
Все общие свойства для шрифтов
Цвет и прозрачность
Text-shadow и другое декорирование текста
Свойства transform
А может и background-clip?
Автор: Ian Yates
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
Смотреть
Создание буквицы
Буквица является художественным приемом оформления текста и представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Заметьте, что это не просто увеличенный символ, буквица не выступает над блоком текста, а является его частью (рис. 1).
Рис. 1. Вид буквицы в тексте
Буквица в виде картинки
Буквица привлекает внимание читателя к началу текста, особенно если страница лишена других ярких деталей. Обычно кроме самого символа используются изображения растений, животных и других объектов. Это, конечно, не обязательно, но может придать определенный настрой содержанию. Если хочется именно так сделать на сайте, лучше всего для этого подойдет рисунок, выровненный по левому краю (пример 1).
Пример 1. Создание буквицы с помощью рисунка
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN»>
<html>
<head>
<meta http-equiv=»content-type» content=»text/html; charset=windows-1251″>
<title>Буквица</title>
</head>
<body>
<p><img src=»d.gif» alt=»» align=»left» hspace=»4″>олго ли, коротко ли, скоро сказка сказывается, да не скоро дело делается, — приходит Иван-царевич к избушке; стоит в чистом поле избушка, на куриных лапках повертывается.</p>
</body>
</html>
Расстояние от текста до изображения управляется параметрами hspace — отступы вокруг рисунка по горизонтали и vspace — отступы по вертикали. Выравнивание рисунка по левому краю и одновременно его обтекание текстом создается параметром align тега <IMG> со значением left.
Достоинства рисунков в качестве буквицы следующие:
применение любого шрифта и разных эффектов;

простота метода;

возможность использовать в качестве графического формата анимированный GIF-файл, что дает дополнительные параметры оформления.

Недостатки: если буквица на сайте применяется довольно часто, придется подготовить множество рисунков разных букв, также усложняется возможность редактирования текста, т.к. вместо простого изменения буквы потребуется вставлять новый рисунок.
Буквица в тексте
Можно создать буквицу не в виде рисунка, а в качестве простого текста, увеличенного по сравнению с базовым шрифтом. Для того чтобы текст огибал первую букву, ее необходимо поместить в контейнер <SPAN> и для него задать свойство float со значением left, как показано в примере 2.
Пример 2. Использование стилей для создания буквицы
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN»>
<html>
<head>
<meta http-equiv=»content-type» content=»text/html; charset=windows-1251″>
<title>Буквица</title>
<style type=»text/css»>
.letter {
font-size: 220%;
float: left;
color: blue;
padding-right: 3px;
line-height: 32px;
}
</style>
</head>
<body>
<p><span>Р</span>ангоут — совокупность деревянных частей оснащения судна, предназначенных для постановки парусов, сигнализации, поддержания грузовых стрел и проч. (мачты, стеньги, гафеля, бушприт и т.д.).</p>
</body>
</html>
Результат данного примера показан на рис. 2.
Рис. 2. Вид буквицы, созданной с помощью стилей
Размер шрифта буквицы управляется с помощью параметра font-size, а цвет символа через color. Чтобы добавить небольшое пространство между буквицей и текстом используется атрибут padding-right. Также можно слегка сдвигать букву вверх или вниз за счет добавленного свойства line-height. Значение подбирается самостоятельно, исходя из гарнитуры шрифта, размера текста и собственны х предпочтений.
На самом деле создание буквицы можно автоматизировать, если вспомнить о псевдоэлементе first-letter. Он через двоеточие добавляется к требуемому селектору и определяет стиль первого символа текста. Таким образом, запись p:first-line будет задавать стиль первой буквы каждого абзаца текста (тега <P>). Так что в простейшем случае CSS перепишется, как показано в примере 3.
Пример 3. Использование псевдоэлемента first-letter
<style type=»text/css»>
P:first-letter {
font-size: 220%;
float: left;
color: blue;
padding-right: 3px;
}
</style>
Пойдем дальше и сделаем так, чтобы буквица добавлялась только для первого абзаца текста. Для этой цели конечно можно ввести новый класс и применять его к первому тегу <P> в тексте, но проще опять же воспользоваться всей мощью стилей и по максимуму автоматизировать свою работу. В частности, существуют соседние селекторы, благодаря которым и можно установить, чтобы стиль первого абзаца отличался от последующих. Общая запись в этом случае будет следующей.
P {
}
P + P {
}
Пробелы вокруг плюса не обязательны, стиль при такой записи применяется к текстовому абзацу только в том случае, если перед ним был еще один абзац. Поскольку перед первым абзацем ничего нет (на то он и первый), то стиль соседнего селектора к нему не применим.
Замечание
Соседние селекторы не поддерживаются браузером Internet Explorer.
Для создания буквицы требуется добавить псевдоэлемент first-letter к селектору P и определить вид первого символа. Но поскольку это действие будет распространяться на все параграфы текста, то с помощью соседних селекторов требуется придать буквице вид обычного текста (пример 3).
Пример 4. Использование дочерних селекторов
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN»>
<html>
<head>
<meta http-equiv=»content-type» content=»text/html; charset=windows-1251″>
<title>Буквица</title>
<style type=»text/css»>
p:first-letter {
font-size: 30pt;
float: left;
background-color: #fc0;
padding: 3px;
margin-right: 4px;
}
p + p:first-letter {
color: black;
font-size: 12pt;
background-color: #fff;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<h2>Ловля льва методом случайных чисел</h2>
<p>Разделим пустыню, в которой живет лев, на ряд элементарных прямоугольников. После чего перебираем выделенные фрагменты пустыни, каждый раз выбирая фрагмент случайным образом. На каждом цикле итерации проверяем, находится ли здесь лев. Если да, то лев окажется пойман.</p>
<p>Некоторым читателям может показаться, что этот вариант похож на метод простых итераций, в котором происходит простой перебор участков пустыни для поиска льва. Это действительно так, за исключением того, что прямоугольники выбираются не последовательно, а случайно. Таким образом, в лучшем случае поиск может закончиться сразу же, а в худшем — превратиться в метод последовательного перебора.</p>
<p>Во всех случаях предполагается, что лев стационарен и не покидает своего места. Для поиска мобильного льва следует воспользоваться методом обратной реверберации или методом искривленного квазипространства.</p>
</body>
</html>
Результат данного примера показан ниже. В браузере Internet Explorer буквица будет добавлена к каждому абзацу без исключений.
Рис. 3. Буквица для первого абзаца текста
Команда p + p:first-letter определяет стиль первой буквы всех абзацев кроме первого и предназначена для того, чтобы преобразовать буквицу в рядовой текст. Впрочем, ничего не мешает изменить цвет символов и получить тем самым новое оформление текстового материала.
Создаем буквицу при помощи CSS3
Сегодня я собираюсь рассказать вам о том, как создать красивую буквицу при помощи CSS3. Я уверен, что вы часто видели эти большие буквы в книгах детских сказок. Особенно в старых книгах. Для повторения этого эффекта некоторые веб-мастера выделяют первую букву в отдельный элемент DOM и применяются специальные стили для этого элемента. Но теперь это не является необходимым, так как можно использовать CSS3. Мы будем использовать селектор :first-letter, чтобы выбрать нужный нам первый символ. Давайте взглянем на пример, который мы будем делать.
Демонстрация
Ок, пример мы посмотрели, а теперь посмотрим как это сделать
Шаг 1. HTML
Вот HTML-структура нашей страницы, тут нет ничего особенного:
<!DOCTYPE html>
<html lang=»ru» >
<head>
<meta charset=»utf-8″ />
<title>Создаем буквицу при помощи CSS3</title>
<link href=’http://fonts.googleapis.com/css?family=Ruslan+Display&subset=latin,cyrillic’ rel=’stylesheet’ type=’text/css’>
<link rel=»stylesheet» href=»css/layout.css» type=»text/css» media=»screen»>
</head>
<body>
<header>
<a href=»http://www.webmasters.by/articles/html-coding/937-css3-drop-caps.html» target=»_parent»>Вернуться к <span>статье</span></a>
</header>
<div>
<h3>Сказка о Ваське-Муське</h3>
<div>В некотором царстве, некотором государстве, а именно в том, в котором мы живем, жил-был досюль помещик. У помещика был кот, звали его Васька-Муська.
Помещик любил Ваську-Муську, и кот свою кошачью работу работал хорошо — в хлебных лабазах ловил крыс и мышей. Когда хозяин прогуливался, Васька-Муська мог нести во рту до фунта весом гостинец из лавки домой, и крепко любил его за это помещик — двадцать лет держал кота Ваську-Муську.</div>
<div>Наконец Васька-Муська стал старый, усы у него выпали, глаза у него стали худые, сила стала у него мала, не может крыс ловить и мышей давить. Надоел помещику Васька-Муська, схватил его помещик за загривок, выбросил на задворок и пнул ногой.</div>
………………
</body>
</html>
Обратите внимание, что шрифт мы подключаем при помощи Google Web Fonts API
Шаг 2. CSS
Здесь представлены все необходимые стили CSS для достижения этого эффекта:
CSS/layout.css
body {
background-color:#eee;
color:#000;
font:14px/1.3 Arial,sans-serif;
}
header {
background-color:#212121;
box-shadow: 0 -1px 2px #111111;
display:block;
height:70px;
position:relative;
width:100%;
z-index:100;
}
header h3{
font-size:22px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px 0;
position:absolute;
width:540px;
}
header .stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
.container {
border: 1px dotted #000000;
margin: 0 auto;
overflow: hidden;
padding: 20px;
position: relative;
text-align: justify;
width: 75%;
}
@font-face {
font-family: ‘Ruslan Display’, cursive;
}
.container div, .container h3 {
color: #000000;
font-family: ‘Ruslan Display’, cursive;
font-size: 18px;
line-height: 32px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
.container div:first-letter {
float: left;
font-size: 80px;
line-height: 1;
margin: 15px 5px 0 0;
text-transform: uppercase;
}

Первая половина стилей — это макет страницы, им можете не уделять внимание. Последние три правила являются наиболее важными. Мы подключили специальный шрифт (‘Ruslan Display’) при помощи @font-face. Первая буква каждой строки выбирается при помощи селектора :first-letter. Для каждой первой буквы каждой строки мы задали большой размер (80px), верхний регистр, а также float:left и отступы, чтобы буква не сливалась с основным текстом.
Ну вот и всё! Как вы смогли убедиться, здесь нет ничего сложного. Удачи!
Скачать исходники
Перевод

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Буквицы в CSS с использованием первой и начальной буквы
Хотя в этом руководстве содержится контент, который, по нашему мнению, принесет большую пользу нашему сообществу, мы еще не тестировали или отредактировал его, чтобы обеспечить безошибочное обучение. Это в нашем списке, и мы над этим работаем! Вы можете помочь нам, нажав кнопку «сообщить о проблеме» в нижней части руководства.
Буквицы
долгое время использовались в печатных СМИ, чтобы придать красочности первой букве первого абзаца раздела или главы.Эти буквицы помогают привлечь внимание и соблазнить читателя, и часто это хороший повод использовать очень стилизованный шрифт, потому что он нанесен только на одну букву и не повлияет на читаемость текста. Тот же эффект буквицы может быть достигнут с помощью CSS, используя псевдоэлемент :: first-letter и новое свойство initial-letter.
:: Селектор псевдоэлементов по первой букве
:: first-letter — это селектор псевдоэлементов, похожий на :: before и :: after, который фактически делает первую букву элемента стилизованной, как если бы это был его собственный отдельный элемент, и все это без необходимости добавления какой-либо дополнительной разметки на ваши страницы. .
Вот простой пример, в котором мы стилизуем 1-ю букву 1-го абзаца или элементов статьи:
article p: first-child :: first-letter { цвет: горячий розовый; набивка: 0,3 бэр; маржа: 0,3 бэр 0 0; граница: сплошная 2px; радиус границы: 8 пикселей; семейство шрифтов: "IBM Plex Mono", моноширинный; }
И с этим мы получаем что-то вроде этого:
Lorem ipsum dolor sit amet, conctetur adipiscing elit. Suspendisse ante turpis, rhoncus vel nisi eu, congue iaculis neque.Nunc bibendum dui felis, et auctor mi maximus in. Vestibulum porta orci et ex mattis, sit amet feugiat justo fermentum. Duis blandit tempor purus at elementum. В id conquat lorem.
Но в раю проблемы. Посмотрите, что произойдет, если мы выберем шрифт большего размера; одна из основных характеристик типичной буквицы:
article p: first-child :: first-letter { цвет: горячий розовый; набивка: 0,3 бэр; маржа: 0,3 бэр 0 0; граница: сплошная 2px; радиус границы: 8 пикселей; семейство шрифтов: "IBM Plex Mono"; размер шрифта: 4rem; высота строки: 1; }
Lorem ipsum dolor sit amet, conctetur adipiscing elit.Suspendisse ante turpis, rhoncus vel nisi eu, congue iaculis neque. Nunc bibendum dui felis, et auctor mi maximus in. Vestibulum porta orci et ex mattis, sit amet feugiat justo fermentum. Duis blandit tempor purus at elementum. В id conquat lorem.
Помимо использования большего размера шрифта, мы также устанавливаем низкое значение для line-height, чтобы на высоту строки первой строки не влияла начальная высота строки этой первой буквы, учитывая более крупный шрифт. Проблема в том, что буквица не совсем понижает .Одно из решений — использовать старые добрые поплавки:
.
article p: first-child :: first-letter { цвет: горячий розовый; набивка: 0,3 бэр; маржа: 0,3 бэр 0 0; граница: сплошная 2px; радиус границы: 8 пикселей; семейство шрифтов: "IBM Plex Mono", моноширинный; размер шрифта: 4rem; плыть налево; высота строки: 1; }
Lorem ipsum dolor sit amet, conctetur adipiscing elit. Suspendisse ante turpis, rhoncus vel nisi eu, congue iaculis neque. Nunc bibendum dui felis, et auctor mi maximus in. Vestibulum porta orci et ex mattis, sit amet feugiat justo fermentum.Duis blandit tempor purus at elementum. В id conquat lorem.
Браузер поддерживает :: first-letter практически универсально.
буква Свойство
Альтернативой использованию float вместе с line-height и font-size для правильного оформления буквицы является использование нового свойства initial-letter, которое ожидает числовое значение, представляющее количество строк, до которых должна доходить буквица. Затем браузер автоматически вычисляет правильный размер шрифта:
article p: first-child :: first-letter { цвет: горячий розовый; отступ справа: 8 пикселей; -webkit-initial-letter: 3; буква: 3; }
Lorem ipsum dolor sit amet, conctetur adipiscing elit.Suspendisse ante turpis, rhoncus vel nisi eu, congue iaculis neque. Nunc bibendum dui felis, et auctor mi maximus in. Vestibulum porta orci et ex mattis, sit amet feugiat justo fermentum. Duis blandit tempor purus at elementum. В id conquat lorem.
На момент написания эта последняя демонстрация будет работать только в Safari, как ожидалось. В отличие от :: first-letter, поддержка начального письма, к сожалению, на данный момент практически отсутствует. Так что пока нам придется еще некоторое время использовать поплавки.Если вы по-прежнему хотите использовать начальную букву, вы, вероятно, захотите использовать ее с @supports at-правилом, чтобы буквица не выглядела странно в браузерах, не поддерживающих поддержку.
Создание буквиц в HTML и CSS
В этой статье обсуждаются шаблоны проектирования, образующие буквицы, которые используются для повышения привлекательности веб-страниц. Буквица существует там, где увеличивается первый символ слова, сигнализируя о том, что это начало страницы текста, абзаца и т.д. верх текста.Салфетки также используются в текстах, документах, книгах, статьях и веб-страницах.
Обычно буквица совпадает с верхом первой строки текста и левым полем абзаца, но есть несколько способов добиться этого эффекта.
Выровненная буквица — это буква большего размера, чем следующий текст, при этом начальное значение меньше базовой линии. Вы можете использовать «align-dropcap», чтобы отметить первую букву элемента блока, используя элемент строки.Вы также можете использовать отрицательное значение, чтобы опустить текст ниже базовой линии, или положительное значение, чтобы поднять текст над базовой линией. В случае line-height выберите нормальное значение, чтобы колпачок крепления не перекрывался с закрывающими линиями.
HTML: текст CSS: .aligned-dropcap {выравнивание по вертикали, высота строки, размер шрифта} Пример : Первый пример Буквица с выровненными буквами - это буква большего размера, чем следующий текст, при этом начальное значение меньше базового. Вы можете использовать «выровненный-dropcap», чтобы отметить первую букву блочного элемента элементом строки. Вы также можете использовать отрицательное значение, чтобы опустить текст ниже базовой линии, или положительное значение, чтобы поднять текст над базовой линией.В случае line-height выберите нормальное значение, чтобы колпачок крепления не перекрывался с закрывающими линиями. !!! Буквица выравнивается вверх и по правому краю, а текст выравнивается по правому краю.
Буквица с буквой — это селектор (это первая буква и выбирает подгруппу контента) и используется для добавления стиля к первой букве упомянутого отрывка. Он имеет следующие свойства:
цвет, шрифт, фон, граница, отступы, преобразование текста, высота строки, плавание, очистить CSS:.class: first-letter {стили} / .ID: first-letter {стили} Пример : Первая буква Является селектором (является первой буквой и выбирает подгруппу содержимого) и используется для добавления стиля к первой букве упомянутого отрывка.
Висячая буквица — имеет два стиля, а именно подвесной отступ, изменяющий высоту, ширину и конечное положение буквицы, и относительную буксовую головку, задаваемую выступом.
HTML: <блок> текст CSS: .hanging-indent {отступ слева, отступ текста, верхнее поле} .hanging-dropcap {положение: относительное, верхнее, левое, размер шрифта, высота строки} Пример : H кроме того, что у него есть два стиля, а именно подвесной отступ, изменяющий высоту, ширину и конечное положение буквицы, и относительную буквицу, задаваемую висячим отступом.

Мягкая графическая буквица — мы можем добавить левую подкладку к буквице, чтобы освободить место для фонового изображения, которое является рекламным, декоративным элементом, баннером, захватом, чтобы привлечь читателя. На практике мы вставляем начальную позицию встроенного элемента.
HTML: текст CSS: .padded-dropcap {padding-left, padding-right, margin-left, margin-right, background}. Пример : P добавлен Floating Drop Cap. Мы можем добавить левую подкладку к буквице, чтобы освободить место для фонового изображения, которое может быть рекламным, декоративным элементом, баннером, захватом и т. д. привлечь читателя. На практике мы вставляем начальную позицию встроенного элемента.
Плавающая заглушка — заглушка поплавка используется в качестве относительного левого позиционного поплавка. Вы можете использовать следующие поля: margin-left и margin-right, чтобы отрегулировать положение горизонтального монтажного отверстия, и настройку пика, чтобы отрегулировать положение вертикальной крышки.
HTML: текст CSS: .floating-dropcap {float: left; position: relative; top, margin-left, margin-right, margin-bottom: values} Пример : Выпадающая буквица F используется как относительный левый позиционный плавающий элемент. Вы можете использовать следующие поля: margin-left и margin-right, чтобы отрегулировать положение горизонтального монтажного отверстия, и настройку пика, чтобы отрегулировать положение вертикальной крышки.
Плавающая графическая буквица — указывает, как графический элемент отображается поверх текста буквицы. Практически плавающая плавающая головка получается, если текст dropcap заменяется графическим элементом.
HTML: текст CSS: .floating-dropcap {float, position, margin-left, margin-bottom, width, height}
.
Marginal Drop Cap — этот крайний заголовок используется, когда мы не хотим, чтобы текст переносился влево и под буквицу, он имеет стиль отступа абзаца и стиль, применяемый к букве, которая перемещает буквицу к левому краю относится к первой букве первого абзаца как к встроенным элементам.
CSS: .indent {позиция: относительная; маржа слева: + отступ; margin-top: values} .marginal-dropcap {позиция: абсолютная; слева: -индент; top: values} HTML: <блок> текст
Marginal Graphical Drop Cap — позволяет отображать первую букву абзаца как изображение. Если изображение не может быть воспроизведено в используемом вами браузере, сделайте текст буквицы видимым.
CSS:.отступ {позиция, маржа слева, маржа сверху} .graphic-dropcap {положение, слева, сверху, ширина, высота, высота строки, отступ слева, выравнивание текста} .graphic-dropcap span {положение, ширина, высота, поле, слева, сверху, фоновое изображение, повторение фона} HTML: <блок> текст Пример : Буквицы <стиль> тело { шрифт: 20 пикселей / 2 калибра; } p: first-letter { плыть налево; размер шрифта: 50 пикселей; отступ: 10px 20 10 40px; маржа справа: 9 пикселей; } Эти заглавные буквы и инициалы, соответственно, обеспечивают эффективный способ привлечь внимание пользователей, потому что они добавляют дополнительную ценность, заметную силу страницы и почему не индивидуальность
Заключение
В этой статье представлены различные примеры использования буквиц.Теперь ваша очередь сделать свои веб-страницы более привлекательными.
Как создать эффект буквицы CSS
Эффект буквицы — традиционный эффект печатных СМИ. Первая буква абзаца увеличенного размера, занимающая следующие пару строк. В этом уроке я покажу вам, как убрать первую букву абзаца или «эффект буквицы» с помощью CSS. Готовый? Давай проверим!
Традиционный подход
Вот наш пример страницы с парой абзацев текста.Первое, что мы сделаем, это увеличим размер шрифта и изменим цвет первой буквы. Мы можем легко это сделать, используя селектор по первой букве. Я также добавлю отступ справа для дополнительного пробела между буквой и абзацем
.
p :: first-letter { красный цвет; размер шрифта: 80 пикселей; отступ справа: 8 пикселей; }
Теперь вы увидите, что стиль был применен ко всем абзацам, а не только к первому. Мы можем исправить это, добавив селектор первого ребенка.И вот ключевая часть, чтобы отбросить первую букву, просто добавьте поплавок влево. Как это просто!
p: first-child: first-letter { красный цвет; размер шрифта: 80 пикселей; отступ справа: 8 пикселей; плыть налево; }
Выглядит хорошо. Теперь проблема в том, что, хотя он отлично работает с Firefox и Edge, Chrome, кажется, добавляет дополнительный запас, когда мы добавляем float.
Мы можем исправить это, уменьшив высоту строки, чтобы компенсировать это. Еще поменяю шрифт на Georgia.
p: first-child: first-letter { красный цвет; размер шрифта: 80 пикселей; отступ справа: 8 пикселей; плыть налево; высота строки: 0,7; семейство шрифтов: грузия; }

Подход к будущему
Перед тем, как мы закончим это руководство, есть собственно свойство initial-letter, которое позволяет добавлять заглавные буквы без использования float и ручной настройки line-height. К сожалению, работает только с Safari. Так что пока мы должны придерживаться решения с плавающей точкой.Наверное, пару лет.
Итак, это все для этого руководства. Как всегда, не забудьте поставить лайк на нашей странице в Facebook и подписаться на наш канал Youtube, чтобы оставаться в курсе. Любые комментарии или вопросы, дайте мне знать. Спасибо за посещение нашего сайта 🙂
Буквицы CSS
23 мая 2007 г. • 1 мин чтения
Берегись! Этот пост был написан в 2007 году, поэтому он может содержать информацию, которая больше не точный.Я храню подобные сообщения в исторических целях и для предотвращения гниения ссылок, поэтому, пожалуйста, держите это в ум, пока вы читаете.
— Кори
Буквицы, которые традиционно используются в печатных СМИ, создаются путем подчеркивания размера, цвета, веса или стиля первой буквы в первом предложении абзаца. Мы можем легко воспроизвести этот эффект на веб-страницах, используя псевдоэлемент : first-letter .
Написание стилей #
Начнем с создания класса под названием drop-cap и добавления к нему стиля:
.drop-cap: first-letter { плыть налево; размер шрифта: 4em; высота строки: 1; маржа: .125em .25em; }
Как видите, размер первой буквы будет значительно больше, чем размер остального текста. Типичная буквица совпадает с верхней частью первой строки текста и левым полем абзаца. Горизонтальное выравнивание происходит естественно, но нам нужно учитывать вертикальное выравнивание. По умолчанию он выглядит немного выше, чем мы хотели, поэтому атрибут margin-top смещает его достаточно, чтобы привести его в соответствие.Это число может меняться в зависимости от размера шрифта и единицы измерения.
Вы также заметите, что первая буква является плавающей. Это позволяет букве погрузиться в текст вместо того, чтобы оставаться в строке.
Применение класса №
Теперь, когда мы создали класс CSS drop-cap , его легко применить к любому элементу абзаца:
Lorem ipsum dolor sit amet, consctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud упражнения ullamco labouris nisi ut aliquip ex ea Commodo Concequat. Duis aute irure dolor в репреендерит в сладострастии velit esse cillum dolore eu fugiat nulla pariatur.
Что дает что-то вроде изображения выше.
Как создать буквицы с помощью CSS
Вы когда-нибудь читали книгу или новостную статью, в которой первая буква главы или абзаца была больше, чем остальные? Это называется буквицей или начальной крышкой и используется в книгах и рукописях на протяжении многих поколений.
Сегодня мы узнаем, как создавать буквицы для нашего письменного контента в Интернете с помощью всего лишь небольшого количества CSS . Мы будем использовать псевдоэлемент CSS : first-letter , чтобы взять под контроль первую букву нашего абзаца и выделить ее.
: псевдоэлемент CSS с первой буквой
Псевдоэлемент CSS : с первой буквой позволяет стилизовать первую букву фрагмента содержимого. Эта функция, поддерживаемая всеми современными браузерами, пригодится при реализации буквиц или начальных стилей заглавных букв для вашей веб-страницы.С псевдоэлементом : first-letter CSS у вас есть полный контроль над тем, как стилизовать только первую букву. Посмотрим, как это работает на практике.
Пример
Шаг 1: Использование: псевдоэлемент с первой буквой
Нашим первым шагом будет определение того, где следует применять этот стиль. В нашем примере мы скажем, что к любому элементу с классом .ex1 должен применяться псевдоэлемент CSS : first-letter , и для начала мы установим его цвет на blueviolet и установим шрифт размер до 500% .
.ex1: first-letter { цвет: сине-фиолетовый; размер шрифта: 500%; }
Следующий абзац имеет класс ex1 и, таким образом, к первой букве O применены атрибуты псевдоэлемента CSS : first-letter .
Когда-то в далекой стране жил разработчик, который любил изучать CSS. Она провела весь день и ночь, исследуя различные свойства, псевдоэлементы и экспериментальные функции, и придумывала всевозможные безумные дизайны, которые невозможно было бы представить с помощью простого CSS.
Выглядит нормально, но с помощью немного большего количества CSS мы действительно можем заставить нашу буквицу соответствовать тому, что мы ожидаем от буквицы. Давай сделаем это дальше.
Шаг 2. Добавьте CSS
.ex2: first-letter { цвет: сине-фиолетовый; размер шрифта: 500%; плыть налево; высота строки: 0,9; маржа справа: 10 пикселей; }
Чтобы подражать традиционной буквице, мы добавили несколько дополнительных стилей, чтобы поиграть с расположением первой буквы. Мы, конечно, могли бы добавить любой другой атрибут CSS, чтобы изменить внешний вид первой буквы нашего абзаца, но я думаю, что вы поняли.
Когда-то в далекой стране жил разработчик, который любил изучать CSS. Она провела весь день и ночь, исследуя различные свойства, псевдоэлементы и экспериментальные функции, и придумывала всевозможные безумные дизайны, которые невозможно было бы представить с помощью простого CSS.
В этом посте мы узнали о псевдоэлементе : first-letter CSS и о том, как мы можем использовать его для создания начальной буквы или буквицы с буквицей. Все основные браузеры поддерживают этот элемент, поэтому не стесняйтесь использовать его в своих приложениях и выделять свои представления.
Буквицы
Пояснение
Буквицы традиционно использовались для выделения новых разделов документа. Латинские рукописи, для например, не включали перерывы при начале нового раздела, поэтому буквицы служили визуальным сигналом для пользователи просматривают текст.
Публикации больше не форматируются таким образом, так как основные новые разделы теперь обычно выделяются размещается в начале новой страницы с более крупным заголовком.
Декоративные буквицы все еще иногда встречаются в публикациях, чтобы придать им дополнительную процветают, но стилизованные буквы больше не служат функциональной цели. Это дополнительное форматирование к сожалению, затрудняет чтение текста некоторыми пользователями. Некоторые примеры включают:
Вспомогательные технологии не могут правильно прочитать первое слово при форматировании стилизованного буквица отделяет его от остального слова.
При использовании изображений масштабирование приводит к пиксельному изображению буквицы.
Отслеживание потока текста становится проблематичным из-за увеличенного размера буквицы (например, у пользователей с дислексией могут возникнуть проблемы с переходом от буквицы к первой строке или поиском правильную следующую строку для возобновления чтения).
По этим причинам лучший совет — избегать использования буквиц.
Однако на практике полностью отказаться от буквиц невозможно. В следующих разделах рассматриваются некоторые из наиболее распространенных методов доступного форматирования буквиц.
CSS
:: первая буква псевдоэлемент
Псевдоэлемент CSS :: first-letter в настоящее время является лучшим вариантом для форматирование буквиц доступным способом.
Например, учитывая следующий пример разметки для новой главы:
Глава 1 Lorem ipsum dolor sit amet, conctetur adipiscing elit… …
Буква «L» может быть оформлена как буквица, используя следующий селектор CSS, чтобы получить первую буква первого p элемента в каждом разделе, обозначенном как глава:
раздел [@ role = 'doc-chapter'] p: first-child :: first-letter { плыть налево; размер шрифта: 3em; высота строки: 1; отступ справа: 0.1em; }
Ниже приведен пример того, как будет отображаться эта разметка:
Lorem ipsum dolor sit amet, consctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, упражнения quis nostrud ullamco labouris nisi ut aliquip ex ea Commodo Concequat. Duis aute irure dolor в репредендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat Cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum.
Поскольку разметка буквицы выполняется только с использованием CSS, это не влияет на возможность вспомогательные технологии, чтобы озвучить первый мир. Кроме того, пользователи могут изменить форматирование текста в своих системах чтения, если увеличенная буква затрудняет чтение сложно.
Единственным недостатком этого подхода является то, что он не всегда приводит к согласованному форматированию буквица. Использование плавающих букв и регулировки высоты строки приводит к различия в выравнивании буквицы в системах чтения и браузерах.
CSS
буква свойство
Свойство CSS initial-letter может исправить форматирование проблемы, возникающие в результате попытки создать буквицу с использованием первой буквы селектор с поплавками и высотой линий. Значение свойства определяет, сколько строк текста высокий, чтобы сделать выделенный текст.
Например, чтобы создать буквицу высотой в две строки, необходим только следующий CSS:
section [@ role = 'doc-chapter'] p: first-child { буква: 2; }
(обратите внимание, что для создания приподнятого колпачка вы должны использовать заглавная: 2 1 )
Проблема с этим подходом заключается в том, что в настоящее время поддержка свойства ограничена (только частичная поддержка в Safari на момент написания).Пока поддержка не станет более широкой, другие следует использовать альтернативы.
Изображения
Тег HTML img иногда используется для форматирования буквиц, как показано ниже. пример:
все мне, Измаил…
Использование тега img мешает программам чтения с экрана правильно однако визуализировать текст. В этом случае программа чтения с экрана сообщит: «Image Cee all me Измаил «.
Аналогичный шаблон — использовать тег span для форматирования буквицы:
С все мне, Измаил…
Фоновое изображение CSS часто применяется для обеспечения форматирования письма. Эта практика не лучше, чем использовать тег img , однако, так как это также приводит к тому, что первая буква произносится отдельно от остального мира.
ARIA
Использование атрибутов ARIA и скрытого содержимого иногда предлагается в качестве решения проблемы используя тег img или span на первой букве.См. Статью Доступные буквицы, Например.
Проблема с этим подходом заключается в том, что помимо поддержки атрибутов ARIA в EPUB Системы чтения, которые плохи, они также полагаются на способность скрывать контент, что также не хорошо поддерживается.
В результате, хотя кажется, что подход может быть доступным, он может привести к содержанию дублирование как визуально, так и для пользователей вспомогательных технологий. Лучше оставить чисто Интернет-публикации.
CSS Drop Cap (Необычная начальная буква)
Подобно тому, что вы найдете в печатных СМИ, CSS позволяет вам стилизовать первую букву в композиции, используя комбинацию двух псевдоклассов. Раньше для этого в старых браузерах первая буква абзаца заключалась в теги , а затем для был применен соответствующий стиль. Браузеры поддерживают расширенные псевдоклассы сегодня намного сильнее, поэтому это безопасно делать с помощью современного CSS и позволять более старым браузерам отказаться от использования буквицы.

.post p: first-child: first-letter { плыть налево; размер шрифта: 6em; отступ справа: .1em; семейство шрифтов: Dancing Script, serif; высота строки: 0,9; цвет: огнеупорный кирпич; }
Язык кода: CSS (css)
Обратите внимание на некоторые особенности CSS:
Я нацелен на первую букву первого абзаца внутри элемента с именем класса .post . Это очень специфично, но вы можете приспособить его к своему собственному контексту.
Ключ к буквице — свойство float . Когда элемент перемещается, он автоматически становится элементом уровня блока, чего мы и хотим здесь.
Шрифт в данном случае — Dancing Script от Google Fonts (см. Демонстрацию ниже).
Вот демонстрация с использованием стилей выше:
Если вы хотите, чтобы первая буква находилась на той же базовой линии, что и начальная строка, или если вы хотите, чтобы буква была на левом поле, это можно сделать с помощью некоторого скорректированного CSS, как показано в коде и ниже:

.post1 p: first-child: first-letter { размер шрифта: 6em; отступ справа: .1em; семейство шрифтов: Dancing Script, serif; высота строки: 0,8; цвет: огнеупорный кирпич; вертикальное выравнивание: снизу; } .post2 p: first-child: first-letter { плыть налево; размер шрифта: 6em; маржа слева: -.5em; отступ справа: .1em; семейство шрифтов: Calistoga, serif; высота строки: 0,8; цвет: огнеупорный кирпич; }
Язык кода: CSS (css)
Обратите внимание на использование свойства vertical-align в первом примере, а не на float.Кроме того, второй пример возвращается к float, но перемещает букву за пределы поля. Это может работать не для всех макетов.
Следует также отметить, что существует псевдокласс с начальной буквой , но поддержка его браузерами очень слабая.
Примечание. Насколько нам известно, приведенная выше информация и фрагмент актуальны и актуальны. Однако, если вы заметили, что что-то не так, сообщите об этом фрагменте или оставьте комментарий ниже.
No related posts.