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

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

Корректировка интервала

Чтобы увеличить расстояние между буквами, следует выбрать «Разреженный».

По умолчанию можно расширить межбуквенное расстояние на 1 пункт, равный 0,35 мм. Для удобства пользователя в нижней части приведён образец, показывающий, как будет в этом случае выглядеть текст. Очевидно, что пользователь может изменить значение в 1 пункт, с помощью маленьких треугольников добавляя или убавляя интервал на 0,1 пт. Другой вариант – непосредственно ввести в поле размера интервала нужное значение и щёлкнуть OK. Можно ввести сколь угодно большое расстояние.

Чтобы уменьшить интервал, надо выбрать «Сжатый».

Пользователь может сократить межбуквенный интервал аналогично предыдущему случаю – по умолчанию на 1 пт, или установив желаемое значение. Как видно по образцу, в данном случае уплотнение текста отрицательно сказалось на его читабельности.

Рассмотренное выше изменение межбуквенного интервала проходит для всех букв выделенного текста одинаково. В текстовом редакторе Word есть возможность изменить межбуквенный интервал более тонко, учитывая особенности начертания соседних букв. При включённой функции кернинга Word выбирает оптимальный интервал между парами символов автоматически, в зависимости от особенностей шрифта. Цель кернинга – повысить визуальную привлекательность текста.

Внимательное сравнение двух последних скриншотов – до и после кернинга, позволяет в этом убедиться. Кернинг преимущественно применяется в текстах с крупным шрифтом – заголовках и логотипах.

Видео: Как увеличить расстояние между буквами?

Выше рассмотрение межбуквенного интервала велось применительно к Word 2010. В ворде ближайших версий – 2007 и 2013 отличий нет.

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

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>Для остальных блочных элементов значение всегда будет равно единице. Значения свойства, указанные в единицах длины, поддерживается только в 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> <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>Основные линейные схемы композиции и их зрительное воздействие </span> <ul><li><span>Основные линейные схемы композиции и их зрительное воздействие - страница 2 </span></li> </ul></li> <li><span>Тональная композиция </span></li> <li><span>Физиологические факторы в графической композиции </span></li> <li>Золотое сечение <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>Титульный лист </li> <li>Шмуцтитул </li> <li>Переплет </li> <li>Форзац </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> </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>Рукописные шрифты </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>Специфические требования к оформлению учебников и детских книг </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>При решении вопроса о выравнивании интервалов между буквами необходимо учитывать характерную особенность русского алфавита, придающую ему иной графический характер, чем у латинского: наличие ряда букв, «открытых»« налево.</p> <img src='https://i1.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><h2>Краткая информация</h2><h2>Обозначения</h2><table><tbody><tr><th> </th><th>Описание </th><th style="width: 130px">Пример </th> </tr><tr><td><тип> </td><td>Указывает тип значения. </td><td><размер> </td> </tr><tr><td>A && B </td><td>Значения должны выводиться в указанном порядке. </td><td><размер> && <цвет> </td> </tr><tr><td>A | B </td><td>Указывает, что надо выбрать только одно значение из предложенных (A или B). </td><td>normal | small-caps </td> </tr><tr><td>A || B </td><td>Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. </td><td>width || count </td> </tr><tr><td> </td><td>Группирует значения. </td><td>[ crop || cross ] </td> </tr><tr><td>* </td><td>Повторять ноль или больше раз. </td><td>[,<время>]* </td> </tr><tr><td>+ </td><td>Повторять один или больше раз. </td><td><число>+ </td> </tr><tr><td>? </td><td>Указанный тип, слово или группа не является обязательным. </td><td>inset? </td> </tr><tr><td>{A, B} </td><td>Повторять не менее A, но не более B раз. </td><td><радиус>{1,4} </td> </tr><tr><td># </td><td>Повторять один или больше раз через запятую. </td><td><время># </td> </tr></tbody></table>× <h2>Значения</h2><p>В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Наилучший результат даёт использование относительных единиц, основанных на размере шрифта (em и ex).</p><p>Normal Задаёт интервал между символами как обычно.</p><h2>Песочница</h2><p>Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.</p><p><input type="range" min="-5" max="5" value="0" id="playground-value-input"></p><p>div { letter-spacing: 0 ; }</p><h2>Пример</h2><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>letter-spacing</title> <style> em { letter-spacing: 2px; } </style> </head> <body> <p>Кульминация, после осторожного анализа, существенно перечеркивает экваториальный большой круг небесной сферы, как это случилось в 1994 году с кометой <em>Шумейкеpов-Леви 9</em>.</p> </body> </html> </p><p>Результат данного примера показан на рис. 1.</p><p>Рис. 1. Применение свойства letter-spacing</p><h2>Объектная модель</h2><p><i>Объект </i>.style.letterSpacing</p><h2>Спецификация</h2><p>Каждая спецификация проходит несколько стадий одобрения.</p><ul><li>Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.</li><li>Candidate Recommendation (<span>Возможная рекомендация </span>) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.</li><li>Proposed Recommendation (<span>Предлагаемая рекомендация </span>) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.</li><li>Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.</li><li>Editor"s draft (<span>Редакторский черновик </span>) - черновая версия стандарта после внесения правок редакторами проекта.</li><li>Draft (<span>Черновик спецификации </span>) - первая черновая версия стандарта.</li> </ul>× <br><p>Как правило, для каждого шрифта определенного размера заранее установлены величины <b>пробелов между словами </b>, <b>расстояние между буквами внутри слова </b> и <b>визуальная высота строки </b>. Следует отметить, что расстояние между разными буквами в моноширинных шрифтах, таких как Courier New, всегда одинаковое. В других типах шрифтов межбуквенное расстояние зависит от буквосочетаний - в большинстве случаев оно фиксировано, но между некоторыми парами букв оно намеренно уменьшается, чтобы визуально сделать текст более "ровным" и равномерно распределенным. Например, между буквами АУ расстояние меньше, чем между буквами НП, так как буквы Н и П по своей форме прямые, а буквы А и У со скосами, причем направленными в одну сторону. При одинаковом расстоянии между буквами, А и У будут казаться стоящими дальше друг от друга, чем Н и П. Для того чтобы смягчить этот эффект, расстояние между ними чуть-чуть уменьшается, в результате чего визуально строка текста выравнивается. Это явление - одно из ярких проявлений обмана зрения.</p> <p>В <b>CSS </b> для текстовых блоков можно регулировать размеры расстояний между словами в тексте, т.е., по сути, менять размер пробела. Также можно менять расстояния между буквами внутри слова (т.е. создавать уплотненный или разреженный текст) и управлять высотой текстовой строки. Высота строки - это расстояние между базовыми линиями двух соседних строк.</p> <p>Аналогов таких свойств в HTML нет. Интервалы можно задавать только средствами <b>CSS </b>.</p> <h2> Свойство word-spacing</h2> <p>Это свойство позволяет задать расстояние между словами. В качестве значения допускаются любые единицы длины, как с положительными значениями, так и с отрицательными. При отрицательных значениях расстояние между словами уменьшается, и при слишком больших значениях слова могут сильно "сближаться" или даже "наезжать" друг на друга. Это отрицательно скажется на читаемости текста, поэтому будьте аккуратнее при задании таких значений. Задание значений в процентах не допускается.</p> <p>Рассмотрим пример: </p><h2> Свойство letter-spacing</h2> <p>Данное свойство задает расстояние между буквами внутри слова. Задается аналогично расстоянию между словами в любых единицах длины. Допускается задание отрицательных значений, при которых буквы могут слишком плотно примыкать друг к другу или даже налегать друг на друга. Поэтому пользуйтесь им осторожнее. Задание величины в процентах не допускается.</p> <p>При помощи этого свойства можно разрежать буквы, например в заголовках, что выгладит довольно оригинально. При этом рекомендуется, чтобы, с одной стороны, расстояние между буквами было увеличено настолько значительно, чтобы визуально заголовок выделялся на фоне обычного текста, а с другой стороны - разрежение не должно быть слишком большим, чтобы не ухудшалось общее восприятие текста.</p> <p>Оба свойства <b>word-spacing </b> и <b>letter-spacing </b> можно использовать совместно, так как при увеличении расстояния между буквами, для того чтобы сохранить читаемость и разделить слова, может потребоваться одновременно увеличить и расстояние между словами. Вот типичный пример оформления заголовка:</p><table width="80%" border="0" cellspacing="0" cellpadding="0" valign="top" align="center"><tr><td class="table_cent" align="center"> Н1 { word-spacing: 2 ex; letter-spacing: 0.3ех } </td> </tr></table></td> <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> <div class="col-sm-4"> <aside> <p class="h2 bold"> Реклама </p> <div class="line"></div> <div id="vagize2" style="height:500px;width:300px;" align="center"></div> <div class="subscribe block"> <p class="h2 bold"> Подпишитесь на новости </p> <div class="line"></div> <form class="form-horizontal form" action="/" method="post" target="popupwindow"> <div class="group"> <div class="input"> <input type="text" name="subscribe_email" class="form-control" placeholder="Введите e-mail" /> <div class="helper"></div> </div> </div> <div class="group"> <input type="submit" class="btn btn-base btn-big" value="Подписаться на новости" /> </div> </form> </div> <div class="adv block"> <div class="adv_track" data-id="aside"> <div class="adv_block adsense_3"> </div> </div> </div> </aside> </div> </div> </article> <script type='text/javascript' src='https://erfa.ru/wp-content/plugins/akismet/_inc/form.js?ver=3.0.3'></script> <script type='text/javascript' src='https://erfa.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://erfa.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.0.2'></script> <script type='text/javascript' src='https://erfa.ru/wp-content/plugins/light/js/jquery.fancybox.pack.js?ver=4.3.14'></script> <script type='text/javascript' src='https://erfa.ru/wp-content/plugins/light/js/light.js?ver=4.3.14'></script> <footer> <div class="footer"> <div class="row"> <div class="menu"> <nav class="navbar navbar-moto-footer"> <div class="row"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bottom_menu" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bottom_menu"> <ul id="menu-footer" class="nav navbar-nav navbar-first"> <li><a href="/category/ntv-plus/">НТВ плюс</a></li> <li><a href="/category/tricolor/">Триколор</a></li> <li><a href="/category/smart-tv/">Смарт ТВ</a></li> <li><a href="/category/tv/">Телевизор</a></li> </ul> </div> </div> </div> </nav> </div> <div class="to_top"> <div class="top_btn"> <i class="fa fa-angle-up"></i> </div> </div> </div> <div class="row"> <div class="col-sm-6"> © 2024 <span class="bold">erfa.ru</span> - Все о телевидении. </div> <div class="col-sm-6 text-right social_block" itemscope itemtype="http://schema.org/Organization"> <link itemprop="url" href="/" /> <a itemprop="sameAs" href="https://www.facebook.com/sharer/sharer.php?u=https://erfa.ru/rasstoyanie-mezhdu-simvolami-css-kak-izmenit-mezhbukvennyi-interval-v.html"> <i class="fa fa-facebook"></i> </a> <a itemprop="sameAs" href="https://vk.com/share.php?url=https://erfa.ru/rasstoyanie-mezhdu-simvolami-css-kak-izmenit-mezhbukvennyi-interval-v.html"> <i class="fa fa-vk"></i> </a> <a itemprop="sameAs" href="https://www.twitter.com/share?url=https://erfa.ru/rasstoyanie-mezhdu-simvolami-css-kak-izmenit-mezhbukvennyi-interval-v.html"> <i class="fa fa-twitter"></i> </a> <a itemprop="sameAs" href="https://connect.ok.ru/offer?url=https://erfa.ru/rasstoyanie-mezhdu-simvolami-css-kak-izmenit-mezhbukvennyi-interval-v.html"> <i class="fa fa-odnoklassniki"></i> </a> <a itemprop="sameAs" href=""> <i class="fa fa-google-plus"></i> </a> </div> </div> </div> </footer> </div> </div> </div> </body> </html> </div> </div>