Практика использования большой заглавной буквы для выделения начала текста насчитывает почти две тысячи лет.
Иллюстрированные фрагменты повышали удобство использования, отмечая важные места и обеспечивали ориентацию читателей в тексте. В отличие от своих исторических аналогов, буквицы в интернете не добавляют ценности с точки зрения удобства использования или чтения — они трудны для веб-разработчиков в плане управления, часто из-за разного отражения в браузерах.
Тем не менее, фронтальные дизайнеры и клиенты часто хотят использовать буквицы в качестве декоративных элементов. Как же их можно реализовать? Подобно тому, как писцы, ремесленники, и первые копировальщики имели множество методов для создания начальных литер, веб-дизайнеры также имеют несколько методов для выбора. Мы можем использовать образ буквы, создать класс, чтобы увеличить и поместить букву, или использовать дочернюю иерархию: первая буква относится ко всем строкам абзаца. Но какой метод мы должны использовать? Какой метод остается неизменным во всех браузерах? Какой самый доступный?
Начальные буквы в манускриптах.
Примеры начальных букв находили начиная с четвертого века нашей эры. Ранние книжные собрания (книги со страницами, в отличие от свитков) не имели текстового пространства,перерывов между предложениями, или абзацами. Письменное слово “читать” не имело того значения как оно есть сейчас. Письменный текст, изображал звуки, звуки составляли смысл. “Читатели” жили в основном устной культурой и выражали слова звуками, которые помогали им вспомнить идеи и информацию, уже закрепленные в памяти.
Исторически сложилось так, что начальные буквы были не только декоративными элементами. Писцы использовали их, чтобы отметить новый раздел, новые идеи, начало в тексте. Это, в свою очередь, помогало “читателю” найти место в тексте.
Еще в 15 веке, монахи и писцы использовали начальные буквы, чтобы помочь в визуальном «разбиении» текста. На рисунке 1 показан манускрипт (буквы сделаны от руки) библии от 1407 года. Начальная литера ( P в слове Petrus) содержит изображение святого Петра, и, таким образом, исторически, он относится к тексту, показывая узнаваемые фигуры и сцены. Это также освещение; оно украшено золотом, чтобы принести свет Божий читателю.
Шапка не только помогла ознаменовать начало новой идеи в тексте, она действовала как маркер для значительного места в тексте. Изображения, связанные с историей служили памятью и пособием для священников и монахов, которые «читали» тексты при мерцании огня свечей.
“Начальная шапка”, но посмотрите внимательно (рис. 1 и 2), и вы увидите, что рукопись содержит тонкие пробелы между словами, но не содержит пробел между предложениями.Таким образом, к первой букве каждого предложения, добавляли красные штрихи, которые позволяли создать визуальное разделение на звуки, представленные на странице.
Рисунок 1: украшение фигурами людей в латинской Библии, 1407.Надписи Жерара Брилса, Бельгия.(Изображение: Адриан Пингстоун)
Рисунок 2: Фрагмент латинской Библии, 1407.Надписи Жерара Брилса, Бельгия. Обратите внимание на использование тонких красных линий, чтобы подчеркнуть начало нового предложения.(Изображение: Адриан Пингстоун)
Начальные буквы в печатных книгах
Конечно, не все начальные буквы были так гармоничны, как образ святого Петра украшенного чистым золотом. Буквицы также использовались для мирских целей: как указание алфавитного порядка идей. Подобно использованию в наши дни, алфавитный порядок изначально не применялся для организации информации в книгах. На рисунке 3 показана страница с оглавлением incunabula (старопечатные книги). Начальные буквы в книге были написаны после того, как сама книга была напечатана. Качество надписи не так красиво, как например изображение Святого Петра выше, но буквы выполняют важную роль для читателя.
Рисунок 3: На последней странице оглавления из старопечатных книг.1476 год.Начальные буквы добавлены после того, как книга была напечатана. (Изображение: используется с разрешения Университета Глазго, специальные коллекции).
Раннее печатные книги часто предназначались для копирования рукописей. Копировщики оставляли пространство внутри и вокруг текста— таким образом, владельцы могли бы нанять ремесленника, чтобы проиллюстрировать начальные буквы и границы. На рисунке 4 приведен пример одной из таких книг, где нет начальных буквиц,но они могут быть добавлены. Обратите внимание на начальное пространство страницы, оно предназначено для иллюстратора. Даже без окончательной доработки штрихами, текст хорошо читается (если конечно вы знаете латынь).
Рисунок 5 представляет собой печатную Библию (Венеция, 1480). После того, как как книга напечатана, ремесленниками дорабатываются заглавные буквы (написаны красным цветом), украшенные и обрамленные золотом— таким образом продолжается традиция формальной рукописи книг.
Не все печатные книги требуют доработки начальными буквами. Почти с самого начала копировщиками были разработаны и созданы модульные начальные буквы . На рисунке 6 показаны два раздела с буквицами (иллюстрации не представляют собой конкретного человека или сцену) стоящими бок-о-бок, каждый из которых начинает другой перевод Нового Завета. Заглавные буквы и границы печати располагаются вместе с текстом.
Рисунок 4: Копировальщики оставляли чистое пространство в начале письма. После отпечатки можно было нанять ремесленника, чтобы добавить начальные буквицы. Венеция, 1479.(Изображение: используется с разрешения Университета Глазго, специальные Коллекции).
Рисунок 5: Печатная латинская Библия. После печати и выхода книги ремесленником были добавлены различные оформления. Венеция, 1480.(Изображение: используется с разрешения Университета Глазго, специальные коллекции).
Рисунок 6: Первая полная публикация текста греческого Нового Завета. Буквицы и границы напечатаны вместе с текстом. Базель, 1516.(Изображение: используется с разрешения Университета Глазго, специальные коллекции).
Роль письменных текстов изменилась, начиная с середины-1600, и начальные буквы впали в немилость. Газеты позволяли читателям ознакомиться с текущими идеями и информацией, научные исследования послужили основой рациональной мысли, и печатание страниц было упрощено. Отношения между типом и образом продолжал смещаться —прежде всего под влиянием индустриализации (которая, в свою очередь повлияла на искусство печати, скорость, с которой товар может быть произведен и транспортирован, а также развитие грамотного среднего класса)
Буквицы в интернете
Сегодня начальные буквы больше не нужны, они используются преимущественно в качестве декоративных элементов. Используемые на протяжении веков в религиозных и научных текстах, начальные буквы связанны со “старым” или “традиционными” чувствами. Когда мы хотим создать веб-страницу, которая воплощает в себе традиционные чувства, элегантность, или исторический смысл, появляется желание использовать заглавные буквы.
Есть четыре общих метода для создания буквиц в HTML и CSS. Но какой из них лучше?
Стараясь ответить на этот вопрос, я проверил все четыре метода через 82 различных браузера для операционных систем — в том числе смартфонов.(Если вам интересно, вы можете прочитать список сочетаний и почему я выбрал именно их). В попытке определить, какие методы доступны, я также проверил их с помощью VoiceOver на Mac с Safari 5.1.1.
Какой метод лучше? Ответ на этот вопрос … не понятно.
Метод 1: Изображение замены
Если вы хотите буквицы, которые проявляются постоянно во всех операционных системах— в том числе на смартфонах— нет ни одного. Но с помощью метода изображения замены (рис. 7) можно к нему приблизится. Использование изображения буквицы хорошо держится при 79 из 82 комбинаций испытания. Она перешла на размещение Opera Mini 5.1 (Android 2.2) и Mobile Safari 4.0.5 (iPhone 4, iPhone 3GS).
Рисунок 7: нанесение заглавных букв похоже на то, которое использовалось в 1516 для греческого Нового Завета и показано на рисунке 6 выше.[1] Использование изображений буквицы держится красиво в 79 из 82 браузеров для разных версий операционных систем при комбинированном испытании.[2] Оно немного смещается вниз на Opera Mini 5.1 (Android 2.2).[3] Отклоняется на Mobile Safari 4.0.5 (iPhone 4, iPhone 3GS), в результате чего появляется ненужное пространство под изображением.(Буквица иллюстрации: Брюс Мэддокс).
HTML код для примера “Замены изображения”
<p><span class="drop f">F</span>ine typography does not … </p>
Обратите внимание, что я использовал два класса.Это позволило мне использовать один класс (падение) для стиля пространства, и использовать другого класса (F), чтобы определить образ письма.
CSS для примера “ Замены изображения”
.drop{
display:block;
float:left;
width:72px;
height:72px;
margin-top:5px;
padding-right:8px;
text-indent: -9000px;
}
.f{
background: url(images/f_small.jpg) 0 0 no-repeat;
}
Обратите внимание, что я установил ширину и высоту пространства, к тому же размеры изображения, используемые для представления буквицы. Атрибуты текстового отступа используются для размещения фактического текста за пределами видимой области пространства. Мы не хотим видеть HTML — код, но важно его включить, так как браузер без CSS поддержки покажет все слово полностью.
Просмотреть оригинальные примеры замены изображения в HTML документе.
Способ 2: Надпись в фоновом изображении.
Размещение надписи в фоновом изображении является менее успешной (рис. 8). Оно сработало последовательно в 77 из 82 комбинаций испытаний. Задача ставилась на тех же трех браузерах, что и метод замены изображения выше— Opera Mini 5.1 (Android 2.2) и Mobile Safari 4.0.5 (iPhone 4, iPhone 3GS) —, а также Windows Vista IE7 и Windows,XP IE7. Конечно, пользователи ПК все чаще используют Windows 7 с IE8 или версии выше, так что последние два браузера не вызовут проблем.
Рисунок 8: украшение заглавными буквами похожи с теми , что использовались в 1480 при печати латинской Библии, показанной на рисунке 5 выше— созданные с помощью фонового изображения.[1] Размещение текста в фоновом изображении выполнено красиво в 77 из 82 браузеров различных версий операционных систем при различных комбинациях испытаний.[2] буквица потеряла стиль на Opera Mini 5.1 (Android 2.2).[3] надпись и изображение сдвигаются вверх на Mobile Safari 4.0.5 (iPhone 4, iPhone 3GS), в результате чего образуется ненужное пространство под изображением.[4] Надпись была обрезана в Windows Vista IE7 и Windows XP IE7.
HTML код для примера “Надписи в фоновом изображении”.
<p><span class="cap">A</span>nother way to … </p>
CSS для примера “Надписи в фоновом изображении”.
.cap{
display:block;
float:left;
width:72px;
height:52px;
font-size: 500%;
color:#ffffff;
margin-top:5px;
padding-top:20px;
margin-right:8px;
text-align:center;
background: url(images/flower.jpg) 0 0 no-repeat;
}
Обратите внимание, что я добавил несколько изменений в этой версии, так что надпись не прикасаться к верхнему краю фонового изображения.
Просмотреть оригинальный пример надписи в фоновом изображении можно в HTML документе.
Способ 3: Диапазон структуры без образа.
Создание класса для буквицы (без фонового изображения) несколько менее успешно (рис. 9). Оно работает последовательно в 76 из 82 комбинаций испытаний. Это создает проблему на тех же пяти браузерах что и надпись с фоном метод выше— Opera Mini 5.1 (Android 2.2), Mobile Safari 4.0.5 (iPhone 4, iPhone 3GS), Windows Vista IE7 и Windows XP IE7— а также Windows XP IE6. Опять же, пользователи ПК все чаще используют Windows 7 с IE8 или версии выше, так что браузер IE6 не станет проблемой.
Рисунок 9: простые заглавные буквы похожи на те, которые использовались при печати в 1480 латинской Библии показано на рисунке 5 выше.[1] Создание класса для буквицы без фонового изображения держится в 76 из 82-браузеров для различных версий операционных систем при различных комбинациях испытаний.[2] буквица потеряла стиль на Opera Mini 5.1 (Android 2.2).[3] Она сдвинулась на Mobile Safari 4.0.5 (iPhone 4, iPhone 3GS), в результате чего появилось ненужное пространство под изображением.[4] Надпись была обрезана в Windows Vista IE7, Windows XP IE7 и Windows XP IE6.
HTML код для примера “ Структуры без образа”
<p><span class="dropcap">H</span>istorically,… </p>
CSS для примера “ Структуры без образа”
.dropcap{
float:left;
font-size:400%;
margin-top:14px;
margin-right:5px;
color:#8C8273;
}
Обратите внимание, что в этой версии я добавил справа 5рх. При изображении буквы H объем пространства распределялся гармонично. Правое расположение возможно, потребуется изменить в зависимости от формы надписи, используемой как заглавная буква.
Просмотреть оригинальные примеры структуры без образа можно в HTML документе.
Способ 4: Дочерняя запись
Когда речь идет о последовательности, с использованием ЗС: дочерней записи, первая надпись является наименее успешной (рис. 10). Это создает проблемы с теми же 6 комбинациями, что и структуры без образа, метод выше— Opera Mini 5.1 (Android 2.2), Mobile Safari 4.0.5 (iPhone 4, iPhone 3GS), Windows Vista IE7, Windows XP и IE7Windows XP IE6— было несоответствующее размещение в оставшихся 76 комбинациях испытаний. При установке оригинального размещения буквицы для Firefox, 31 комбинация остается выровненной. Буквицы же в остальных 44 комбинациях были слишком высокими.
Рисунок 10: Выделенная (красным) заглавная буква похожа на те, которые используются в 1476 и 1480 годах в старопечатных книгах показаны на рисунках 3 и 5 выше.[1] Использование первое: дочерняя запись: надпись, создающая буквицу приняла правильное размещение в 31 из 82 браузеров различных версий операционных систем при различной комбинации испытаний.Примечание: оригинальное размещение было определено при просмотре страницы в Firefox. [2] буквицы в 45 версиях были слишком высокими, в результате возникает неестественное соотношение между буквицей и текстом.[3] буквица потеряла стиль на Opera Mini 5.1 (Android 2.2).[4] Сдвинулась на Mobile Safari 4.0.5 (iPhone 4, iPhone 3GS), в результате чего образовалось ненужное пространство под изображением.[5] Опять же, надпись сдвигается вверх (Windows Vista IE7, Windows XP IE7), выпуская одну из строк текста, таким образом теряется связь буквиц …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров