Можно ли включить авторасширение в HTML/CSS?

Мой клиент попросил включить авторасширение на этой странице: http://carlosdinizart.com/biography/, и я понял, что никогда не видел его сделанные на веб-странице.

Можно ли настроить авторасширение в HTML-документе только с помощью HTML/CSS? Если нет - каковы параметры?

Ответы

Ответ 1

CSS3 предоставляет некоторую поддержку для этого. Источник: http://drublic.de/blog/css3-auto-hyphenation-for-text-elements/ Вы можете проверить документацию w3c здесь: http://www.w3.org/TR/2011/WD-css3-text-20110901/#hyphenation

CSS3 добавляет шесть свойств в список полезной вещи. Это:

  • Самый важный из них - hyphens.
  • Вы можете добавить словарные файлы с помощью hyphenate-resource, чтобы браузер имел лучший шанс отобразить текст с правильной расстановкой.
  • hyphenate-before задает минимальное количество символов перед переносом.
  • hyphenate-after делает то же самое, что и hyphenate-before, но для символов после переносов.
  • hyphenate-lines определяет, сколько строк написано в виде дефисного слова максимум. с помощью hyphenate-character вы можете указать, какой HTML-объект следует использовать, например. \2010.

Основное свойство этого стека hyphens. Он принимает одно из трех значений: none, manual или auto. По умолчанию используется руководство, где вы можете установить дефисы через ­. auto он лучше для непрерывного текста, а слова становятся расколотыми, если это возможно и доступно. И none не переносится даже при наличии набора символов для возможного разрыва строки в определенном слове.

Update:

Информация о поддержке браузера здесь: http://caniuse.com/css-hyphens

Ответ 2

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

Ответ 3

Чтобы иметь дело с одной страницей с фиксированной шириной для текста, практическим шагом было бы добавить пару символов SOFT HYPHEN (U + 00AD), используя ссылку на сущность ­, если вам будет удобнее, чем ввести (невидимый) характер. Вы можете быстро узнать, какие слова нужно переносить, чтобы получить хороший результат.

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

Как минимум, вы можете просто поместить атрибуты lang=en class=hyphenate в тег <body> и следующий код в части head:

<script 
  src="http://hyphenator.googlecode.com/svn/tags/Version%204.0.0/Hyphenator.js">
</script>
<script>Hyphenator.run();</script>

Демо: http://bytelevelbooks.com/code/javascript/hyphenation.html (текст с гибкой шириной, с максимальной шириной, поэтому вы можете проверить его, изменяя ширину окна браузера).

Ответ 4

В настоящее время мой css для

есть

p   {
    font-style: normal;
    padding: 0;
    margin-top: 0;
    margin-left: 0px ;
    margin-right: .5em ;
    margin-bottom: 0;
    text-indent: 1em;
    text-align: justify;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    word-break:break-word;
    hyphens: auto;
    }

Это не работает для Chrome 39 на Mac. Известно, что не нужно работать в Opera. Работает для Firefox, iOS Safari.

Это НЕ БЕСПЛАТНО: узкие столбцы (менее 6 слов) уродливы, но в целом это делает внешний вид гораздо более похожим на правильно установленный тип.