Всё, что нужно знать об автоматических переносах в 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 в действии
В настоящее время это свойство поддерживает только IE/Edge (с префиксом), а Safari ограничивает количество символов через устаревшее свойство из предыдущего черновика CSS3 Text Module. Это означает, что вы можете добиться одинакового эффекта в Edge и Safari (с перспективным планированием для Firefox) с помощью такого кода:
Ограничение числа последовательных переносов
Свойство hyphenate-limit-lines предотвращает лесенку
Запрет переносов в последней строке абзаца
В настоящее время свойство поддерживается только в IE/Edge (с префиксом).
Уменьшение количества дефисов путём установки зоны переноса
Рассмотрим абзац, выровненный по левому краю. Правый край неровный, что частично исправляется переносами. По умолчанию будут переноситься все слова, которые разрешено переносить, что обеспечивает максимальное выравнивание правого края. Если вы готовы смириться с небольшим нарушением выравнивания, можно уменьшить количество переносов.
Для этого нужно указать максимальное допустимое количество пробелов между последним словом строки и краем текстового поля. Если в данном пространстве начинается новое слово, оно не переносится. Это пространство известно как зона переноса. Чем больше зона переноса, тем сильнее неровность и тем меньше переносов. Регулируя зону, вы ищете оптимальное соотношение между количеством дефисов и заполнением строки.
Слева: стрелки указывают строки, где перенос разрешён. Справа: перенос с заданной зоной переноса
В настоящее время поддерживается только в IE/Edge (с префиксом).
Всё вместе
С помощью свойств CSS Text Module Level 4 установим для абзаца те же параметры управления переносами, как в обычных программах для вёрстки:
C соответствующими префиксами и откатами код выглядит так:
Перенос — идеальный пример прогрессивного улучшения. Эти свойства можно активировать уже сейчас, если вы считаете, что читатели выиграют от этого. Поддержка браузеров постепенно увеличится. Если вы разрабатываете сайт на языке с длинными словами, как немецкий, читатели точно будут благодарны.
CSS Hyphenation — перенос слов в 2019 году
Дата публикации: 2019-02-14
От автора: недавно я работал над веб-сайтом, который использовал большие заголовки (имеется в виду размер шрифта), а также был доступен на немецком языке. Это означает, что часто на нем встречались довольно длинные слова, и они часто не помещались в контейнер. Если ничего не делать, это «сломало бы» макет, так как появилась бы горизонтальная полоса прокрутки. Итак, я перечитал статью, которую написал почти четыре года назад о работе с длинными словами и реализовал окончательное решение.
Казалось, что это все еще отлично работает, но с этим подходом были некоторые проблемы. Давайте рассмотрим, как поддерживается браузерами в CSS перенос слов, а также в целом поговорим о CSS Hyphenation — как их использовать сегодня и какую функцию я бы хотел увидеть в браузерах.
Поддержка браузерами
Поддержка CSS Hyphenation довольно хорошая. Следует помнить, что, хотя они работает в браузерах на основе Chromium на платформах Mac и Android, в настоящий момент (январь 2019 года) это не работает в Windows и Linux. Они также не работают в Opera Mini и некоторых других мобильных браузерах (браузер Blackberry, IE mobile и т. д.), Но в целом поддержка стабильная.
Использование переносов CSS
Чтобы сегодня использовать дефисы, нам все еще нужно добавлять префиксы для IE / Edge / Chromium, поэтому лучше использовать следующее для каждого текста, который должен использовать дефисы:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Поскольку вы, вероятно, хотите разбивать слова, а не макет в неподдерживаемых браузерах, я рекомендую следующее. Таким образом, все слова будут переноситься в поддерживающих браузерах и разбиваться на новые строки в неподдерживающих.
Теперь, когда мы знаем, как сегодня использовать CSS Hyphenation, давайте посмотрим, чего нам не хватает, чтобы сделать его еще лучше.
Слишком много переносов слов
Самая большая проблема, с которой мы столкнулись, заключалась в том, что CSS Hyphenation слишком часто переносил слова. Что это означает, показывает следующий пример, здесь он переносит слово Josef, которое выглядит не очень хорошо. Это также затрудняет чтение текста и, следовательно, делает его менее доступным.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Это связано с тем, что, если UA (пользовательский агент) не может рассчитать лучшее значение, предполагается, что hyphens: auto означает два символа для до и после переноса и пять для слова в целом. Это означает, что для каждого слова длиной не менее пяти символов будет использоваться перенос, и он будет разбивать слова до двух символов после / до переноса.
Я не уверен, почему они придумали эти значения по умолчанию, но сейчас мы имеем именно это. Существует решение, которое уже определено в спецификации — свойство hyphenate-limit-chars.
Оно определяет минимальное количество символов в слове с переносом, и поэтому мы можем использовать его для переопределения значения по умолчанию 5 (длина слова) 2 (до разрыва) 2 (после разрыва). Таким образом, теоретически мы могли бы применить следующее, чтобы использовать переносы только для слов с 10 символами и более четырех символов до / после переноса:
Как вы можете видеть, поддержка CSS Hyphenation довольно неплоха в 2019 году. Единственная проблема для меня — отсутствие поддержки свойства hyphenate-limit-chars, что, как мы надеемся, улучшится в будущем, когда его будет запрашивать достаточное количество пользователей / разработчиков.
Обновление от 28.01.2018: добавлена информация о похожих свойствах браузеров на основе webkit, на что указывают Александр Рутц и Джимини Паноз.
Автор: Michael Scharnagl
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
hyphens
The hyphens CSS property specifies how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at 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 the 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.
Syntax
The hyphens property is specified as a single keyword value chosen from the list below.
Values
Words are not broken at line breaks, even if characters inside the words suggest line break points. Lines will only wrap at whitespace.
Words are broken for line-wrapping only where characters inside the word suggest line break opportunities. See Suggesting line break opportunities below for details.
The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. However, suggested line break opportunities (see Suggesting line break opportunities below) will override automatic break point selection when present.
Note: The auto setting’s behavior depends on the language being properly tagged to select the appropriate hyphenation rules. You must specify a language using the lang HTML attribute to guarantee that automatic hyphenation is applied in that language.
Suggesting line break opportunities
There are two Unicode characters used to manually specify potential line break points within text:
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.
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, use to insert a soft hyphen.
Note: When the HTML element leads to a line break, no hyphen is added.
Formal definition
| Initial value | manual |
|---|---|
| Applies to | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
Examples
Specifying text hyphenation
This example uses three classes, one for each possible configuration of the hyphens property.
hyphens
Take your JavaScript to the next level at Frontend Masters.
The hyphens property controls hyphenation of text in block level elements. You can prevent hyphenation from happening at all, allow it, or only allow it when certain characters are present.
Note that hyphens is language-sensitive. Its ability to find break opportunities depends on the language, defined in the lang attribute of a parent element. Not all languages are supported yet, and support depends on the specific browser.
Words are never hyphenated at line breaks, even if characters inside the word suggest where hyphenation could or should go.
Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities. There are two characters that suggest line break opportunity:
Words can be broken at appropriate hyphenation points either as determined by hyphenation characters (see above) inside the word or as determined automatically by a language-appropriate hyphenation resource (if supported by the browser or provided via @hyphenation-resource ).
Conditional hyphenation characters inside a word, if present, take priority over automatic resources when determining hyphenation points within the word.
Deprecated, do not use. This was only in the spec temporarily for testing.
The demo below has a bunch of paragraphs and everything is set to hyphens: auto; to demonstrate the concept of hyphenation. The lang attribute is set to en on the parent element.
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
Mobile / Tablet
In Firefox and Internet Explorer, automatic hyphenation only works for some languages (defined with the lang attribute). See this note for a comprehensive list of supported languages.
If you are writing a web-based document that really need hyphenation, you can use Hyphenator.js which is a library based on a vast dictionary that will automatically inject soft hyphens and zero-width spaces into your content.
Without JavaScript, you’ll have to rely on both hyphens and word-wrap :
Установка Internet Explorer не закончена
При этом, подобные ошибки, как и большинство у Microsoft, являются «универсальными», то есть имеют несколько (иногда даже существенное количество) вероятных причин.
В журнале мы можем наблюдать ошибку DISM, которая имеет идентификатор 0x00003715 (14101) и поясняющий текст «The identities of the manifests are identical but their contents are different». Возникает резонный вопрос, почему манифесты тождественны, но их содержимое разное и что это означает? Упоминание манифестов явно связывает проблему с системными пакетами в хранилище, вероятно ошибка связана с каким-либо пакетом, устанавливаемым основным инсталлятором. Вторая ошибка уже относится непосредственно к Internet Explorer и является одной из самых распространенных ошибок инсталляции IE. Она имеет код 0x00009C59 (40025) и возвращается непосредственно самим инсталлятором IE (iesetup.exe) в качестве реакции на первую ошибку.
Решение 1: установка необходимых обновлений
| Наименование | Для x32 версии | Для x64 версии |
|---|---|---|
| KB2834140 | с сайта Microsoft | с сайта Microsoft |
| KB2670838 | с сайта Microsoft | с сайта Microsoft |
| KB2639308 | с сайта Microsoft | с сайта Microsoft |
| KB2533623 | с сайта Microsoft | с сайта Microsoft |
| KB2731771 | с сайта Microsoft | с сайта Microsoft |
| KB2786081 | с сайта Microsoft | с сайта Microsoft |
| KB2888049 | с сайта Microsoft | с сайта Microsoft |
| KB2882822 | с сайта Microsoft | с сайта Microsoft |
| KB2729094 | с сайта Microsoft | с сайта Microsoft |
Проблему требований к предустановленным обновлениям призван решить так называемый онлайновый инсталлятор IE (IE online web installer), который в своё время был доступен для скачивания с сайта Microsoft, однако потом куда-то оттуда подевался.
Решение 2: удаление всех пакетов IE
dism.exe /Online /Get-Packages > 1.txt
Таким образом, именно в моем случае я нашел пакеты с именами:
Microsoft-Windows-InternetExplorer-Optional-Package
Названия пакетов можно выписывать, можно работать в параллельных окнах блокнота и командной строки, чтобы сразу копировать имя пакета и удалять его нижеприведенной командой, для особо продвинутых могу предложить написать скрипт, автоматизирующий эту рутину. Соответственно, в ручном режиме, найденные пакеты мы удаляем следующей командой:
dism.exe /Online /Remove-Package /PackageName: Microsoft-Windows-InternetExplorer-Optional-Package
где вместо имени (после параметра /PackageName: ) подставляете актуальное для вашей системы наименование пакета. Процедура удаления выглядит следующим образом:
Аналогичным образом мы проходимся по всему списку и удаляем все необходимые пакеты.
Решение 3: удаление проблемных пакетов по журналу CBS
dism.exe /Online /Remove-Package /PackageName: Microsoft-Windows-InternetExplorer-Optional-Package
,где вместо имени (после параметра /PackageName: ) не забывайте подставлять актуальное именно для вашей системы наименование пакета.
Решение 4: удаление всех пакетов IE (старый способ)
Когда ни один из вышеописанных методов не помогает, устранить ошибку Установка Internet Explorer не закончена, можно попробовать при помощи метода, заключающегося в удалении вообще всех пакетов, относящихся к установленной в системе в данный момент версии браузера Internet Explorer. Читатель может резонно заметить, что мы тоже самое уже проделывали в методе, описанном выше? А существенное отличие заключается в том, что в данном случае мы будет выполнять удаление при помощи старого пакетного менеджера под названием Диспетчер пакетов Windows (Package Manager, pkgmgr). Этот пакетный менеджер появился в Windows Vista, затем в Windows 7 функционировал вместе с DISM, а начиная с Windows 8 (и далее) его не рекомендуют к использованию. Вообще ситуация с существованием в системе нескольких утилит работы с пакетами характерна, похоже, только лишь для Windows 7. DISM и pkgmgr в Windows 7 представляют собой разные исполняемые файлы (разный код), но при этом Pkgmgr вызывает для некоторых своих задач DISM (является переходником), и работают они оба с единой базой пакетов/компонентов. Зная функциональные особенности продуктов Microsoft, понимаешь, что в ряде случаев эта разница может нам сильно помочь, однако надо учитывать, что это самый проблемный способ удаления пакетов IE, потому как зачастую приводит к необходимости дополнительной (ручной) работы по устранению возникающих в процессе удаления ошибок доступа к различным частям файловой системы/реестра. Но, не смотря на всю неоднозначность, в ряде случаев это единственный действенный метод привести систему к готовности к установке свежей версии Internet Explorer. Итак, для удаления всех пакетов IE выполним следующую команду с правами локального администратора :
FORFILES /P %WINDIR%\servicing\Packages /M Microsoft-Windows-IE*.mum /c «cmd /c echo Uninstalling package @fname && start /w pkgmgr /up:@fname /quiet /norestart»
FORFILES /P %WINDIR%\servicing\Packages /M Microsoft-Windows-InternetExplorer*.mum /c «cmd /c echo Uninstalling package @fname && start /w pkgmgr /up:@fname /quiet /norestart»
Приведенная серия команд удаляет из системы абсолютно все пакеты всех версий браузера Internet Explorer. Pkgmgr считается устаревшим средством и не рекомендуется к использованию в последних версиях Windows, поэтому надо бы переписать вышеприведенные команды на DISM.
В связи с ошибками обновлений Internet Explorer, в Сети встречается множество рекомендаций по удалению версий IE-пакетов ниже, чем устанавливаемая, так вот, поскольку данная серия команд работает по маске, она более универсальна и удаляет ВСЕ пакеты, относящиеся к браузеру. На ошибки доступа к определенным частям реестра можно не обращаться внимания. После завершения выполнения команды перезагрузить систему и попробовать запустить инсталлятор браузера Internet Explorer заново.
