Новые свойства CSS3 для обработки текста и обёртки слов

[buddah]

Мой вольный перевод статьи Луи Лазариса. Возможно тем, кто регулярно перечитывает спецификации, эта тема уже давно знакома, но я впервые вижу (кроме text-overflow) эти свойства. Поэтому, думаю, статья заинтересует и большинство других.

Примерно полтора года назад я писал о свойстве word-wrap. В статье говорилось том, что это новое свойство, которое есть в CSS3 и отсутствует в CSS 2.1, и что оно поддерживается почти всеми браузерами, включая старые IE.

Ну что ж, теперь все изменилось. Я это заметил, пока проводил исследования для своего сайта CSS3 Click Chart. Свойство word-wrap было удалено из спецификации CSS3, а вместо него туда добавили другие схожие свойства.

Text-Wrap

Свойство text-wrap "определяет режим обтекания текстом". Ну что ж, это описание нам мало о чем говорит, так что давайте присмотримся внимательней к параметрам свойства.

normal

Параметр по умолчанию для text-wrap. Это то, что мы видим когда не заданы никакие параметры обтекания текста. Обычный элемент с текстом внутри.

none

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

avoid

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

Поддержка браузеров: пока нет.

Overflow-Wrap

Свойство overflow-wrap сейчас пришло на замену устаревшего word-wrap. Его параметрами являются значения "normal" или "break-word" - те же значения, что были у word-wrap.

Это свойство, как и его предок, вызывает, как это называет спецификация, "вынужденную обёртку". Спецификация объясняет: "Это свойство определяет будет ли перенос осуществляться внутри слова, чтоб предотвратить переполнение, когда строка слишком длинная и не помещается внутри строчного элемента."

Спецификация также поясняет, что если text-wrap принимает значение "none", то свойство overflow-wrap не будет иметь никакого эффекта. Кроме того, слово не будет иметь переноса. Подробнее о переносах далее.

Поддержка браузеров: пока нет.

Line-Break и Word-Break

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

Как говорится в спецификации: "Хотя в английском и можно переносить строки в местах пробелов либо знаков препинания, но не все языки имеют пробелы и знаки препинания." В этих системах письменности "возможность разрыва строки основана на границах символа, а не слова". Таким образом от разрыва строк приходится отказываться в определенных комбинациях символов.

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

Поддержка браузерами: пока нет.

Text-Overflow

Свойство text-overflow определяет, как обрабатывать текст, который выходит за пределы родителя, когда для родителя задано какое-то иное значение переполнения, отличное от overflow: visible. Оно принимает следующие значения:

clip

С этим значением (по умолчанию)текст будет обрезан и его часть будет невидимой. Сейчас это происходит по умолчанию во всех браузерах. Имейте ввиду, чтобы правило работало - текст должен быть внутри элемента, который по той или иной причине не разрешает естественный разрыв строки.

ellipsis

При таком значении текст будет тоже обрезаться, но тот факт, что этот текст неполный, будет обозначаться многоточием ("...")

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

Поддержка браузерами: IE6+, Firefox 7+, Chrome 1+, Safari 1.3+, Opera 11+

Hyphens

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

none

Это значение "говорит" браузеру никогда не расставлять переносы, даже если определены точки разрыва.

manual

Это значение по умолчанию. Браузер не будет вставлять перенос, пока не увидит символ переноса. На самом деле вы можете сами задать дефис с помощью символа "мягких переносов" (soft hyphenation character), который внутри слова выглядит как hy­phens.

auto

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

Поддержка браузерами: IE10+, Firefox 6+ (обоим нужны вендорные префиксы)

Заключение

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

P.S.если честно я до сих пор не осознал в полной мере свойство hyphens. Поэтому могут быть ошибки в переводе.

Edited January 28, 2012 by buddah

[SelenIT]

Hyphens — это авторасстановка переносов, как в ворде. Недавно на хабре как раз была статья с примерами. Насколько я понял, none означает "не делать переносов никогда", manual — только если в слове явно стоит ­ (в принципе, как всегда было раньше), auto — делать переносы самому везде, где получается, по встроенному алгоритму для текущего языка (заданного атрибутом lang или по дефолту).

[buddah]

SelenIT, спасибо.

[SelenIT]

Упс, не заметил в начале...

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

Ну что ж, теперь все изменилось. ... Свойство word-wrap было удалено из спецификации CSS3, а вместо него туда добавили другие схожие свойства.

....., ..... и ..... в ..... .....! Я думал, со времен "вывернутой наизнанку" боксовой модели W3C наконец повзрослели и вылечились от синдрома отмораживания ушей назло маме дяде Билли. И нате вам о5 25...

<fantasai> http://dev.w3.org/csswg/css3-text/#word-wrap

fantasai: It was suggested that word-wrap be an alias for "overflow-wrap" (which is a better name). If we do that, how is it done?

TabAtkins: This is the same issue with object-fit and image-fit, right?

fantasai: Theoretically yes, but the impls that did image-fit were printers that didn't have JS, so you couldn't introspect and it wasn't very widespread anyway. It didn't matter how they accomplished the aliasing.

fantasai: Also, Alex brought up that "word-wrap" has existed for a long time and there's a lot of documentation for it. if we change that, will that hurt authors?

szilles: Any way we can find out how many docs use word-wrap?

???: A lot of Word exports.

fantasai: A lot of them are using it to work around the lack of pre-wrap.

fantasai: If you cross out those cases, likely very few.

plinss: every time I've seen someone look at this, they've been confused and think it should be controlling text-wrapping. So I think it's worth fixing.

discussion about what aliasing means

florian: We have to be very specific about whta aliasing means. If you query for one of the names, does it grab the value when specified with the other name?

plinss: We'd just define it as "overflow-wrap" and say "browsers may, for legacy reasons, accept 'word-wrap' with the same meaning".

dbaron: For this sort of property, I'm not too interested about the effect on JS.

RESOLUTION: Rename word-wrap to overflow-wrap, add a note that browsers may accept word-wrap.

По-моему "оборачивать-слово" куда лучше отражает смысл "разрывать длинные слова, чтоб они влезли в ширину, или нет", чем "оборачивать-переполнение" (второе лично у меня вообще с переполнением по вертикали ассоциируется). Да и писать меньше. Ну нафига, нафига менять шило (которое, к тому же давно работает) на какое-то невнятное мыло?..

Эх, Элика (fantasai)... нет на тебя батюшки из того анекдота

[s0rr0w]

....., ..... и ..... в ..... .....! Я думал, со времен "вывернутой наизнанку" боксовой модели W3C наконец повзрослели и вылечились от синдрома отмораживания ушей назло маме дяде Билли.

Расслабся, из присутствующего народа там адекватен только D.Baron, остальные вызывают удивление. fantasai, кстати, из них приятно выделяется. Может потому что девушка.

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