В Microsoft Word, который построен по принципу WYSIWYG, важно сохранять корректность разметки на любом разрешении. Это значит, что разметка должна быть свободно масштабируемой, и она действительно масштабируема. Но позвольте мне провести небольшое расследование. Ниже приведен текст так, как он выглядит в Microsoft Word из пакета Office 2003. Нет смысла читать этот текст, просто взгляните на него.

И сравните с тем, как он выглядит в Adobe Acrobat Reader:

Вы сможете лучше ощутить разницу, если скачаете оба изображения, и будете переключаться между ними в какой-нибудь программе, поддерживающей слайдшоу (я использую приятный и бесплатный IrfanView). Текст в Adobe Acrobat смотрится равномернее, к тому же, он гораздо ближе к тому, что мы видим на принтере. Текст в MS Word смотрится более чётким, но в целом он уродливее. Почему? Из-за кривого кернинга. Выглядит так, будто бы они вообще отказываются от кернинга на низких разрешениях (а 96 DPI это очень мало). Привязка глифов к пикселям в конечном итоге приводит к случайно разбросанным пробелам, которые выглядят просто ужасно. Есть только один способ заставить текст выглядеть лучше - использовать горизонтальное субпиксельное позиционирование. Это физический закон, близко связанный с теоремой Котельникова (в англоязычной литературе - теорема Найквиста - Шеннона или теорема отсчётов), которая гласит:

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

В нашем случае под спектром сигнала мы имеем в виду частоту дискретизации. На практике это значит, что вы не можете корректно отобразить набор вертикальных линий, одновременно четко и с равными интервалами до тех пор, пока интервалы кратны пикселям. Либо расстояние между линиями будет прыгать, либо некоторые линии будут выглядеть размытыми. Другого выбора нет, и точка.

Пьер Арнауд продемонстрировал это ещё более понятным образом :

Положим, вам нужно вывести глиф для символа «i», который будет шириной точно в 2.4 пикселя. Если вы используете хинтинг, скорее всего, вы получите на выходе изображение шириной в 2 пикселя. Положим, пробел у нас равен четырем пикселям.
Теперь представьте себе, что вам нужно вывести «iiiiiiiiii» (глиф «i» 10 раз). Это даст нам слово, которое занимает на экране 20 пикселей, но типографская позиция должна сдвинуться на 24 пикселя. Вам придется добавить 4 пикселя к последующему пробелу, фактически удвоив его размер. Это будет смотреться на экране довольно странно. Еще хуже будет, если глиф «i» реально занимает 2.6 пикселя, и хинтер решит растянуть его до 3 пикселей. В этом случае вы займете 30 пикселей на экране, хотя типографская позиция должна была сместиться на 26 пикселей. В этом случае, вы получите ошибку в -4 пикселя, и компенсация этой ошибки полностью съест последующий пробел.

Другая попытка могла бы заключаться в том, чтобы позиционировать глифы «i», округляя их типографские позиции. В результате применения такого подхода мы получили бы следующие координаты по оси x (в случае с шириной глифа в 2.4 пикселя):

X = 0 ----> 0 ошибка = 0 ширина = 2 x = 2.4 --> 2 ошибка = -0.4 ширина = 3 x = 4.8 --> 5 ошибка = +0.2 ширина = 2 x = 7.2 --> 7 ошибка = -0.2 ширина = 3 x = 9.6 --> 10 ошибка = +0.4 ширина = 2
Результат будет ужасен:

.*.*..*.*..* ............ .*.*..*.*..* .*.*..*.*..* .*.*..*.*..* .*.*..*.*..*
Вы поняли идею… Интервалы между глифами «i» становятся переменными.

Да, становятся. Именно это и происходит в Microsoft Word.

Таким образом, Microsoft не допускает субпиксельное позиционирование, а Adobe допускает. Это значит, что одни и те же глифы на разных позициях могут давать разное фактическое отображение на экране. Это чётко заметно в слове «institutions», помеченном красным прямоугольником в примерах выше.

Взгляните на Adobe"овские глифы «i», «n», «s», «t». Есть как минимум две разные версии их отображения в разных позициях. Именно поэтому текст у Adobe смотрится более равномерным, но при этом более размытым.

Теперь, если вы наберете то же самое слово «institutions» в WordPad, результат будет другим (и будет смотреться куда лучше). Так почему же он так плохо выглядит в MS Word? Только из-за визуальной неточности в позиционировании. Функция TextOut(), которая, по-видимому, используется в WordPad, не заботится об этом, но MS Word вынужден (чтобы сохранять корректность разметки при масштабировании, прим. перев. ). Я не уверен на все сто, но могу предположить, что разработчики MS Word расчитывают смещение глифов на высоких разрешениях с нехинтованными глифами. Есть только один способ сделать это, используя документированный Win32 API - вызвать GetGlyphOutline() с очень сильно увеличенной аффинной матрицей таким образом, чтобы получившийся глиф умещался в прямоугольник 1024x1024 или около того. Непосредственное использование этого приема дает точно такой же результат, как и TextOut(). Он смотрится хорошо, но накапливает ощутимую ошибку на протяжении строки текста (больше, чем размер одного символа на протяжении только одного слова!).

В случае же с диалоговыми окнами, как мне кажется, они решили допустимым не сохранять точную ширину текста. Почему? Потому что иначе подписи, меню, диалоговые окна и тому подобное не выглядели бы так заманчиво. Была бы та же самая проблема со случайно разбросанным кернингом, что явно навредило бы продажам их ПО. Итак, симпатичный и чёткий текст в диалоговых окнах способствует бизнесу, но накапливает значительную неточность в ширине текста, что приводит к невозможности изменения размера диалоговых окон, а это, в свою очередь, вынуждает производителей выпускать мониторы с 96 DPI - в результате мы имеем порочный круг, который в конце концов превратился в большую профанацию.

С чисто инженерной точки зрения должен быть разумный компромисс между чёткостью текста и функциональностью. Проблема в том, что Microsoft сконцентрировалась на гламурном оформлении, при этом полностью игнорируя функциональную часть. Парадокс: на разрешении в 300 DPI вам вообще не нужен хинтинг, к тому же, текст становится свободно масштабируемым (а при разрешении 600 DPI и выше вам даже не нужно сглаживание), но вы не можете использовать ваше ПО на 300 DPI, потому что оно рассчитано в лучшем случае на 100 DPI! Вот цена, которую весь мир платит за гламурное оформление. Эта цена слишком высока, просто невероятно высока.

Несмотря на это, ещё 5 (пять!) лет назад было технически возможно иметь свободно масштабируемые формы и диалоговые окна. Все, что нам было нужно - допустить определенную степень размытия, очень незначительную, не настолько высокую, как в Mac OS X. Скорее, как в продукции Adobe. Пользователи Windows не любят Safari за слишком размытый вывод. Я частично согласен с ними, за исключением слепого отрицания любых других способов растеризации, кроме использующегося в Windows. Это просто безрассудный фанатизм. Это всё равно, что сказать «мне плевать на разрешение, пусть Windows выглядит так, как я привык, даже ценой в 96 DPI навсегда, даже если для этого потребуется остановить технический прогресс». Можно ли считать такой взгляд разумным?

Я не агитирую в пользу Apple, так как от растеризации Apple я тоже не в восторге. На мой взгляд, она действительно выглядит черезмерно размытой. Похоже, они используют что-то вроде алгоритма автохинтинга, который размывает горизонтальные штрихи, но по сути не дает никаких преимуществ. Фактически, их хинтинг тоже выглядит кривым, особенно для шрифтов без засечек, как будто бы они специально сдвинули чёткий текст на 0,2..0,5 пикселя. Именно поэтому пользователи Windows так не любят Safari. Но при этом многие из них с удовольствием используют Adobe Acrobat Reader и остаются довольны. Всё потому, что в нём текст выглядит приемлимо (не идеально, но приемлимо для фанатов Windows). При этом он остается свободно масштабируемым! Попробуйте просто загрузить любой документ и плавно увеличивать-уменьшать его. Разметка текста остается корректной, и при этом кернинг тоже. Так что я бы назвал способ рендеринга Adobe наилучшим, потому что их компромисс выглядит очень близко к оптимальному.

Субпиксельное позиционирование с помощью ClearType: возможно ли?

Джеф Этвуд однозначно высказывается в пользу строгой привязки к пиксельной сетке. У меня свое мнение. Я согласен считаться с пиксельной сеткой, но только по оси Y. По X предпочтительнее использовать субпиксельное позиционирование. При этом мы жертвуем резкостью (но совсем незначительно), зато обретаем полную свободу.

Ирония в том, что у Microsoft уже есть субпиксельное позиционирование в хинтинге глифов. Самое смешное: это чётко видно на страницах Джефа с тем шрифтом, который он использует.

Посмотрите внимательно: слово «common», выделенное красным, а также буква «m».

Видите, три вертикальных штриха «m» отличаются друг от друга! Несмотря на это, в оригинальном тексте они смотрятся вполне чётко и привлекательно. Что это значит? Многое. Это значит, что с ClearType возможно использовать позиционирование с точностью до 1/3 пикселя. В таком случае, зачем они прикрепляют глифы к пикселям?! Этого я не понимаю. Точности в 1/3 пикселя было бы достаточно для точного кернинга и одновременно чёткого текста! Хорошо, если я вас ещё не убедил, продемонстрирую в деталях. Я взял скриншот строки текста из Microsoft Word. Он выглядел так:

Затем, с помощью несложных программных манипуляций я преобразовал цвета к битовой карте, допускающей три значения каждого цвета:

А затем я произвел «альфа-смешивание» этой карты в модели цветов RGB, воспринимая каждый цветовой канал как отдельный серый пиксель. Я проделал это 12 раз со смещением в 1 серый пиксель, получая смещение на 1/3 пикселя в RGB. Посмотрите, что получилось:

Но это же и есть субпиксельное позиционирование! Вы можете легко убедиться в этом: за 12 линий накопились 4 лишних пикселя, при этом чёткость символов не пострадала. Хорошо, строки слегка отличаются, но вам придется очень близко рассматривать их, чтобы это заметить (замечу, у меня зрение - единица, и я не ношу очки). Поверьте мне, это очень низкая цена за свободу точного субпиксельного позиционирования! Так что это работает. Это вполне возможно. Почему вы не используете субпиксельное позиционирование, дорогая Microsoft, ответьте! Ответа нет.

Кстати, а есть ли субпиксельное позиционирование в Windows Vista? Похоже что нет. Во всяком случае, я не смог найти ни одного примера, где один и тот же глиф растеризовался бы в различные наборы пикселей в разных позициях. Вы видите, они слегка увеличили размер шрифта по умолчанию (для 96 DPI), но, что более заметно, они увеличили межсимвольные интервалы таким образом, чтобы некорректное позиционирование меньше бросалось в глаза. Это хорошо, но как насчет более аккуратных форм символов? Вынужден признать: ситуация с цифровой типографикой не слишком улучшилась после выхода Vista. И вряд ли мы можем расчитывать, что в ближайшее время она изменится.

Ещё один большой вопрос заключается в названии «Microsoft ClearType Font Collection». Почему они называют её коллекцией шрифтов ClearType? Эта технология жёстко привязана к конкретным шрифтам? Тогда, опять же, эта технология производит впечатление очень узкоспециализированного локального решения, таким образом, она не может быть успешно применена к абсолютно любому шрифту. Ниже я продемонстрирую, как с применением автохинтера FreeType можно получить честный, универсальный и независимый от шрифта способ растеризации. Всё, что вам нужно, это векторные кривые глифов. Больше ничего.

Способ, которым FontFocus выполняет выравнивание по сетке пикселей

Джеф, среди всего прочего, ссылается на документацию к FontFocus . При всем уважении, я вынужден не согласиться с ней.

Они выравнивают штрихи по пикселям, игнорируя при этом вертикальный хинтинг. Вы видите, символы «T», «W», «C» и «g» сильно размыты. Кроме того, «W» выглядит тяжелее остальных.

На мой взгляд, это выглядит довольно небрежно. Подразумевается, что это Times New Roman. Похоже? Нет, больше похоже на примитивный растровый шрифт. Так в чем же смысл? Не проще ли один раз сохранить шрифт как растровый и использовать на низких разрешениях его? Какой смысл в сглаживании, если мы можем себе позволить искажать форму знаков? Кроме того, похоже что в тексте есть «пятна», будто бы он написан чернилами на мягкой салфетке: большая часть штрихов правильные, но кое-где они смазаны. В любом случае, проблема та же: либо вы отказываетесь от корректной разметки, либо получаете кривой кернинг.

Здесь я хочу снова упомянуть Safari. Не могу сказать с полной уверенностью, но, похоже, Mac OS тоже не использует субпиксельный кернинг, что в итоге приводит к проблемам, о которых я писал выше, критикуя подход Microsoft. Способ Safari гораздо ближе к получению корректной разметки с сохранением правильного позиционирования знаков, но выглядит это так, будто они тоже жестко привязывают символы к пикселям, и не важно, насколько размытым получается результат. Так в чем же их политика? Специально использовать растеризацию, которая (на низких разрешениях - прим. перев. ) дает весьма размытый текст, только для того, чтобы люди покупали экраны с более высоким разрешением? Нечестная игра!

Ниже вы увидите, как добиться приятного и корректного отображения текста, и, что самое интересное, в результате весьма простых манипуляций. Я использовал библиотеку FreeType и функцию GetGlyphOutline() из Win32 API. Другими словами, такая схема растеризации возможна как в Windows, так и в Linux, ну и, конечно же, в Mac OS, в которой FreeType тоже прекрасно компилируется. Кроме того, я выяснил, что автохинтер FreeType работает вполне корректно, если использовать его так, как я это делал (в обычных условиях результат его работы нельзя назвать приемлимым). Но для начала я расскажу о ситуации в мире Linux. Добавить метки

Во второй части статьи, посвященной форматированию шрифтов, речь пойдет о настройке межзнакового интервала по вертикали — относительно горизонтальной линии, и по горизонтали — установки размера пустого пространства до следующего знака, а также о соотношении ширины знаков к их высоте. Кроме того, в статье затронуты вопросы настройки заливки шрифта цветом и градиентом, выбора режима расстановки строчных и прописных знаков или изменения регистра.

Смещение текста по вертикали

При написании стихов, подобно стилю некоторых отечественных метров поэзии, необходимо задать смещение текста по вертикали. В стихах, подобным образом создается смещение слов в виде «лесенки», чтобы подчеркнуть настроение и стилистику стихотворения. При написании книг для детей, можно задать смещение букв относительно друг друга, что повышает процент запоминания слов детьми, за счет их неповторимого вида. Другими словами, используя смещение по вертикали, можно создать практически любой «текстовый тетрис», а в роли «блоков» использовать абзацы, предложения, отдельные фразы или слова и даже буквы.

Чтобы задать смещение, сделайте следующее:

1. Откройте окно «Шрифт» любым доступным способом;
2. На вкладке «Дополнительно» в графе «Смещение» выберите направление смещения текста (вверх или вниз) и при помощи регуляторов задайте значение шага. По умолчанию используется значение в 3 пункта. Для равномерного смещения задавайте значения с одинаковой величиной шага. То есть, если первое значение равно 5 пт, то второе – 10 пт, третье – 15 пт и т.д. Впрочем, вы можете располагать текст в любой конфигурации, используя смещение слов или предложений в разных направлениях, при этом, в этих же предложениях могут присутствовать слова, буквы в которых тоже заданы со смещением. В данном случае ограничений только два – смещение возможно только по вертикали и зависит от уровня вашей фантазии.

Рисунок 1. Смещение текста по вертикали

Большие значения смещения

Если вам нужно задать относительно большие значения смещения (20, 30 или 50 пт), удобнее сначала задать направление смещения, а затем уже ввести число в графу «На», нежели сразу же (многократно) щелкать по регуляторам смещения. Также не беспокойтесь о введении значения единицы измерения, если вы задаете значение в пунктах (пт), так как оно используется по умолчанию. Поэтому вам достаточно ввести нужное число, а программа автоматически выполнит смещение в пунктах. Если же вы используете для этого другие единицы измерения, тогда обязательно указывайте их значение после числа (мм, см).

Еще быстрее ввести большие значения смещения можно следующим образом:

1. Щелкните один раз по регулятору смещения вверх или вниз, в зависимости от нужного направления смещения;
2. В графе «На» выделите имеющийся текст (после одного щелчка это будет – «1 пт») и введите нужное число;
3. Нажмите «ОК».

Смещение букв по вертикали

Для того чтобы задать смещение для отдельных букв, последовательно выделяйте буквы слова и задавайте им нужные значение, способом, описанным выше.

Рисунок 2. Смещение букв по вертикали

Растягивание и сжатие текста по горизонтали

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

Чтобы сжать или растянуть текст по горизонтали, сделайте следующее:

1. Выделите нужный участок текста;
2. Откройте окно «Шрифт» и перейдите на вкладку «Дополнительно»;
3. В графе «Интервал» выберите:

• «Разреженный» — чтобы «растянуть» текст;
• «Уплотненный» — чтобы «сжать» текст;
• «Обычный» — чтобы убрать предварительно заданный межзнаковый интервал;

4. В поле «На» напротив графы «Интервал» задайте нужное значение;
5. Нажмите «ОК».

Рисунок 3. Растягивание и сжатие текста по горизонтали

Масштаб шрифта

Обычное соотношение высоты к ширине знаков составляет 100%, это значение по умолчанию. Но когда нужно сделать текст визуально выше или шире, используя определенный шрифт, можно изменить это значение. Например, необходимо задать тексту некоторый налет «готики» вытянув его по высоте, при этом используя привычный Time New Roman, или привлечь внимание к цитате или фразе, «расширив» его. Для этого, соответственно, нужно увеличить/уменьшить отношение высоты знаков к их ширине. Для достижения этой цели, выполните следующее:

1. Выделите нужный участок текста;
2. Откройте окно «Шрифт», а затем вкладку «Интервал»;
3. В графе «Масштаб» задайте нужное вам значение, выбрав из имеющихся восьми (33%, 50%, 66%, 80%, 90%, 100%, 150% и 200%) или набрав произвольное;
4. Нажмите «ОК»

Рисунок 4. Установка масштаба шрифта

Цвет шрифта

Заливка цветом

Ничто так не украшает и одновременно портит общий вид документа, как применение различных окрасок шрифтов. В зависимости от стилистики документа, насыщенность/бедность разноцветными шрифтами либо украсит документ, придав ему эмоциональности и неповторимости, либо напротив, сделав серьезный документ на вид легкомысленным, а то и попросту вызвав у читателя переутомление чрезмерно разношерстной цветовой гаммой шрифтов. В тоже время, если речь идет о масштабном художественном произведении, наличие шрифтов стандартного цвета только затруднит чтение, и без того объемного произведения.

Чтобы задать цвет шрифта, сделайте следующее:

1. Выделите нужный фрагмент текста;
2. Откройте вкладку «Главная» и в группе «Шрифт» нажмите на кнопке открытия меню кнопки «Цвет текста»;
3. В области «Цвета темы» выберите нужный цвет, если такого нет в палитре, воспользуйтесь возможностями окна «Цвета», щелкнув на «Другие цвета».

Заливка градиентом

В Word 2010 доступна еще одна возможность заливки текста – градиентная. Она позволяет задать плавные цветовые переходы для шрифта, причем эффект напрямую зависит от выбранного образца заливки и предварительно заданного цвета, а чем крупнее текст, тем заметнее эффект.

Чтобы применить градиентную заливку, сделайте следующее:

1 способ:

1. Выделите нужный участок текста (если необходимо, предварительно задайте ему цвет);
2. Нажмите на кнопке открытия меню кнопки «Цвет текста» и выберите вкладку «Градиентная»;
3. Во всплывающем окне выберите один из 13 образцов заливки.

Рисунок 5. Заливка цветом и градиентом

2 способ:

1. Выделите нужный участок текста и подведите курсор к кнопке «Цвет текста» на всплывающей панели;
2. Нажмите кнопку открытия меню выбора цвета шрифта;
3. Выберите нужный вам цвет текста и его заливки описанным выше способом.

Рисунок 6. Заливка цветом и градиентом при помощи всплывающего меню

3 способ:

1. Выделите нужный фрагмент текста и откройте окно «Шрифт»;
2. В графе «Цвет текста», нажмите кнопку открытия окна выбора цвета шрифта;
3. Выберите нужный цвет из представленных образцов.

Рисунок 7. Заливка цветом из окна "Шрифт"

Чтобы задать заливку градиентом из окна «Шрифт», сделайте следующее:

1. Выделите нужный участок текста;
2. Любым из известных способов задайте ему нужный цвет;
3. Откройте окно «Шрифт» и нажмите на кнопке «Анимация»;
4. В открывшемся окне «Параметры анимации» откройте вкладку «Заливка текста» и щелкните на пункте «Градиентная».
5. Задайте нужный градиент и щелкните «ОК».

Рисунок 8. Заливка градиентом из окна "Шрифт"

Верхний и нижний индекс

В документах содержащих большое количество математических, химических или физических формул нужно использовать верхний и нижний индексы, поскольку они позволяют визуально точно отобразить смысл формулы. Также индексы можно использовать как пояснительные подписи к словам, поясняющие смысл пустой подчеркнутой строки для заполнения, например: должность, место работы, дата. Чтобы задать индекс, сделайте следующее:

1 способ:

1. Выделите нужный фрагмент текста;
2. Откройте вкладку «Главная», в группе «Шрифт» нажмите на кнопке «Подстрочный знак» — чтобы задать нижний индекс, или на кнопке «Надстрочный знак», чтобы задать верхний индекс.

2 способ:

1. Выделите нужный фрагмент текста;
2. Используйте следующие комбинации клавиш для задания индекса:

• — нижнего;
• — верхнего.

Рисунок 9. Верхний и нижний индексы

Часто нам приходиться сталкиваться с проблемой, набранного в разном регистре, текста, когда первая буква слова строчная, а вторая прописная, или когда мы забыли отключить , и все предложение было набрано прописными. Для того чтобы это исправить, вовсе не обязательно удалять «неправильно» набранный текст, а затем заново его набирать, надо всего лишь сделать несколько щелчков мышью. Чтобы задать правильный регистр текста, сделайте следующее:

1 способ:

1. Выделите нужный фрагмент текста;
2. Откройте вкладку «Главная» и в группе «Шрифт» нажмите на кнопке «Регистр»;
3. В открывшемся окне выберите нужный способ задания регистра:

• «Как в предложениях» — первое слово предложения (или выделенного участка текста) начинается с прописных, остальные строчные, вплоть до начала следующего предложения;
• «Все строчные» — все знаки (буквы, символы) выделенного фрагмента текста будут строчными;
• «Все прописные» — все знаки выделенного участка текста будут прописными;
• «Начинать с прописных» — каждое слово начинается с прописных. Это подобно стилистике торжественной речи, когда каждое слово начинается с заглавной буквы;
• «Изменить регистр» — напротив, слово начинается со строчной. Чаще всего служит для оригинального выделения текста.

2 способ:

1. Выделите нужный участок текста;
2. Нажмите и удерживайте клавишу ;
3. Нажимайте клавишу до тех пор, пока фрагмент текста не примет нужный вид (каждое нажатие задает следующий режим расстановки прописных и строчных букв);
4. Отпустите клавишу .

Рисунок 10. Установка режима расстановки регистра

Заключение

Работа со шрифтом является одним из основных умений, которые необходимы для эффективной работы с текстовыми редакторами, и Word 2010 не является исключением. Если вы хотите быстро и эффективно создавать и редактировать документы, вам обязательно нужно знать все главные возможности работы со шрифтами. В этой части статьи, посвященной форматированию шрифтов, были рассмотрены не столь известные приемы настройки шрифтов, как в первой части, но не менее полезные. Так, уметь задать набор текста в режиме подстрочного и надстрочного знаков, будет просто необходимо учителям, школьникам и студентам, занимающимся химией, физикой, математикой и другими схожими дисциплинами. Знать, как осуществить смещение текста по вертикали, как его растянуть или сжать, как задать масштаб букв, а также как применить цветовую и градиентную заливку шрифта, будет полезно людям занимающимся написанием книг исторического характера и работающим в области полиграфии. Также это чрезвычайно полезно знать учителям младших классов, которые самостоятельно готовят различный учебно-методический материал – ведь красочно и оригинально оформленный текст, намного легче усваивается детьми, позволяя им легче и быстрее осваивать школьную программу. Ну а знать как «на лету» изменить регистр текста, не прибегая ни к его предварительному форматированию, ни к удалению, с последующим набором «с нуля», нужно буквально каждому, поскольку, как и случайное нажатие , так и обычный пропуск из-за спешки заглавных букв в предложении, случаются почти с каждым из нас.

Здравствуйте, уважаемые читатели блога сайт. Сегодня мы продолжаем изучать и у нас на очереди свойства text-decoration, vertical-align, text-align, text-indent и ряд других, которые помогают оформлять внешний вид текстов в Html коде.

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

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

Text-decoration, text-align, text-indent в CSS

Как же в Css работать с текстом? Вполне логично будет предположить, что для этой цели существуют специально предназначенные правила. Давайте начнем с text-align, которое является фактически заменой атрибута align (он использовался для выравнивания содержимого, например, абзацев P или заголовков).

Он имеет всего четыре возможных значения:

Смысл остается таким же, как и был раньше. Text align — это горизонтальное выравнивание строк. Применяется это правило исключительно только для блочных элементов (параграфы, заголовки и т.п.), т.е. тех тегах, в которых может появиться несколько строк. Т.к. в строчных элементах строк может быть только одна, то и смысла использования в них text-align особого нет.

Понятно, что значения этого правила означают выравнивание, соответственно: по левому краю (left), по правому краю (right), по центру (center) и по ширине страницы (Justify — одновременно по левому и правому краю за счет увеличения расстояния между словами). Само собой, что значение Justify стоит использовать для элементов хотя бы с несколькими строками текста, иначе видимого эффекта от этого не будет.

Для примера, я выровнял предыдущий абзац по ширине (видите у него ровные границы и слева, и справа), используя:

Text-align:justify;

По умолчанию горизонтальное выравнивание текста осуществляется по левому краю, т.е. специально писать text-align:left не нужно, если, конечно же, раньше вы не задавали другое выравнивание. Этот абзац я, кстати, выровнял по центру (center) опять же для наглядного примера, но тут, я думаю, все и так понятно.

Следующее Css правило text-indent позволяет задать красную строку, например, для текста в теге абзаца P. Отступ красной строки можно задать с помощью указания величины (как со знаком плюс, так и со знаком минус, используя ) или с помощью процентов:

От чего считаются проценты в text-indent? От ширины области, которая отведена под текст. Т.е. Css правило text-indent:50% задаст красную строку равную половине длины этой самой строки. Ну, а этот абзац как раз и служит примером такого правила.

А можно, например, задать отрицательное значение красной строки в text-indent и тогда мы получим примерно то, что вы видите в этом абзаце. Для достижения данного результата я написал для тега абзаца P вот такое вот CSS правило:

Text-indent:-1em;

Ну, а обычное использование text-indent (для задания стандартной красной строки) может выглядеть так: text-indent:40px; (кстати, применено к этому параграфу). Это правило, так же как и рассмотренное раньше text-align, применяется только для блочных элементов , т.е. там, где может появиться несколько строк (абзацы, заголовки и т.п.).

Так, теперь давайте перейдем к text-decoration (оформление с помощью горизонтальной линии), которое применяется уже ко всем Html элементам (и строчным, и блочным).

Оно может иметь всего четыре значения:

Т.е. можно использовать с помощью text-decoration: надчеркивание (overline), перечеркивание (line-through) или подчеркивание (underline), ну, или вообще ничего не использовать (none). Некоторые Html элементы уже имеют по умолчанию оформление горизонтальной линией, например, (они по умолчанию подчеркиваются).

Поэтому выделять что-то еще подчеркиванием (кроме гиперссылок) не есть хорошо, ибо у пользователей в подсознании записано, что раз подчеркнуто (а еще и цветом выделено) — значит по этому можно кликнуть для перехода. Но выделяя подчеркиванием обычный текст, вы вводите пользователя в заблуждение и последующее за ним разочарование вашим ресурсом (он то думал, а оказалось что...).

Нюансом в использовании Css правила text-decoration является то, что можно будет прописать сразу три (иди два) значения для любого Html элемента (опуская none) и в результате вы получите надчеркнуто-подчеркнуто-перечеркнутый фрагмент текста (прикольно звучит и смотрится, не правда ли?):

Text-decoration:underline overline line-through;

Значения для text decoration (если вы хотите использовать сразу несколько из них) нужно писать через символ пробел .

Vertical-align — вертикальное выравнивание

Дальше у нас идет вертикальное выравнивание — vertical-align. Практически для всех элементов в Html коде оно означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Правда, для это означает немного другое — выравниваться по вертикали будет весь контент, который находится в этих ячейках.

Для Css правила vertical-align можно использовать следующие значения:

Строки по умолчанию выравниваются по базовой линии. Вот смотрите, я применил к этому фрагменту текста увеличение шрифта и эти два фрагмента выровнялись по базовой (нижней) линии. А вертикальное выравнивание с помощью vertical-align как раз и предназначено именно для изменения способа выравнивания строк.

Например, если я для того же увеличенного фрагмента текста пропишу vertical-align:baseline, то никаких изменений не произойдет, т.к. значение baseline используется для этого Css правила по умолчанию.

Кстати, в качестве значений для него можно использовать и числа, а надпись vertical-align:0 будет означать тоже самое, что и vertical-align:baseline, т.е. значение baseline эквивалентно нулю. Следовательно, если мы хотим указать какой-либо сдвиг в вертикальном выравнивании, то этот сдвиг будем указывать относительно базовой линии (или же нуля).

Можно написать так:

Vertical-align:10px;

И получим сдвиг фрагмента с увеличенным шрифтом вверх на 10 пикселей относительно базовой линии. Если напишем отрицательное значение:

Vertical-align:-10px;

То получим сдвиг фрагмента вниз относительно базовой линии. Из примеров видно, что из-за сдвига увеличилась высота строки, чтобы текст помещался в ней без наезда на соседнюю строку. Сдвиг можно также задавать в Em и Ex, ну, и в процентах, которые будут считаться от высоты линии этого элемента (помните в прошлой статье мы научились ее задавать с помощью ).

Для вертикального выравнивания содержимого ячеек таблиц в vertical-align следует использовать значения Top и Bottom для получения, соответственно, выравнивания содержимого по верхней и нижней границе ячейки (ну, а middle в ячейке таблицы используется как значение вертикального выравнивания по умолчанию).

А для шрифтовых элементов можно использовать text-top, text-bottom, middle. Давайте для примера применим к этому фрагменту текста значение:

Vertical-align:middle;

Что получилось в результате? По базовой линии обычного текста выровнялась средняя линия увеличенного фрагмента, т.е. мы получили вертикальное выравнивание по средней линии. Для text-top и text-bottom будет все аналогично. Вот так text-top , а так text-bottom .

Значения Css свойства vertical-align sub и super соответствуют под- и надиндексу, которые имели место быть в чистом Html (до использования CSS свойств для визуального оформления).

Text-transform, letter-spacing, word-spacing и white-space

None используется по умолчанию и означает, что символы в тексте изменяться никак не будут — как написано в Html, так и будут отображаться. Значение Uppercase для text-transform позволит трансформировать все буквы фрагмента в заглавные (пример показан в этом предложении , где использовалось правило text-transform:uppercase, а изначально буквы были написаны строчные).

Значение lowercase для Css правила text-transform позволит вам трансформировать все символы фрагмента в строчные, ну, а значение capitalize сделает все первые буквы слова заглавными (пример в этом предложении — text-transform:capitalize). Т.е. с помощью text-transform можно сделать все что угодно с обычным текстом, а потом запросто все вернуть обратно.

Поэтому, если у вас, например, стоит задача сделать все заголовки написанными только заглавными буквами, то в Html пишите их обычно, а заглавными их сделаете уже в CSS через text-transform:uppercase. Потом, если вы решите что-то поменять назад, то достаточно внести только маленькое изменение в стили, а не в содержимое всех 100500 заголовков на вашем сайте.

По умолчанию и letter-spacing, и word-spacing имеют значение Normal, ну или это тоже самое, что ноль (т.е. расстояние между символами и словами никак не изменяется). Величину же изменения расстояния в этих правилах можно будет указывать только в пикселах, либо Em или Ex, но никак не в процентах.

Однако, можно использовать как положительные (разрежение символов или слов), так и отрицательные значения (сближение символов или слов). Например, можно «вот так разредить символы в этой фразе» с помощью следующего Css правила:

Letter-spacing:0.4em;

Или же можно «вот так сблизить символы в этой фразе» с помощью:

Letter-spacing:-1px;

Тоже самое можно сказать и про word-spacing с одной лишь только разницей, что при этом расстояние будет изменяться уже между словами, как, например, в этой фразе, при помощи вот такой вот CSS конструкции :

Word-spacing:4em;

Аналогично можно использовать в word-spacing отрицательные значения для уменьшения расстояния между словами.

Ну, и последнее на сегодня Css правило, которое позволяет определенным образом оформлять текст в Html коде — это white-space . Отвечает оно за отображение пробельных символов на веб странице, которые имели место быть при написании Html кода.

Как вы помните из статьи про , браузер при разборе кода объединяет все пробелы, символы переноса строк и табуляции в один единственный пробел, и осуществляет перенос строк на веб странице именно по пробельным символам, которые имели место быть в коде.

Так вот, white space может принимать одно из трех значений:

Понятно, что по умолчанию используется значение Normal и в этом случае все отображается так, как я описал чуть выше. А вот при использовании значения Pre мы получим полную аналогию с использованием , т.е. на вебстранице текст будет отображен со всеми теми лишними пробельными символами, которые имели место быть при написании кода и переносы браузер уже по ним сделать не сможет.

Ну, а значение nowrap просто запретит браузеру переносить по тем пробельным символам, которые он найдет внутри фрагмента с CSS правилом white-space:nowrap. Попробовать, как все это работает, вы сможете и сами, создав простенький Html файлик и заключив любой фрагмент текста в подобные теги:

Удачи вам! До скорых встреч на страницах блога сайт

посмотреть еще ролики можно перейдя на

");">

Вам может быть интересно

List style (type, image, position) - Css правила для настройки внешнего вида списков в Html коде
Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши
Padding, Margin и Border - задаем в CSS внутренние и внешние отступы, а так же рамкидля все сторон (top, bottom, left, right)
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
Float и clear в CSS - инструменты блочной верстки
CSS - что это такое, как таблицы каскадных стилей подключаются к Html коду с помощью Style и Link

Окно диалога Шрифт содержит еще одну вкладку Интервал, с помощью которой можно установить межсимвольные интервалы и смещение относительно базовой линии вверх или вниз. На рис. 15 представлена вкладка Интервал , назначение опций которой приведено ниже

Рис. 15. Вкладка Интервал окна диалога Шрифт .

Используя вкладку Интервал , можно изменить расстояние между символами, а также вертикальное положение слов.

Опция	Назначение
Масштаб	Содержит список предопределенных масштабов, с помощью которого позволяет установить масштаб выделенного фрагмента текста
Интервал
Обычный	Расстояние между символами, используемое по умолчанию в обычном тексте
Разреженный	Увеличивает расстояние между символами
Уплотненный	Уменьшает расстояние между символами
Смещение
Нет	Отсутствует смещение символов относительно базовой линии
Вверх	Символы приподняты над базовой линией
Вниз	Символы опущены ниже базовой линии
Кернинг для символов размером	При установленном флажке расстояние между некоторыми символами в словах увеличивается, что делает слова более читабельными. Используется только со шрифтами TrueType и Adobe Type Manager больше установленного размера
Пунктов и более	Задает минимальный размер шрифта для кернинга

Изменение регистра букв

MS Word дает возможность быстро изменять регистр букв в тексте без повторного ввода. Для этих целей используется команда Формат –> Регистр. Для изменения регистра букв в тексте достаточно выделить фрагмент текста и выбрать в окне диалога Регистр нужную опцию. Тот же результат можно получить, используя клавишные команды.

Рис. 16. Окно диалога Регистр

Комбинация клавиш Shift+F3 осуществляет циклическое переключение начертания символов выделенного фрагмента:

 Первая буква каждого слова прописная, остальные – строчные.

 Все буквы прописные.

 Все буквы строчные.

Вставка символов

Среди шрифтов TrueType есть специальные, содержащие различные знаки и символы, отсутствующие на клавиатуре. К их числу относятся Symbol и Wingdings.

Для вставки символа необходимо выполнить следующие действия:

1. Установить курсор в то место, где нужно вставить символ.

2. Выбрать команду Вставка –>Символ. Откроется окно диалога Символ, представленное на рис. 17.

3. Из раскрывающегося списка Шрифт выбрать шрифт Wingdings.

4. Чтобы увидеть в окне диалога увеличенное изображение символа, необходимо щелкнуть по нему мышью.

5. Чтобы вставить символ в документ надо дважды щелкнуть по нему мышью или нажать кнопку Вставить.6. Нажать кнопку

Рис.17. Окно диалога Символ

Вставленный символ будет иметь тот же размер шрифта, что и предшествующий символ, но его можно увеличить до нужного размера.

Копирование форматов символов

Довольно часто приходится устанавливать одни и те же параметры форматирования в документе многократно. Занятие скучное и бессмысленное. MS Word представляет в наше распоряжение средства копирования формата. Таким образом, один раз отформатировав фрагмент текста, можно копировать установленный формат для других фрагментов.

Для копирования формата необходимо выполнить следующие действия:

1. Выделить символы или фрагмент текста, имеющие формат, который надо скопировать.

2. Нажать кнопку Формат по образцу на стандартной панели инструментов один раз, если копируется формат для одного фрагмента, или дважды, если выбранный формат копируется сразу для нескольких фрагментов. Курсор мыши примет вид кисти.

3. Выделить фрагмент текста, для которого копируется формат. После чего, он примет скопированный формат. Если необходимо скопировать формат в несколько фрагментов, отпустить кнопку мыши, а затем выделить следующий фрагмент. Курсор будет по-прежнему иметь вид кисти до тех пор, пока не нажать клавишу Esc.

Можно скопировать любой формат, установленный с помощью команды Формат –> Шрифт , контекстного меню, панели инструментов Форматирование или клавишных команд.

Копируемые параметры определяются выделенными символами:

 Если выделение включает символ абзаца, то копируется стиль абзаца и все параметры формата абзаца, стиль символов и параметры формата символов.

 Если выделение не включает символ абзаца, то копируется стиль символов и параметры формата символов.

 Если выделение включает только маркер абзаца, то копируется стиль абзаца и параметры формата данного абзаца.

Форматирование символов влияет на их форму и размер. С помощью такого фор­матирования можно придать тексту привлекательность и выделить самые важные фраг­менты.

Размер шрифта - кегль - определяется в пунктах (пт), от 4 до127 пт. 1пт = 1/72 дюйма = 0,353 мм. Размер шрифта касается только общей высоты символов - ширину шрифта измерять не принято.

Форматирование символов можно осуществить тремя способами.

1. Форматирование с помощью значков ленты

Для форматирования символов необходимо выделить фрагмент текста.

Для установки стиля текста (Заголовок, обычный или другой), открыть вкладку Главная – группу Стили и выбрать нужный стиль;

Примечание: Текст стиля Заголовок автоматически выносится в создаваемое позже оглавление документа.

Кнопки форматирования шрифта расположены на вкладке Главная – группа Шрифт

Для смены шрифта нажать кнопку правее списка шрифтов и выбрать в раскрывшемся списке нужный шрифт;

Для изменения размера шрифта нажать кнопку правее списка размеров шрифтаи выбрать в раскрывшемся списке нужный размер;

Для изменения начертания шрифта щелкните по соответствующей кнопке:полужирный, курсив, подчеркнутый.

Кроме того, можно установить различного рода эффекты в начертании символов: зачеркнутый, надстрочный и подстрочный символы, а также эффекты анима­цииицвет выделения текста, и цвет текста.

1. Форматирование шрифта с помощью диалогового окна Шрифт

Диалоговое окно открывается кнопкой вгруппе Шрифт вкладки Главная. В поле Образец демонстрируется результат производимых действий.

1. Форматирование шрифта с помощью контекстного меню

Команды контекстного меню вызываются щелчком правой кнопки мыши на выде­ленном фрагменте текста

Задание 7

Проведите форматирование шрифта в соответствии с табли­цей 1: для 1 и 2 абзацев используйте ленту, для 3 – диалоговое окно и для 4 контекстное меню.

В первом абзаце попробуйте введение в текст различных эффек­тов.

Напечатайте формулы X 2 +Y 2 =Z 2 и H 2 SO 4 , с использованием надстрочных и подстрочных символов

Таблица 1

абзаца	Шрифт	Размер шрифта	Цвет шрифта	Начертание символов
	Times New Roman		черный	Курсив
			красный	Полужирный
			синий	Подчеркивание
	Bookman Old Style	16	зеленый	Полужирный курсив

Примечания:

если какого-либо шрифта нет у вас в Word , выберите другой произ­вольно;

1. Эффект разрядки и уплотнения текст. Смещение символов вверх, вниз

Эффект разрядкии уплотнения текста достигается следующим образом:

Смещение символов вверх, вниз

Выполняется там же в диалоговом окне Шрифт, выбрать опцию Смещение: в поле на указать величину смещенияи нажать кнопку ОК;.

Изменение регистра текста

Замена строчных букв прописными и наоборот может производиться путем измене­ния их регистра. Выделите текст, который требуется изменить. На вкладке Главная щелк­ните значок Регистр (рис. 16) и выберите нужную команду.

Рисунок 16. Изменение регистра текста

Можно также использовать «горячие клавиши» SHIFT + F 3 . Выберите нужный спо­соб изменения регистра.

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

Выделите абзац, содержащий текст, который требуется начать с большой заглавной буквы (буквицы). На вкладке Вставка – группа Текст выберите команду Буквица. Выбе­рите параметр В тексте или На поле. Выберите другие необходимые параметры.