Как ужать расстояние между буквами html. Как изменить межбуквенный интервал в Ворде

Интерлиньяж – это вертикальный интервал между строками текст . Он измеряется от базовой линии одной строки текста до базовой линии строки над ней. Базовая линия – это невидимая линия, на которой находится нижний край большинства букв.

Значение по умолчанию для автоинтерлиньяжа равно 120% от гарнитуры шрифта (например, для шрифта в 10 пунктов интерлиньяж равен 12 пунктам). Когда используется автоинтерлиньяж, значение интерлиньяжа отображается в скобках в меню «Интерлиньяж» палитры «Символ». Чтобы изменить значение автоинтерлиньяжа по умолчанию, выберите в меню палитры «Абзац» пункт «Выравнивание» и задайте процентное значение от 0 до 500.

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

Примечание.

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

Смещение базовой линии

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

Настройка кернинга и трекинга

Кернинг - это увеличение·или уменьшение·интервала между определенными парами символов. Трекинг - это увеличение·или уменьшение·интервала между символами в выделенном тексте или во всем блоке текста.

Примечание.

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

Кернинг текста можно выполнять автоматически, используя функции метрического или оптического кернинга. При метрическом кернинге (называемом также автокернингом ) используются пары литер, которые включены в большинство шрифтов. Шрифты содержат применяемые в процессе кернинга сведения об интервале между буквами в конкретных парах. Вот некоторые из этих пар: «LA», «P.», «To», «Tr», «Ta», «Tu», «Te», «Ty», «Wa», «WA», «We», «Wo», «Ya» и «Yo». Метрический кернинг применяется по умолчанию, поэтому к конкретным парам букв кернинг применяется автоматически во время импорта или ввода.

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

A. Исходный текст B. Текст после применения оптического кернинга C. Текст после установки вручную значения кернинга между буквами «W» и «a» D. Текст после применения трекинга E. Совмещение кернинга и трекинга

Можно также воспользоваться и ручным кернингом , который идеально подходит для настройки интервала между двумя буквами. Трекинг и ручной кернинг дополняют друг друга. Можно сначала настроить отдельные пары букв, а затем сделать блоки текста более сжатыми или разреженными. Это не оказывает влияния на относительный кернинг пар букв.

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

Трекинг и кернинг измеряются в 1/1000 эм. Эта единица измерения равна ширине самой широкой буквы шрифта и позволяет задать размер относительно текущей гарнитуры. Для шрифта размером 6 пунктов 1 эм равна 6 пунктам. Для шрифта размером 10 пунктов 1 эм равна 10 пунктам. Кернинг и трекинг строго пропорциональны текущему размеру гарнитуры шрифта.

Примечание.

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

Настройка кернинга

Выполните любое из следующих действий:

Чтобы для выделенных символов использовались сведения о кернинге, встроенные в шрифт, выберите для параметра «Кернинг» в палитре «Символ» значение «Автоматический» или «Метрический».
Чтобы автоматически настроить интервал между выделенными символами с учетом их формы, выберите для параметра «Кернинг» в палитре «Символ» значение «Оптический».
Чтобы настроить кернинг вручную, поместите точку ввода между двумя символами и установите нужное значение параметра «Кернинг» в палитре «Символ». (Примечание. Если выделен фрагмент текста, произвести кернинг текста вручную невозможно. Вместо этого воспользуйтесь автоматическим трекингом.)
Совет . Чтобы уменьшить или увеличить кернинг между двумя символами, используйте комбинацию клавиш «Alt»+«Стрелка влево/вправо» (Windows) или «Option»+«Стрелка влево/вправо» (Mac OS).
Чтобы отключить кернинг для выделенных символов, установите для параметра «Кернинг» в палитре «Символ» значение «0» (ноль).
Дополнительно . Чтобы ознакомиться со списком сочетаний клавиш, используемых при работе с текстом, наберите в строке поиска справки «сочетания клавиш».

Обработка пробелов между буквами и словами

1. Расстояние между словами word-spacing

Устанавливает интервалы между словами. Можно использовать положительные и отрицательные значения. При отрицательном значении слова могут накладываться друг на друга.

На значение word-spacing оказывает влияние значение свойства text-align в случае выравнивания текста по ширине. Наследуется.

Синтаксис

P {word-spacing: normal;} p {word-spacing: 2px;}
Рис. 1. Расстояние между словами

2. Расстояние между буквами letter-spacing

Свойство устанавливает расстояние между буквами (величину трекинга) и символами. Может принимать положительные и отрицательные значения. Целесообразно применять для повышения выразительности и читаемости заголовков, определений и пр. Наследуется.

Синтаксис

P {letter-spacing: normal;} p {letter-spacing: 2px;}
Рис. 2. Изменение расстояния между буквами с помощью свойства letter-spacing

3. Обработка пробелов white-space

Свойство обрабатывает пробелы между словами и переносы строк внутри элемента. Не наследуется.

white-space
Значения:
normal	Значение по умолчанию. Между словами вставляется только по одному пробелу, дополнительные пробелы отбрасываются. Текст переносится только в случае необходимости.
nowrap	Запрещает переносы строк, за исключением применения .
pre	Пробелы в тексте не игнорируются, браузер отображает дополнительные пробелы и переносы строк.
pre-wrap	Сохраняет пробелы в тексте, делая разрывы строк там, где это необходимо.
pre-line	Удаляет лишние пробелы, за исключением случаев .
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

P {white-space: normal;} p {white-space: nowrap;} p {white-space: pre;} p {white-space: pre-wrap;} p {white-space: pre-line;}

4. Настройка табуляции tab-size

Для изменения величины отступа, получаемого с помощью клавиши ТAB, используется свойство tab-size . Значения свойства игнорируются, когда установлено одно из трёх значений pre-line , normal или nowrap свойства white-space .

Работает только для элементов и <pre>Для остальных <a href="/program/blochnye-elementy-blochnye-i-vstroennye-elementy.html">блочных элементов</a> значение всегда будет равно единице. Значения свойства, указанные в единицах длины, поддерживается только в Chrome 42+.</p> <p><b>Синтаксис </b></p><p>Pre {-moz-tab-size: 16;} /* Firefox */ pre {-o-tab-size: 16;} /* Opera 10.6-12.1 */ pre {tab-size: 16;} </p> <p>Работая со стилем для текста, вы можете устанавливать необходимые расстояния между символами, словами и строками. Задаются такие расстояния в любых единицах <a href="/game/edinicy-viewport-protiv-procentov-edinicy-izmereniya-css-pikseli-em.html">измерения CSS</a>, будь-то px , pt , em или другое. Исключением являются проценты – с их помощью можно задать расстояние между строками (интерлиньяж), но они не работают при установке интервала между символами или словами.</p> <h3>Межсимвольный интервал CSS: letter-spacing</h3> <p>Задать межсимвольный интервал можно с помощью <a href="/reviews/svoistvo-css-opacity-upravlenie-prozrachnostyu-kak-zadat-prozrachnost-v-css.html">свойства CSS</a> letter-spacing. Помимо обычных значений (положительных и отрицательных) также можно использовать значения inherit (чтобы наследовать значение у родителя) и normal (если необходимо вернуть нормальное расстояние между символами).</p> <p>Пример записи межсимвольного интервала:</p><p>P { letter-spacing: 2em; } </p><h3>Интервал между словами: word-spacing</h3> <p>Свойство CSS word-spacing отличается от предыдущего тем, что устанавливает расстояние между словами, а не между символами. Для <a href="/life-hacks-for-ios/pragmaticheskie-svoistva-informacii-soobshcheniya-dannye.html">данного свойства</a> тоже предусмотрены значения normal и inherit . Можно задавать отрицательные значения. Ниже показан пример записи стиля:</p><p>P { word-spacing: 6px; } </p><h3>Межстрочный интервал: line-height</h3> <p>С помощью свойства CSS line-height можно задавать расстояние между строками текста. Как было сказано в начале темы, для установки интерлиньяжа, помимо других единиц измерения, допускается использовать проценты. Также разрешено записывать значение в виде множителя (числа больше 0): для вычисления расстояния браузер умножит размер шрифта на <a href="/ios/generator-chisel-po-zadannym-parametram-generator-sluchainyh.html">заданное число</a>. Отрицательные значения не работают. Доступны значения normal и inherit .</p> <p>Ниже – пример, как сделать межстрочный <a href="/life-hacks-in-vk/mezhstrochnoe-rasstoyanie-css-mezhstrochnyi-interval-v-vorde-kak-umenshit-ili.html">интервал CSS</a>:</p><p>P { line-height: 180%; } </p><p>На скриншоте можно увидеть, как выглядит текст со всеми тремя свойствами:</p><p>Скриншот: интервалы в CSS </p><h3>Итоги</h3> <p>Устанавливая интервал между словами, символами или строками, в первую очередь следите за тем, чтобы текст в итоге был легко читаем. С подобными свойствами необходимо обращаться аккуратно и всегда использовать их в меру, без фанатизма, иначе все текстовое содержимое грозит превратиться в неразборчивый набор букв.</p> <li>Книга XVI и XVII вв. </li> <li>Книга XVIII в. </li> <li><span>Книга в России в XVI-XVIII вв. </span></li> <li>Книга XIX и XX вв. <ul><li><span>Книга XIX и XX вв. - страница 2 </span></li> <li><span>Книга XIX и XX вв. - страница 3 </span></li> </ul></li> <li>Советская книга </li> <li>КОМПОЗИЦИЯ <ul><li>Композиция </li> <li><span>Основные <a href="/life-hacks-for-ios/operacionnye-usiliteli-v-lineinyh-shemah-operacionnyi.html">линейные схемы</a> композиции и их зрительное воздействие </span> <ul><li><span>Основные линейные схемы композиции и их зрительное воздействие - страница 2 </span></li> </ul></li> <li><span>Тональная композиция </span></li> <li><span>Физиологические факторы в графической композиции </span></li> <li><a href="/instructions/peredelka-akusticheskih-kolonok-na-aktivnye-uluchshenie-zvuchaniya.html">Золотое сечение</a> <ul><li><span>Золотое сечение - страница 2 </span></li> </ul></li> <li><span>Формат полосы и ее установка на странице </span> <ul><li><span>Формат полосы и ее установка на странице - страница 2 </span></li> <li><span>Формат полосы и ее установка на странице - страница 3 </span></li> </ul></li> <li><span>Композиция внутри полосы </span> <ul><li><span>Графические конструкции текста </span></li> <li><span>Акцентировка текста </span></li> <li><span>Начальная и концевая полосы </span></li> </ul></li> <li><span>Титульные элементы </span> <ul><li><span>Изобразительная обложка </span></li> <li><span>Наборная шрифтовая обложка </span></li> <li><span>Комбинированная обложка </span></li> <li>Суперобложка </li> <li><a href="/life-hacks/kak-sostavit-titulnyi-list-bez-numeracii-kak-pronumerovat-stranicy-v-vord.html">Титульный лист</a> </li> <li>Шмуцтитул </li> <li>Переплет </li> <li>Форзац </li> </ul></li> <li><span>Верстка с иллюстрациями </span> <ul><li><span><a href="/iron/nvl-sql-opisanie-preobrazovaniya-nvl-dlya-razlichnyh-tipov-dannyh.html">Различные типы</a> верстки </span></li> <li><span>Некоторые особенности верстки иллюстраций </span></li> <li><span>Установка рисунков на развороте </span></li> <li><span>Соблюдение пропорций </span></li> <li><span>Подписи к рисункам </span></li> </ul></li> <li><span><a href="/life-hacks-for-ios/uvelichenie-skorosti-kompyutera-windows-7-vinchester-leptopa-i-celesoobraznoe.html">Целесообразное использование</a> бумаги </span></li> </ul></li> <li>ЦВЕТ <ul><li><span>Цвет как физическое явление </span> <ul><li>Цвета спектра </li> <li>Цвет тел </li> <li><span>Характеристика цвета </span></li> <li>Смешение цветов </li> </ul></li> <li><span>Цвет в искусстве и промышленности </span> <ul><li><span>Последовательный контраст </span></li> <li><span>Одновременный контраст </span></li> </ul></li> <li><span>Цветовые гармонии </span> <ul><li><span>Эстетика изолированного цвета </span></li> <li><span>Цветовые гармонии по кругу Оствальда </span></li> <li><span>Равноступенный круг </span></li> <li><span>Однотонные гармонии </span></li> <li><span>Условность цветовых гармоний </span></li> </ul></li> <li><span>Цвет в оформлении книги </span> <ul><li><span>Декоративное оформление </span></li> <li><span>Пространственное отношение цветов </span></li> <li>Фигура и фон </li> <li>Фон и контур </li> <li><span>Изменение цвета при искусственном освещении </span></li> </ul></li> <li>Печатные краски <ul><li><span>Кроющая способность краски </span></li> <li><span>Светопрочность краски </span></li> <li><span>Другие свойства красок </span></li> <li><span>Двухтоновые краски </span></li> </ul></li> <li><span>Цветные оригиналы </span> <ul><li><span>Штриховые оригиналы </span></li> <li><span>Тоновые оригиналы </span></li> <li><span>Оригиналы для глубокой печати </span></li> <li><span>Оригиналы для литографской печати </span></li> <li><span>Оригиналы для офсетной печати </span></li> </ul></li> <li><span>Комбинированная многоцветная печать </span></li> <li><span>Качество цветной репродукции </span></li> </ul></li> <li>ШРИФТ <ul><li>Развитие шрифта <ul><li><span><a href="/ios/krasivye-shrifty-na-russkom-dlya-oformleniya-vord-instrukciya-po-sozdaniyu.html">Рукописные шрифты</a> </span></li> <li><span>Типографские шрифты до XIX в. </span></li> <li><span>Развитие шрифтов в XIX и XX вв. </span></li> <li><span>Развитие русского типографского шрифта </span></li> </ul></li> <li><span>Конструкция шрифта </span> <ul><li><span>Антиква и гротеск </span></li> <li><span>Характеристика шрифтов </span></li> <li>Ширина шрифта </li> <li><span>Шрифт как конструктивное целое </span></li> </ul></li> <li><span>Рисование шрифтов </span> <ul><li><span>Рисование шрифтов - страница 2 </span></li> <li><span>Расстояние между буквами </span></li> <li>О ширине букв </li> <li><span>Рукописные шрифты </span></li> </ul></li> <li><span>Связь шрифта с иллюстрацией </span></li> </ul></li> <li>ИЛЛЮСТРАЦИОННЫЙ МАТЕРИАЛ <ul><li><span>Основные принципы иллюстрирования </span></li> <li><span>Оригинальный рисунок </span></li> <li><span>Штриховой и тоновой рисунок </span></li> <li><span><a href="/internet/kompyuter-ne-sootvetstvuet-trebovaniyam-specificheskie-trebovaniya.html">Специфические требования</a> к оформлению учебников и детских книг </span></li> <li><span>Репродуцирование одноцветных оригиналов способом высокой печати </span></li> <li><span>Репродуцирование одноцветных оригиналов способами плоской и глубокой печати </span></li> <li><span>Технический рисунок </span></li> <li>Перерисовка </li> </ul></li> <h2><span>Расстояние между буквами </span></h2> <p>Соблюдение между буквами нужного расстояния очень важно. Часто можно видеть, с одной стороны, слишком тесно поставленные друг к другу буквы, а с другой, - огромные, ничем не оправданные интервалы между ними.</p> <img src='https://i1.wp.com/maxbooks.ru/images/illu/131.gif' height="136" width="230" loading=lazy><p>В слове «КОГДА» буквы КОГ зрительно воспринимаются, как сдвинутые, в то время как между Г и Д-разрыв, подчеркнутый еще сближением букв Д и Л.</p> <p>Компонуя из отдельных букв слово, необходимо учитывать оптическую площадь, занимаемую буквой. В соответствии с этим меняется разбивка между буквами. Определяя разбивку, можно исходить из размера просвета. По Милле, просвет делится на четыре части. При двух прямых буквах промежуток между ними равняется всем четырем частям, а при других буквах применяется четверть, половина или три четверти просвета, - как это требуется для создания оптически равных промежутков между буквами. Расстояние между словами должно равняться нормальной ширине буквы.</p> <p>При некоторых комбинациях букв промежутки между ними могут иметь отрицательную величину, т. е. одна буква может заходить на площадь соседней буквы.</p> <p>При решении вопроса о выравнивании интервалов между буквами необходимо учитывать <a href="/internet/htc-windows-phone-8s-krasnyi-harakternye-osobennosti-smartfonov.html">характерную особенность</a> русского алфавита, придающую ему иной графический характер, чем у латинского: наличие ряда букв, «открытых»« налево.</p> <img src='https://i0.wp.com/maxbooks.ru/images/illu/132.gif' height="315" width="333" loading=lazy><p>В латинском алфавите таких букв только две - J, Z. Это создает в русском тексте ряд графически трудных буквосочетаний при соседстве буквы, «открытой» направо и «открытой» налево, например ГЛ.</p> <p>Выравнивание расстояний между буквами приходится производить и в типографских шрифтах (от кг. 16 и выше). Типографские шрифты отливаются, за малыми исключениями, без учета межбуквенных расстояний.</p> <p>Если в наборе легко можно выровнять промежутки различной разбивкой между отдельными буквами (с помощью шпаций), то в рисованном шрифте придется в случае неудачи переделывать все слово, а иногда и всю строку.</p> <p>Поэтому при рисовании шрифта необходима тщательная предварительная разметка интервалов, учитывающая характер смежных букв.</p> <p>Однако было бы абсолютно неправильно, компонуя шрифтовую строку, начать работу с цифрового расчета интервалов. Необходимо, прежде всего, построить ее на глаз, решить так, как это подсказывается непосредственным чутьем художника. И только затем уже математически уточнять размеры интервалов (половина, четверть и т. д.).</p> <p>Может оказаться, что в отдельных случаях придется дать не полный интервал, а три четверти интервала, или не четверть, а треть интервала. Разметку рекомендуется делать не сразу на оригинале, а предварительно на другом листе бумаги.</p> <p>Выравнивание по заданному расстоянию</p><p>Рассмотрим <a href="/iron/vertikalnoe-vyravnivanie-css-vnutri-div-vyravnivanie.html">вертикальное выравнивание</a> на <a href="/game/css-kak-zadat-rasstoyanie-mezhdu-strok-nastroiki-v-css-rasstoyanie-mezhdu.html">заданное расстояние</a>. <a href="/instructions/css3-vyravnivanie-vyravnivanie-blokov-po-centru-pogovorim-o.html">Свойство vertical</a> align очень простое: оно перемещает элемент вверх или вниз на указанное расстояние. Таким образом, выражение verti cal align: 5px; сдвинет элемент вверх на пять пикселов относительно <a href="/program/pochemu-perevorachivaetsya-ekran-na-noutbuke-kak-mozhno-perevernut.html">исходного положения</a>. Отрицательные значения длины сдвигают эле мент вниз. Этой простой формы выравнивания не было в CSS1, но она добавлена в CSS2.</p><p>Важно понимать, что выровненный по вертикали текст не становится частью другой строки и не перекрывает текст других строк. Взгляните на рис. 6.18, где часть выровненного по вертикали текста находится в середине абзаца.</p><p>Как видите, любой вертикально выровненный элемент может влиять на высоту строки. Вспомним описание контейнера строки, высота ко торого именно такова, чтобы вместить верх самого высокого строково го блока и низ самого низкого строкового блока. Это касается и строко вых блоков, которые были сдвинуты вверх или вниз при вертикаль ном выравнивании.</p><p>Рис. 6.18. Вертикальное выравнивание может привести к увеличению высоты строк</p><p>Расстояние между буквами и словами</p><p>Покончив с выравниванием, обратимся к управлению расстояниями между словами и буквами. У этих свойств тоже есть своя специфика.</p><h2>Расстояния между словами</h2><p>Свойство word spacing допускает положительные или отрицательные значения длины. Это значение добавляется к стандартному расстоя нию между словами. В сущности, word spacing служит дляизменения расстояния между словами. Поэтому применяемое по умолчанию зна чение normal аналогично нулевому значению (0).</p><p>Если задать положительное значение длины, расстояние между слова ми увеличится. А если задать отрицательное значение для word spac ing, то слова сдвинутся ближе друг к другу:</p><p><img src='https://i1.wp.com/studfiles.net/html/2706/299/html_rVojzZfUCl.0XLa/htmlconvd-oMyurf175x1.jpg' height="494" width="492" loading=lazy></p><p>174 Глава 6. Свойства текста</p><p>p.spread {word spacing: 0.5em;} p.tight {word spacing: 0.5em;} p.base {word spacing: normal;} p.norm {word spacing: 0;}</p><p><p class="spread">The spaces between words in this paragraph will be increased by 0.5em.</p></p><p><p class="tight">The spaces between words in this paragraph will be decreased by 0.5em.</p></p><p><p class="base"></p> <p class="norm">The spaces between words in this paragraph will be normal.</p></p><p>Эффект, оказываемый этими настройками, показан на рис. 6.19.</p><p>Рис. 6.19. Изменение расстояния между словами</p><p>До сих пор я не дал <a href="/life-hacks-for-ios/kak-uznat-tochnye-koordinaty-opredelenie-koordinat.html">точного определения</a> термину «слово». В термино логии CSS «слово» – это любая строка, не содержащая символов разде лителей и ограниченная такими символами с обеих сторон. Это опреде ление не относится к семантике, оно просто предполагает, что доку мент содержит слова, окруженные одним или несколькими символа ми разделителями. Нельзя ожидать от поддерживающего CSS агента пользователя, что он сможет во всех случаях отличить слово от не сло ва в <a href="/life-hacks-in-vk/vidy-modelei-dannyh-bd-razvitie-yazyka-sql-blokirovku-bazy-dannyh-faila-zapisi.html">данном языке</a>. Это определение, каким бы оно ни было, означает, что word spacing вряд ли будет работать в языках, основанных на пик тографии или на нероманских стилях написания. Это свойство позво ляет создавать совершенно нечитаемые документы, что ясно видно на рис. 6.20. Следует с осторожностью применять word spacing.</p><p><img src='https://i1.wp.com/studfiles.net/html/2706/299/html_rVojzZfUCl.0XLa/htmlconvd-oMyurf176x1.jpg' height="675" width="454" loading=lazy></p><p>Рис. 6.20. Действительно <a href="/program/hdmi-po-vitoi-pare-na-bolshie-rasstoyaniya.html">большие расстояния</a> между словами</p><h2>Расстояние между буквами</h2><p>Многие проблемы, встречающиеся при работе с word spacing, имеют место в случае применения letter spacing. Единственное отличие меж ду ними состоит в том, что свойство letter spacing изменяет расстоя ния между символами или буквами.</p><p>Как и для свойства word spacing, <a href="/life-hacks/oblast-dopustimyh-znachenii-odz-teoriya-primery-resheniya-oblast.html">допустимым значением</a> letter spacing является любая длина. По умолчанию указывается <a href="/life-hacks-for-pc/statistika-zaprosov-po-klyuchevym-slovam-servis-podbora-slov-v-yandekse-chto.html">ключевое слово</a> normal (что аналогично letter spacing: 0). Любое вводимое значение длины будет увеличивать или уменьшать расстояние между буквами на эту величину. На рис. 6.21 показаны результаты применения сле дующей разметки:</p><p>p {letter spacing: 0;} /* идентично "normal" */</p><p>p.spacious {letter spacing: 0.25em;} p.tight {letter spacing: 0.25em;}</p><p><p>The letters in this paragraph are spaced as normal.</p></p><p><p class="spacious">The letters in this paragraph are spread out a bit.</p> <p class="tight">The letters in this paragraph are a bit smashed together.</p></p><p>Рис. 6.21. Разные расстояния между буквами</p><p><img src='https://i0.wp.com/studfiles.net/html/2706/299/html_rVojzZfUCl.0XLa/htmlconvd-oMyurf177x1.jpg' height="678" width="454" loading=lazy></p><p>Рис. 6.22. Применение свойства letter%spacing для увеличения выразительности выделенного текста</p><p>Применение letter spacing для повышения выразительности выделе ния – это методика, освященная временем. Можно было бы написать следующее объявление и получить эффект, показанный на рис. 6.22:</p><p>strong {letter spacing: 0.2em;}</p><p><p>This paragraph contains <strong>strongly emphasized text</strong> that is spread out for extra emphasis.</p></p><h2>Расстояние между словами и буквами и выравнивание</h2><p>На значение word spacing может оказывать влияние значение свойства text align. Если элемент выровнен по ширине, пробелы между буква ми и словами корректируются так, чтобы текст занимал всю строку. Это может в свою очередь изменить параметры, определяющие рас стояние между словами и буквами, объявленные автором в свойствах word spacing. Если задано значение letter spacing, оно не может быть изменено text align, но если letter spacing имеет значение normal, рас стояние между символами может меняться для обеспечения выравни вания текста по ширине. CSS не указывает, как должны вычисляться пробелы, поэтому агент пользователя просто создает их.</p><p>Дочерний элемент, как обычно, наследует вычисленное значение сво его родителя. Нельзя сделать так, чтобы вместо вычисленного значе ния свойств word spacing или letter spacing наследовался коэффициент масштабирования (как это происходит в случае с <a href="/life-hacks-for-windows/centrirovanie-obekta-css-centrirovanie-izobrazheniya-s-pomoshchyu.html">line height</a>). В ре зультате можно столкнуться с проблемой, показанной на рис. 6.23:</p><p>p {letter spacing: 0.25em; <a href="/reviews/skachat-programmu-system-font-size-changer.html">font size</a>: 20px;} small {font size: 50%;}</p><p><p>This spacious paragraph features <small>tiny text that is just as spacious</small>, even though the author probably wanted the spacing to be in proportion to the size of the text.</p></p><p>Рис. 6.23. Унаследованный пробел между буквами</p> <script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> </article> <div class='yarpp-related'> <div class="related-items"> <div class="headline">Рекомендуем другие статьи</div> <div class="items"> <div class="item"> <a href="/reviews/kak-prazdnovat-letnee-solncestoyanie-kak-prazdnovat-letnee-solncestoyanie.html" class="item__link"> <img src="/uploads/d002eb7ee7f8ca5839027a5ec58464a2.jpg" width="220" height="170" alt="Как праздновать летнее солнцестояние Эммануэль Дагер: Исцеляющее солнцестояние" class="item__image" / loading=lazy> <div class="item__title">Как праздновать летнее солнцестояние Эммануэль Дагер: Исцеляющее солнцестояние</div> </a> </div> <div class="item"> <a href="/internet/programmirovanie-mikrokontrollerov-dlya-nachinayushchih-legko-i.html" class="item__link"> <img src="/uploads/cc080e5fe541f0a30c5c0fdf1654e93a.jpg" width="220" height="170" alt="Программирование микроконтроллеров AVR для начинающих Программирование контроллеров avr для начинающих" class="item__image" / loading=lazy> <div class="item__title">Программирование микроконтроллеров AVR для начинающих Программирование контроллеров avr для начинающих</div> </a> </div> <div class="item"> <a href="/life-hacks-for-ios/pochemu-planshet-ne-vyklyuchaetsya-chto-delat-zavis-planshet---chto-delat-vozmozhnye.html" class="item__link"> <img src="/uploads/5ee684d277379108d1f4344cff82eff8.jpg" width="220" height="170" alt="Завис планшет - что делать?" class="item__image" / loading=lazy> <div class="item__title">Завис планшет - что делать?</div> </a> </div> </div> </div> </div> </main> <aside class="sidebar"> <div class="section"> <div class="section__headline">Самое популярное</div> <div class="sidebar-items"> <a class="sidebar-item" href="/program/videonablyudenie-cherez-usb-kameru-besprovodnaya-usb-kamera-kupit.html"> <img src="/uploads/c5ad1ebb2eec805aceb765a476962621.jpg" width="75" height="75" alt="Беспроводная USB камера купить беспроводную мини камеру компьютера Цифровая камера с usb выходом" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Беспроводная USB камера купить беспроводную мини камеру компьютера Цифровая камера с usb выходом</div> </a> <a class="sidebar-item" href="/life-hacks-for-pc/sem-putei-voiti-v-svoi-lichnyi-kabinet-stoloto-russkoe-loto-obman.html"> <img src="/uploads/ef0eb579f517d663a977671e7a51ce14.jpg" width="75" height="75" alt="Столото, Русское лото – обман?" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Столото, Русское лото – обман?</div> </a> <a class="sidebar-item" href="/internet/v-chem-smysl-maininga-kak-rabotaet-maining-kriptovalyuty-process.html"> <img src="/uploads/e7ccb6fbe0cf024cedb045c511cf5fad.jpg" width="75" height="75" alt="Как работает майнинг криптовалюты Процесс майнинга криптовалют" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Как работает майнинг криптовалюты Процесс майнинга криптовалют</div> </a> <a class="sidebar-item" href="/game/professiya-programmist-dlya-detei-konspekt-zanyatiya-v-detskom.html"> <img src="/uploads/9d0201b81adc610408d4507ccf6f9186.jpg" width="75" height="75" alt="Конспект занятия в детском саду «Программист – великий волшебник" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Конспект занятия в детском саду «Программист – великий волшебник</div> </a> <a class="sidebar-item" href="/life-hacks-for-ios/aliekspress-prosit-ukazat-proverochnyi-kod-pri-vhode-chto.html"> <img src="/uploads/85f99bb622febba2f51f6ce46c571a8f.jpg" width="75" height="75" alt="Как пройти проверку при входе в аккаунт на Алиэкспресс?" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Как пройти проверку при входе в аккаунт на Алиэкспресс?</div> </a> <a class="sidebar-item" href="/game/otklyuchenie-uslugi-mobilnye-podpiski-kak-uznat-kakie-platnye.html"> <img src="/uploads/ce520cb58283add55341e217e52bd195.jpg" width="75" height="75" alt="Как узнать какие платные подписки от мегафон подключены и как их отключить" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Как узнать какие платные подписки от мегафон подключены и как их отключить</div> </a> </div> </div> <script> // <![CDATA[ $(document).ready(function() { var floatsidebar = $("#float-sidebar"); var offset = floatsidebar.offset(); var left = offset.left; var top = offset.top; var width = $("#float-sidebar").width(); var height = $("#float-sidebar").height(); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if (scrollTop >= top) { $('#float-sidebar').css({ left: left + 'px', position: 'fixed', top: "50px", width: width + "px" }); } else { $('#float-sidebar').css({ position: 'static', }); } }); }); // ]]> </script> <div id="float-sidebar"> <div id="laqybe1" style="height:500px;width:270px;" align="center"></div> </div> </aside> </div> <footer class="footer"> <div class="footer-left"> <div class="footer__logo"> <div class="footer__logo-sitename">radiobud.ru</div> </div> <div class="footer__copyright"> <p>© 2024 - radiobud.ru<br /></p> <p>Обзоры, лайфхаки, игры, программы</p> </div> <nav class="footer__nav-1"> <ul> <li class="menu-item type-post_type object-page "><a href="/sitemap.xml">Карта сайта</a></li> </ul> </nav> </div> <nav class="footer__nav-2"><ul> <li class="menu-item type-taxonomy object-category "><a href="/feedback.html">Контакты</a></li> <li class="menu-item type-taxonomy object-category "><a href="">Реклама</a></li> <li class="menu-item type-taxonomy object-category "><a href="">О сайте</a></li> </ul></nav> <div class="footer__counters"> </div> <div class="footer__note"></div> </footer> </div> </div> <script type='text/javascript' src='https://radiobud.ru/wp-content/themes/radiobud.ru/js/scripts.js'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "smooth_scroll":"1","visibility_show":"\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c","visibility_hide":"\u0421\u043a\u0440\u044b\u0442\u044c","width":"Auto"} ; /* ]]> */ </script> <script type='text/javascript' src='https://radiobud.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <script async="async" type='text/javascript' src='https://radiobud.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.2'></script> </body> </html>