hyphens в CSS


Содержание

Свойство -moz-hyphens

Свойство -moz-hyphens — задает способ, каким происходит расстановка переносов внутри слов. Переносы могут расставляться как автоматически (например, браузер может содержать словарь переносов), так и использоваться специальные символы, кроме того поддерживается режим полного запрета переносов. Данное свойство наследуется, и применяется ко всем элементам, но оказывает влияние только на элементы с текстовым содержанием. По умлочанию используется значение manual. Свойство -moz-hyphens является экспериментальным расширением движка Gecko (браузер Firefox) и впервые было представлено 16 августа 2011 год в Firefox 6.0.

Допустимые значения

  • none — Режим полного запрета переносов — никакие слова не разбиваются, даже если внутри них содержатся специальные символы, а разрывы строк ставятся только между слов.
  • manual — Ручная расстановка переносов — слова разбиваются только в местах расстановки специальных символов
  • auto — Автоматическая расстановка переносов — браузер может автоматически вставлять переносы строк в любом подходящем месте, но преимуществом пользуются позиции со специальными символами.

Служебные символы расстановки переносов

  • U+2010 (HYPHEN) — «Жесткий» перенос, визуально обозначающий дефисом место переноса. Данный символ отображается всегда, даже в том случае, если строка в данном месте не разрывается.
  • U+00AD (SHY) — «Мягкий» перенос, визуально не обозначающий. Данный символ распологается в местах предпочтительного переноса строк, если есть такая необходимость.

Примеры использования

Автоматическая расстановка переносов

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

Расстановка переносов отключена

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

Ручная расстановка переносов

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

Свойство -moz-hyphens определено в спецификации CSS 3 модуль Text Level 3 (текст, уровень 3), применяется к всем элементам, и действует на всех визуальные носителях, его значение наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение manual. Является расширением движка Gecko (браузер Firefox), и не совместимо с другими браузерами.

свойство hyphensCSS3-генератор ☛

Свойство hyphens сообщает браузеру, как расставлять переносы слов в блоке текста. Словарь переносов хранится в браузере и подключается только при наличии атрибута lang с кодом языка. Так, для русского языка следует добавить lang=»ru» к элементу или непосредственно к абзацу текста.

Краткая информация

Значение по умолчанию manual
Наследуется Да
Применяется Ко всем элементам
Анимируется Нет

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

Пример

Объектная модель

Примечание

Internet Explorer поддерживает свойство -ms-hyphens .

Safari поддерживает свойство -webkit-hyphens .

Firefox поддерживает свойство -moz-hyphens .

Спецификация ?

Спецификация Статус
CSS Text Level 3 Рабочий проект

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.


Браузеры: Настольные Мобильные ?

Internet Explorer Chrome Opera Safari Firefox
10 5.1 6
Android Firefox Mobile Opera Mobile Safari Mobile
6 4.3

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Всё, что нужно знать об автоматических переносах в CSS

Недавно меня пригласили выступить с вечерней лекцией в Типографском обществе Австрии. Для меня стало большой честью последовать по стопам таких светил, как Мэтью Картер, Вим Краувел, Маргарет Калверт, Эрик Шпикерман и покойная Фреда Сэк.

Я рассказал о некоторых золотых правилах типографики в интернете, а потом во время секции QA меня спросили о текущей ситуации с автоматическими переносами в вебе. Это хороший вопрос, особенно с учётом того, что немецкий язык знаменит часто используемыми длинными существительными (например, Verbesserungsvorschlag означает «предложение для улучшения»), поэтому переносы широко используются в большинстве письменных носителей.

В вебе автоматические переносы появились в 2011 году и теперь широко поддерживаются. Safari, Firefox и Internet Explorer 9 поддерживают их на всех платформах, а Chrome — на Android и MacOS (пока нет на Windows или Linux).

Как включить автоматические переносы

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

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

1. Установка языка

Язык веб-страницы устанавливается с помощью атрибута HTML lang :

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

Атрибут lang=»en» применяет языковой тег ISO, сообщая браузеру, что текст на английском языке. В этом случае браузер выберет дефолтный английский словарь переносов, что обычно соответствует переносам и в американском английском. Хотя американский и британский английский заметно отличаются в орфографии и произношении (и, следовательно, переносах), но разница не такая существенная, как между вариантами португальского. Проблема решается добавлением «региона», чтобы браузер знал, какой вариант английского наиболее подходит в качестве словаря переносов. Например, чтобы указать бразильский португальский или британский английский:

2. Включение переносов

После установки языка можно включить автоматические переносы в CSS. Это исключительно просто:

В настоящее время Safari и IE/Edge требуют префиксов, поэтому прямо сейчас следует написать так:

Управление переносами

Но недостаточно просто включить функцию в CSS. В спецификациях CSS Text Module Level 4 появилась возможность управлять переносами, как в программах для вёрстки (например, InDesign) и некоторых текстовых редакторах (включая Word). Эти элементы управления позволяют разными способами установить количество переносов в тексте.

Ограничение длины слова и количества символов до и после переноса

Если переносить короткие слова, их труднее читать. Точно так же вы не хотите отрывать от слова маленький кусочек. Общепринятое эмпирическое правило состоит в том, чтобы переносить только слова длиной не менее шести букв, оставляя не менее трёх символов до переноса и не менее двух на следующей строке.

В Оксфордском руководстве по стилю рекомендуется минимум три буквы после переноса, хотя допустимы редкие исключения.

Эти ограничения задаются с помощью свойства hyphenate-limit-chars . Оно принимает три значения, разделённые пробелами. Это минимальное ограничение символов для всего слова, минимальное количество символов до и после переноса. Чтобы соответствовать вышеупомянуторму эмпирическому правилу, указываем 6, 3 и 2, соответственно:

hyphenate-limit-chars в действии

По умолчанию для всех трёх параметров установлено значение auto . Это означает, что браузер выберет лучшие настройки на основе текущего языка и макета. CSS Text Module Level 4 предполагает использование в качестве отправной точки 5 2 2 (на мой взгляд, это приводит к излишним переносам), но браузеры могут изменять параметры на своё усмотрение.

В настоящее время это свойство поддерживает только IE/Edge (с префиксом), а Safari ограничивает количество символов через устаревшее свойство из предыдущего черновика CSS3 Text Module. Это означает, что вы можете добиться одинакового эффекта в Edge и Safari (с перспективным планированием для Firefox) с помощью такого кода:

Ограничение числа последовательных переносов

По эстетическим соображениям можно ограничить количество строк подряд с переносами. Последовательные чёрточки дефисов (три или более), уничижительно называются лесенкой. Общее эмпирическое правило для английского языка заключается в том, что две строки подряд —идеальный максимум (хотя в немецком лесенки более длинные). По умолчанию CSS не ограничивает количество последовательных дефисов, но можно установить максимальное их количество в свойстве hyphenate-limit-lines . В настоящее время это поддерживается только IE/Edge и Safari (с префиксами).

Свойство hyphenate-limit-lines предотвращает лесенку

Можете снять ограничение с помощью no-limit .

Запрет переносов в последней строке абзаца

По умолчанию браузер спокойно переносит самое последнее слово абзаца, так что окончание слова сидит в последней строке, как одинокая сирота. Зачастую предпочтительнее большой пробел в конце предпоследней строки, чем полслова в последней строке. Это устанавливается свойством hyphenate-limit-last со значением always .

В настоящее время свойство поддерживается только в IE/Edge (с префиксом).

Уменьшение количества дефисов путём установки зоны переноса


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

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

Для этого нужно указать максимальное допустимое количество пробелов между последним словом строки и краем текстового поля. Если в данном пространстве начинается новое слово, оно не переносится. Это пространство известно как зона переноса. Чем больше зона переноса, тем сильнее неровность и тем меньше переносов. Регулируя зону, вы ищете оптимальное соотношение между количеством дефисов и заполнением строки.

Слева: стрелки указывают строки, где перенос разрешён. Справа: перенос с заданной зоной переноса

Для этого используется свойство hyphenation-limit-zone , где указывается размер в пикселях или процентах (относительно ширины текстового поля). В контексте адаптивного дизайна имеет смысл установить зону переноса в процентах. Это означает, что зона переноса станет меньше на экранах меньшего размера, что вызовет больше переносов и меньше незаполненных строк. И наоборот, на более широких экранах зона переноса расширится, следовательно, будет меньше переносов и больше оборванных строк, которые на широких экранах не так критичны. Основываясь на типичных значениях в программах для вёрстки, можно начать с 8%.

В настоящее время поддерживается только в IE/Edge (с префиксом).

Всё вместе

С помощью свойств CSS Text Module Level 4 установим для абзаца те же параметры управления переносами, как в обычных программах для вёрстки:

C соответствующими префиксами и откатами код выглядит так:

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

CSS3: автоматический перенос текста

Раньше браузеры не умели переносить текст в автоматическом режиме как это происходило в печатных медиаресурсах.

Но всё изменилось с приходом спецификации CSS3, которая даёт нам возможность при помощи свойства hyphens управлять поведением переносов в браузерах.

Работает при условии, что текст выровнен по ширине: text-align: justify

Установка языка

Язык веб-страницы устанавливается с помощью атрибута HTML lang :

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

Синтаксис

Поддержка браузерами

Браузер Chrome Firefox (Gecko) IE Safari Opera
Версия 13 6.0 10.0 5.1
Русский язык 8.0 10.0
Свойство -webkit-hyphens -moz-hyphens -ms-hyphens -webkit-hyphens

Кроссбраузерно это выглядит так:

В браузерах, которые не поддерживают свойство hyphens, можно использовать JS-библиотеку hyphenator.

Manage Hyphens with CSS

In many written languages, it’s possible to break lines between syllables as well as between words. This is often done so that more characters may be placed on a line of text with the goal of having fewer lines in a text area, and thus saving space. In such languages the break is indicated visually with a hyphen (‘-‘).

The CSS Text Module Level 3 defines a hyphens property to control when hyphens are shown to users and how they behave when shown. Starting with version 55, Chrome implements the hyphens property. Per the specification, the hyphens property has three values: none , manual , and auto . To illustrate this we need to use a soft hyphen ( ­ ) as in the following example.

A soft hyphen is one that will only be shown when it occurs at the trailing margin. How this hyphen renders in Chrome 55 or later depends on the value of the CSS hypens property.

Combining these gives a result like this:

Notice that the soft hyphen isn’t visible. In all cases, when a word containing the soft hyphen fits on a single line, the hypen will be invisible. Now, let’s look at how all three values of hyphen behave.

Using none

In the first example, the hyphens property is set to none . This prevents the soft hyphen from ever being displayed. You can confirm this by adjusting the window size so that the word ‘elit’ will not fit in the visible line of text.

Using manual

In the second example, the hyphens property is set to manual meaning the soft hyphen will only appear when the margin breaks the word ‘elit’. Again, you can confirm this by adjusting the window size.

Using auto

In the third example, the hyphens property is set to auto . In this case, no soft hyphen is needed since the user agent will determine hyphen locations automatically. If you resize the window, you’ll see that the browser hyphenates this example in the same place as in the second, though no soft hyphen is present. If you continue to shrink the window, you’ll see that your browser is able to break lines between any two syllables in the text.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Hyphens в CSS

Css module of single purpose classes for hyphens

210 12 36
bytes selectors declarations

Learn more about using css installed with npm:

Import the css module


Then process the css using the tachyons-cli

The easiest and most simple way to use the css is to use the cdn hosted version. Include it in the head of your html with:

The built css is located in the css directory. It contains an unminified and minified version. You can either cut and paste that css or link to it directly in your html.

The source css files can be found in the src directory. Running $ npm start will process the source css and place the built css in the css directory.

hyphens

The hyphens CSS property specifies how words should be hyphenated when text wraps across multiple lines. You can prevent hyphenation entirely, use hyphenation in manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.

Hyphenation rules are language-specific. In HTML, the language is determined by the lang attribute, and browsers will hyphenate only if this attribute is present and if an appropriate hyphenation dictionary is available. In XML, the xml:lang attribute must be used.

Note: The rules defining how hyphenation is performed are not explicitly defined by the specification, so the exact hyphenation may vary from browser to browser.

Initial value manual
Applies to all elements
Inherited yes
Media visual
Computed value as specified
Animation type discrete
Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

The hyphens property is specified as a single keyword chosen from the list below.

Values

Note: The auto setting’s behavior depends on the language being properly tagged so that the appropriate hyphenation rules can be selected. You must specify a language using the lang HTML attribute in order to guarantee that automatic hyphenation is applied in the language of your choice.

Suggesting line break opportunities

There are two Unicode characters that can be used to manually specify potential line break points within text:

U+2010 (HYPHEN) The «hard» hyphen character indicates a visible line break opportunity. Even if the line is not actually broken at that point, the hyphen is still rendered. U+00AD (SHY) An invisible, «soft» hyphen. This character is not rendered visibly; instead, it marks a place where the browser should break the word if hyphenation is necessary. In HTML, you can use ­ to insert a soft hyphen.

Formal syntax

Example

This example uses three classes, one for each possible configuration of the hyphens property.

Specifications

Specification Status Comment
CSS Text Module Level 3
The definition of ‘hyphens’ in that specification.
Working Draft Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 13.0 -webkit [1]
55.0 (unprefixed)
10.0 -ms [3] 44 5.1 -webkit
Hyphenation dictionary for Afrikaans (af, af-*) ? 8.0 (8.0) No support ? No support
Hyphenation dictionary for Bulgarian (bg, bg-*) ? 8.0 (8.0) No support ? No support
Hyphenation dictionary for Catalan (ca, ca-*) ? 8.0 (8.0) 10.0 ? 9.1
Hyphenation dictionary for Croatian (hr, hr-*) ? 8.0 (8.0) No support ? 9.1
Hyphenation dictionary for Czech (cs, cs-*) ? No support 10.0 ? 9.1
Hyphenation dictionary for Danish (da, da-*) ? 8.0 (8.0) 10.0 ? 9.1
Hyphenation dictionary for Dutch (nl, nl-*) ? 8.0 (8.0) 10.0 ? 5.1
Hyphenation dictionary for English (en, en-*) 55.0 (unprefixed) 6.0 (6.0) [4] 10.0 44 5.1 [5]
Hyphenation dictionary for Esperanto (eo, eo-*) ? 8.0 (8.0) No support ? No support
Hyphenation dictionary for Estonian (et, et-*) ? 8.0 (8.0) No support ? No support
Hyphenation dictionary for Finnish (fi, fi-*) ? 8.0 (8.0) No support ? 9.1
Hyphenation dictionary for French (fr, fr-*) ? 8.0 (8.0) 10.0 ? 5.1
Hyphenation dictionary for Galician (gl, gl-*) ? 9.0 No support ? No support
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901) ? 8.0 ? ? ?
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*) ? 8.0 10.0 ? 5.1
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*) ? 8.0 ? ? ?
Hyphenation dictionary for Hungarian (hu, hu-*) ? 9.0 No support ? 9.1
Hyphenation dictionary for Icelandic (is, is-*) ? 8.0 No support ? No support
Hyphenation dictionary for Interlingua (ia, ia-*) ? 8.0 No support ? No support
Hyphenation dictionary for Italian (it, it-*) ? 9.0 10.0 ? 5.1
Hyphenation dictionary for Kurmanji (kmr, kmr-*) ? 8.0 No support ? No support
Hyphenation dictionary for Latin (la, la-*) (Yes) 8.0 No support 44 No support
Hyphenation dictionary for Lithuanian (lt, lt-*) ? 8.0 No support ? No support
Hyphenation dictionary for Mongolian (mn, mn-*) ? 8.0 No support ? No support
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*) ? 8.0 10.0 ? 9.1
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*) ? 8.0 10.0 ? No support
Hyphenation dictionary for Polish (pl, pl-*) ? 31.0 10.0 ? 9.1
Hyphenation dictionary for Portuguese (pt, pt-*) ? 8.0 [6] 10.0 ? 9.1
Hyphenation dictionary for Brazilian Portuguese (pt-BR) ? 8.0 [6] 10.0 ? No support
Hyphenation dictionary for Russian (ru, ru-*) ? 8.0 10.0 ? 5.1
Hyphenation dictionary for Serbian, Bosnian, Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*) ? 8.0 No support ? No support
Hyphenation dictionary for Slovenian (sl, sl-*) ? 8.0 No support ? No support
Hyphenation dictionary for Spanish (es, es-*) ? 8.0 10.0 ? 5.1
Hyphenation dictionary for Swedish (sv, sv-*) ? 8.0 10.0 ? 9.1
Hyphenation dictionary for Turkish (tr, tr-*) ? 9.0 10.0 ? 9.1
Hyphenation dictionary for Ukrainian (uk, uk-*) ? 9.0 No support ? 9.1
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*) ? 8.0 No support ? No support
Hyphenation dictionary for Welsh (cy, cy-*) ? 8.0 No support ? No support
Hyphenation dictionary for other languages ? No support No support ? No support
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support 4.0 -webkit [1] 55.0 (unprefixed) 6.0 (6.0) -moz [2]
43.0 (43.0)
No support 44 4.2 -webkit 55.0 (unprefixed)
Hyphenation dictionary for Afrikaans (af, af-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Bulgarian (bg, bg-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Catalan (ca, ca-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Croatian (hr, hr-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Czech (cs, cs-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Danish (da, da-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Dutch (nl, nl-*) ? ? ? ? ? ? ?
Hyphenation dictionary for English (en, en-*) ? 55.0 (unprefixed) ? ? 44 ? 55.0 (unprefixed)
Hyphenation dictionary for Esperanto (eo, eo-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Estonian (et, et-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Finnish (fi, fi-*) ? ? ? ? ? ? ?
Hyphenation dictionary for French (fr, fr-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Galician (gl, gl-*) ? ? ? ? ? ? ?
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901) ? ? ? ? ? ? ?
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*) ? ? ? ? ? ? ?
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Hungarian (hu, hu-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Icelandic (is, is-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Interlingua (ia, ia-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Italian (it, it-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Kurmanji (kmr, kmr-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Latin (la, la-*) ? (Yes) ? ? 44 ? (Yes)
Hyphenation dictionary for Lithuanian (lt, lt-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Mongolian (mn, mn-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Polish (pl, pl-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Portuguese (pt, pt-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Brazilian Portuguese (pt-BR) ? ? ? ? ? ?
Hyphenation dictionary for Russian (ru, ru-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Serbian, Bosnian, Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Slovenian (sl, sl-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Spanish (es, es-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Swedish (sv, sv-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Turkish (tr, tr-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Ukrainian (uk, uk-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Welsh (cy, cy-*) ? ? ? ? ? ? ?
Hyphenation dictionary for other languages ? ? ? ? ? ? ?

[1] No automatic hyphenation, only -webkit-hyphens: none is supported.

[2] Automatic hyphenation only works for languages whose hyphenation dictionaries are integrated in Gecko. See the note below for a complete list of such languages.

[3] Automatic hyphenation only works for languages whose hyphenation dictionaries are integrated in Internet Explorer. See the note below for a complete list of such languages.

[4] Uses an en-US dictionary.

[5] en-GB and en-US used different dictionaries.

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 53405f78d99f9075 • Your IP : 188.64.174.135 • Performance & security by Cloudflare


Свойства CSS для управления веб-типографикой

31 Августа 2015

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

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

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

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

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

Но также известно, что “веб это лучшее место для текста”. Текст в Интернете можно “искать, копировать, переводить, передавать в виде ссылки, распечатывать; текст в вебе удобен и доступен”.

Гибкость веба не означает отказ от контроля. Наоборот, как веб-дизайнеры мы ожидаем возможности делать осознанный выбор во всем, что составляет нашу работу и текст не исключение. Это и то, как располагается текст, его размер, шрифт и все, что позволяет донести основную идею сайта.

Главный инструмент для манипуляции видом текста в вебе это CSS.

Свойства CSS, рассматриваемые в этой статье, вы можете найти в модуле спецификации CSS текста.

Этот модуль описывает верстку CSS, то есть свойства CSS, управляющие переводом источника текста в форматированный и разделенный на строки текст.

Другими словами, модуль CSS текста это все, что касается вывода символов и слов в браузере, отступов, выравнивания, переносов и прочего.

Что считать базовой единицей текста или слова, где можно разбивать слова и прочие правила, зависит от языка сайта. Поэтому очень важно задавать данные об используемом языке в HTML-документе (обычно это атрибут lang в элементе html ).

В этой статье я не буду обсуждать следующие вещи:

  • шрифты, т.е. визуальное представление символов и их свойства;
  • свойства CSS по декорированию текста, такие как подчеркивание, тени текста или акцентирование.

Если вы любопытны, вы найдете последнюю документацию о шрифтах и декорировании текста в модуле CSS шрифты третьего уровня и в модуле декорирования текста CSS третьего уровня.

Управление регистром букв: text-transform

Иногда возникает необходимость вывести слова или первые символы слов с заглавной буквы. В CSS для управления регистром буквы есть свойство text-transform .

Дефолтное значение text-transform равно none , то есть по умолчанию регистр букв не изменяется.

Значение capitalize

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

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

Значение uppercase

Если ваша цель — сделать все буквы заглавными, то подходящим значением будет uppercase :

Значение lowercase

Это значение наоборот делает все символы строчными. Естественно, оно не оказывает никакого воздействия на уже имеющиеся строчные буквы.

Значение full-width

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

Не у всех символов есть соответствующая форма, и, значит, не на все символы будет влиять это значение:

Это свойство на данный момент поддерживается только в Firefox.

Дополнительная информация

Браузеры отлично поддерживают свойство text-transform , у всех основных браузеров с ним нет проблем.

Единственное исключение это значение full-width , которое работает пока только в Firefox. И такая непопулярность вполне может повлечь исключение этого значения из спецификаций.

Также есть небольшое отличие в обработке capitalize у Firefox и остальных браузеров.

Вот, например, Firefox:

Заметьте, что первая буква после дефиса не капитализируется. А вот тот же самый пример в Chrome:

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

И, наконец, не забывайте о каскадировании. Задание свойства text-transform для элемента-контейнера будет унаследовано всеми его потомками. Чтобы избежать неожиданных результатов, задавайте дочерним элементам text-transform в значение none .


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

Когда вы нажимаете клавишу Tab , пробел или форсированно обрываете строку (с клавишей ENTER или тегом
), вы создаете пробелы в своем документе.

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

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

В тех случаях, когда вам нужно изменить дефолтное поведение браузера, свойство white-space предлагает несколько интересных вариантов.

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

Значение pre

Ключевое слово pre позволяет вам вывести текст с сохранением всех пробелов и всех форсированных переводов строки в исходнике. И при превышении пределов контейнера строка не будет обрываться.

Если вы используете табы, то вы можете управлять их размером в пробелах с помощью свойства tab-size . Оно принимает значение в виде целого числа.

Свойство tab-size поддерживают все современные браузеры, кроме браузеров от Microsoft (и даже Edge, увы), но если вы уверены, что вам это надо, используйте полифилл.

Значение pre-wrap

Это значение позволяет сохранить все множественные пробелы на месте, но если строка не вмещается в контейнер, она автоматически переносится.

Ключевое слово pre-wrap позволяет вам достигнуть желаемого результата.

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

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

Значение pre-line

И, наконец, еще одно интересное значение свойства white-space — pre-line . Оно действует как дефолтное в части схлопывания пробелов в один и ограничения строки размером контейнера. Однако оно отрабатывает все форсированные переводы строки.

Значение nowrap

nowrap это, возможно, самое известное значение для white-space . Сталкивались вы с необходимостью задать какому-либо элементу дизайна неразрывность вне зависимости от ширины контейнера? Это делается с помощью white-space: nowrap; .

Луис Лазарис указывает на следующий случай использования этого значения.

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

В этом и подобных случаях поможет значение nowrap .

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

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

Я проиллюстрирую это предложение, создав базовую карусель на jQuery с использованием white-space: nowrap . Вот демо:

Управляем переносом строки с разбитием слов

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

Для таких случаев у нас есть специальные свойства CSS.

Свойство word-wrap/overflow-wrap

Свойство overflow-wrap (раннее известное как word-wrap и до сих пор поддерживаемое во всех основных браузерах) работает, если свойство white-space допускает перенос в соответствии с размером строки. Возможные значения — normal и break-word .

Со значением normal слова разбиваются на всех традиционных маркерах — пробелы, дефисы и т.д.

Значение break-word позволяет разбить длинные слова, если иначе строка будет превышать доступный размер.

На картинке ниже изображен пример длинного слова, выходящего за пределы контейнера:

Теперь зададим этому элементу свойство overflow-wrap (и свойство word-wrap для совместимости) в значение break-word :

Теперь сверхдлинное слово разбито на несколько строк, заполняющих всю ширину контейнера.

Свойство hyphens

Разбитие длинных слов это, конечно, хорошо. Однако, полученный текст может смутить читателей. Лучше будет, если разбитие слова будет сопровождаться установкой дефиса. Таким образом, читателям сразу становится ясно, что это одно слово, разделенное между строками. Этого можно достичь используя свойство hyphens , его можно сочетать с word-wrap: break-word .

Конкретно это значит, что значение auto свойства hyphens позволяет вывести дефис на месте разбития слова, если язык документа позволяет это делать в имеющемся источнике HTML. Чтобы это сработало, не забудьте задать правильный атрибут lang своему документу:

Вы также можете отключить вывод дефисов, задав hyphens значение none :


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

Основные браузеры поддерживают свойство hyphens с помощью вендорных префиксов, но в реализации есть некоторые различия. Последние на момент написания статьи версии Chrome (44) и Opera (30) не поддерживали значение auto .

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

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

В CSS есть свойства word-spacing и letter-spacing для управления расстоянием между словами и буквами соответственно.

Свойство word-spacing

Это свойство может принимать следующие значения:

  • normal
  • (задание непосредственно числового значения в абсолютных единицах)
  • percentage (задание значения в процентах)

normal выводит заданное по умолчанию расстояние между буквами. Это расстояние зависит от используемого шрифта и браузера.

Числовое значение добавляет указанный промежуток к дефолтному ( вычитает, если задано отрицательное значение):

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

Свойство letter-spacing

Свойство letter-spacing принимает два вида значений: normal или числовое значение с единицами измерения.

Свойство normal сбрасывает любое раннее установленное значение letter-spacing на дефолтное. Например, если вы задали родительскому элементу letter-spacing в 1em , вы можете отменить это для дочерних с помощью normal .

Числовое значение задается в единицах исчисления, например в em или в пикселях, вы можете увеличить расстояние дефолтное расстояние или уменьшить задав отрицательное значение.

Дополнение

word-spacing применимо не только к словам — его можно использовать с любым строчным или строчно-блочным содержимым.

Также вы можете анимировать word-spacing и letter-spacing . Однако в CSS-переходах значение normal в letter-spacing не работает в Firefox (39), просто замените значение на 0em .

Вот небольшое демо с анимацией текста, использующей word-spacing и letter-spacing :

Опции CSS для выравнивания текста: text-align

Свойство text-align используется в вебе уже давно. Оно контролирует выравнивание строчного контента (текста или изображений) внутри блочного контейнера. Ключевые слова left и right выравнивают содержимое по соответствующим краям контейнера. center — выравнивает по центру, а justify делает все строки одинаковой длины (кроме последней в абзаце).

В спецификации появилась пара новых значений, полезных для сайтов,использующих написание справа налево (RTL): start и end .

Для обычных языков (LTR) они соответствуют left и right соответственно. А для языков (RTL) start соответствует right , а end — left .

Применение text-align: match-parent к дочернему элементу вынудит его унаследовать тоже выравнивание, что и у родительского элемента. И значения start и end в таком случае будут расчитаны исходя из направления языка родительского элемента.

Свойство text-align-last

Это свойство отвечает за выравнивание последней строки абзаца текста. Оно принимает те же ключевые значения, что и text-align , за исключением того, что дефолтным является значение auto . auto выравнивает последнюю строку в соответствии со значением text-align , если text-align не задано используется значение start .

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

Отступы в тексте: text-indent

Отступы в тексте обычно делаются в первой строке параграфа, хотя и не являются распространенной практикой на веб-сайтах. Вместо этого обычно помещается пустая строка, разделяющая параграфы.

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

Если вы хотите использовать эту технику в своем дизайне, в CSS есть свойство text-indent . Рассмотрим его возможные значения.

Числовое значение можно задать в пикселях, em’aх и других поддерживаемых единицах:

В том числе и в процентах от ширины контейнера:

Значение each-line добавляет отступ не только первой строке, но и любой строке после разрыва строки ( ENTER или
). На строки, переносимые по причине заполнения контейнера эти отступы не распространяются.

Значение hanging добавляет отступ ко всем строкам, кроме первой.

Два последних значения: each-line и hanging являются экспериментальными и не реализованы на данный момент ни в одном из браузеров.

CSS свойство hyphens

Свойство hyphens определяет, как должен осуществляться перенос слов в тексте.

Свойство hyphens имеет три значения: none, manual, auto. С помощью этих значений можно избегать переноса или разрешать перенос, или же разрешать только при наличии некоторых символов.

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

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

Значение по умолчанию manual
Применяется Ко всем элементам.
Наследуется Да
Анимируемое Нет
Версия CSS3
DOM синтаксис Object.style.hyphens = «none»;

Синтаксис

Пример

В вышеприведенном примере применены все три значения.

Для максимальной совместимости браузера могут быть использованы расширения, например, -webkit- для Safari.

Илон Маск рекомендует:  Псевдокласс indeterminate в CSS
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL