|
|
Регулировка просвета (интерлиньяж) и line-heightХорошо известно, что добавление некоторого интервала между строками текста улучшает его читаемость, так как увеличенное пространство гарантирует, что надстрочные и подстрочные элементы (см. рисунок 29.2 для пояснения) на смежных строках не будут конкурировать за визуальное внимание.
Существует тесная связь между font-size (размером шрифта) элемента и его line-height (высотой строки), но по умолчанию все агенты пользователей вставляют небольшой просвет в каждую строку текста — обычно 10-15% высоты самих букв. Так как это значение по умолчанию изменяется для различных гарнитур шрифта, то свойство line-height поддерживает значение normal, кроме числовых значений.Стоит также отметить, что в отличие от большинства свойств CSS, line-height принимает также числовые значения без единиц измерения, которое затем интерпретируется как доля значения по умолчанию. Пример таблицы стилей 11 Добавляем в отрывок подходящей величины просвет Новые правила p { line-height: 1.5; }.attribution { line-height: 1.5; }Вытеснение pre и br: свойство white-space Принудительные разрывы строк являются презентационным элементом в самом строгом смысле, однако существует много обстоятельств, в которых они являются желательным элементом дизайна сайта. Учитывая привычку браузеров разрывать строки в произвольных местах, реализация требуемой степени контроля только с помощью одной разметки может быть проблемой.Элемент pre предназначен для разрешения таких проблем, хотя он создает свои собственные проблемы, именно поэтому CSS предлагает свойство white-space. Поддерживаемые им значения, которые перечислены в таблице 29.3, позволяют стилисту выбрать, будет или нет браузер учитывать пробелы и разрывы строк, добавленные в исходную разметку или вставленные как генерируемый контент.Рекомендация CSS 2.1 содержит исчерпывающие подробности о предложенной реализации и использовании свойства white-space (http://www.w3.org/TR/CSS21/text.html#white-space-prop). Заключение Хороший дизайн сайта требует высокого уровня внимания к деталям и правильной настройки взаимодействия многочисленных элементов, не самым последним из которых является шрифт. Набор свойств шрифтов и текста, поддерживаемый современными реализациями CSS в браузерах, предоставляет почти высочайший уровень управления над представлением текста, которое допускает существующее оборудование вывода, и добросовестный стилист сайта должен научиться их использовать. В результате успешного использования этих свойств создаются сайты, которые могут стремиться приблизиться к стандартам качества в представлении текста, обычно связываемым с печатной средой, которая развивалась в течение столетий, несмотря на то, что Web существует пока не дольше жизни одного поколения. Библиография · Бос, Берт, и др. 2007. Спецификация каскадных таблиц стилей, уровень 2 ревизия 1 (CSS 2.1). Консорциум WWW.http://www.w3.org/TR/2007/CR-CSS21-20070719 и т.д. (доступно 28 мая 2008 г.). · Чапарро, Барбара, и др. 2004. Чтения текста онлайн: сравнение четырех компоновок пробелов. Wichita State University Software Usablity Research Laboratory Usability News. http://www.surl.org/usabilitynews/62/whitespace.asp (доступно 28 мая 2008 г.). · Дин, Поль. 2008. Терминология экстремальной печати. Я люблю полиграфию, Полиграфический блог.http://ilovetypography.com/2008/03/21/extreme-type-terminology/ и т.д. (доступно 28 мая 2008 г.) · Хортон, Сара, и Линч, Патрик. 2002. Руководство по оформлению Web (http://www.webstyleguide.com/): основные принципы создания Web-сайтов, 2-е издание. New Haven, Conn.: Yale University Press. · Розелли, Адриан. 2002. Простая таблица символьных объектов. Evolt.org.http://www.evolt.org/article/A_Simple_Character_Entity_Chart/17/21234/ (доступно 28 мая 2008). Упражнения · Перечислите три элемента HTML, отличные от b и i, которые обычно изображаются по умолчанию вариантным шрифтом. Опишите кратко назначение перечисленных элементов, и объясните, как использование вариантного шрифта подходит для предназначения этих элементов. · Субъективно оцените удобочитаемость длинного отрывка текста на свой выбор при изменении значений line-height. Суммируйте кратко свои результаты. · Применение text-transform: uppercase; к одному параграфу отрывка из предыдущего упражнения, и повторите свой субъективный тест удобочитаемости. Суммируйте кратко свои результаты. · Объясните кратко преимущества и недостатки сглаживания (anti-aliasing), используя обзор полиграфии в этой лекции в качестве руководства. · Опишите порядок в котором должны определяться гарнитуры в значении font-family. · В настройке неизвестно-чего выберите как минимум три свойства, описанные в этой лекции и укажите как минимум одно допустимое значение (отличное от используемого по умолчанию) для каждого. Продемонстрируйте или опишите результаты использования этих пар свойство/значение в таблице стилей. · Создайте элемент, заполните его текстом, и задайте для него значение font-size равным 9px. Откройте документ, содержащий этот элемент, в Internet Explorer, и переберите размеры шрифта, имеющиеся в меню View Приложение Во всех примерах используется страница с фрагментом текста, который последовательно оформляется добавлением новых правил. Для оформления последовательно создается следующая таблица стилей: body { margin: 0; padding: 0 20%; font-size: 14px; font-family: Palatino,'Palatino Linotype',Georgia, sans-serif;} p { margin:.429em auto; text-align: justify; text-indent: 1.429em; line-height: 1.5;} q { letter-spacing:.143em;} q:before, q:after { content: "";} h1 { font-size: x-large; font-family: Helvetica,Arial,sans-serif; font-style: italic;} blockquote { font-family: Helvetica,Arial,sans-serif;} blockquote p { text-align: left; text-indent: 0;}.sectionNote { font-size: medium; font-style: normal;}.attribution { font-size: small; line-height: 1.5;}.author { font-weight: bold; text-transform: uppercase;}.source a { text-decoration: none;}.pullQuote { word-spacing:.143em;}.opening { font-variant: small-caps;}Листинг. Окончательная страница с оформлением: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="content-type" content="text/html;charset=utf-8" /><title>CSS Technique Demonstration: Text and Boxes</title><link rel="stylesheet" type="text/css" href="text_11.css" /> </head><body class="alpha"> <h1>The Diamond as Big as the Ritz <span class="sectionNote">[prologue]</span></h1> <div class="attribution"> <div class="author">By F. Scott Fitzerald</div> <div class="citation">First published in <cite>The Smart Set</cite>, June 1922</div> <div class="source">Adapted from <a href="http://www.gutenberg.org/etext/6695"> Gutenberg EText #6695</a>, <cite>Tales of the Jazz Age</cite></div></div> <blockquote class="pullQuote"><p>“Don’t forget who you are and where you come from,” continued his father proudly, “and you can do nothing to harm you. You are an Unger — from Hades.”</p></blockquote><p><span class="opening">John T. Unger came from a family</span> that had been well known in Hades — a small town on the Mississippi River — for several generations. John’s father had held the amateur golf championship through many a heated contest;Mrs. Unger was known “from hot-box to hot-bed,” as the local phrase went, for her political addresses; and young John T. Unger, who had just turned sixteen, had danced all the latest dances from New York before he put on long trousers. And now, for a certain time, he was to be away from home. That respect for a New England education which is the bane of all provincial places, which drains them yearly of their most promising young men, had seized upon his parents. Nothing would suit them but that he should go to St. Midas’s School near Boston — Hades was too small to hold their darling and gifted son.</p><p>Now in Hades — as you know if you ever have been there — the names of the more fashionable preparatory schools and colleges mean very little. The inhabitants have been so long out of the world that, though they make a show of keeping up-to-date in dress and manners and literature, they depend to a great extent on hearsay, and a function that in Hades would be considered elaborate would doubtless be hailed by a Chicago beef-princess as “perhaps a little tacky.”</p><p>John T. Unger was on the eve of departure. Mrs. Unger, with maternal fatuity, packed his trunks full of linen suits and electric fans, and Mr. Unger presented his son with an asbestos pocket-book stuffed with money.</p> <p>“Remember, you are always welcome here,” he said. “You can be sure, boy, that we’ll keep the home fires burning.”</p><p>“I know,” answered John huskily.</p><p>“Don’t forget who you are and where you come from,” continued his father proudly, “and you can do nothing to harm you. You are an Unger — from Hades.”</p><p>So the old man and the young shook hands, and John walked away with tears streaming from his eyes. Ten minutes later he had passed outside the city limits and he stopped to glance back for the last time. \Over the gates the old-fashioned Victorian motto seemed strangely attractive to him. His father had tried time and time again to have it changed to something with a little more push and verve about it, such as <q>“Hades — Your Opportunity,”</q> or else a plain <q>“Welcome”</q> sign set over a hearty handshake pricked out in electric lights. The old motto was a little depressing, Mr. Unger had thought — but now…</p><p>So John took his look and then set his face resolutely toward his destination. And, as he turned away, the lights of Hades against the sky seemed full of a warm and passionate beauty.</p> </body></html>Листинг. Лекция 30:   ЧТО ПРОИСХОДИТ, КОГДА МЫ ССОРИМСЯ Не понимая различий, существующих между мужчинами и женщинами, очень легко довести дело до ссоры...  ЧТО ТАКОЕ УВЕРЕННОЕ ПОВЕДЕНИЕ В МЕЖЛИЧНОСТНЫХ ОТНОШЕНИЯХ? Исторически существует три основных модели различий, существующих между...  Что вызывает тренды на фондовых и товарных рынках Объяснение теории грузового поезда Первые 17 лет моих рыночных исследований сводились к попыткам вычислить, когда этот...  ЧТО ПРОИСХОДИТ ВО ВЗРОСЛОЙ ЖИЗНИ? Если вы все еще «неправильно» связаны с матерью, вы избегаете отделения и независимого взрослого существования... Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:
|
Text Size. Оцените пригодность этих результатов на сайтах с большим числом посетителей среднего и старшего возраста.