QR CODE для записи

Переносы слов на веб-страницах

Мягкие переносы слов специальным HTML символом

Давным давно, когда птицы звонче пели, а трава была зеленее, я узнал о такой вещи, как «мягкие переносы» на веб-страницах. Делаются они достаточно просто — для этого достаточно расставить в местах, где может быть перенос, спец. символ ­.

Наш текст будет выглядеть примерно так:

Не на­чать ли нам, братья, по-ста­ро­дав­не­му скорб­ную по­весть о по­хо­де Иго­ре­вом, Иго­ря Свя­то­с­ла­ви­ча! Или да нач­нет­ся песнь ему по бы­лям на­ше­го вре­ме­ни — не по за­мыш­ле­нию Бо­я­но­ву! Ведь Бо­ян ве­щий ког­да песнь ко­му сло­жить хо­тел, то бел­кою ска­кал по де­ре­ву, се­рым вол­ком по зем­ле, си­зым ор­лом кру­жил под об­ла­ка­ми. По­ми­нал он дав­них вре­мен ра­ти — тог­да пус­кал де­сять со­ко­лов на стаю ле­бе­дей; ка­кую до­го­нял со­кол, та пер­вая песнь пе­ла ста­ро­му Яро­с­ла­ву, храб­ро­му Мсти­с­ла­ву, что за­ре­зал Ре­де­дю пред пол­ка­ми ка­сож­ски­ми, крас­но­му Ро­ма­ну Свя­то­с­ла­ви­чу. Бо­ян же, братья, не де­сять со­ко­лов на стаю ле­бе­дей пус­кал, но свои ве­щие пер­сты на жи­вые стру­ны воз­ла­гал; они же са­ми князь­ям сла­ву ро­ко­та­ли.

И вот что получается:

Не на­чать ли нам, братья, по-ста­ро­дав­не­му скорб­ную по­весть о по­хо­де Иго­ре­вом, Иго­ря Свя­то­с­ла­ви­ча! Или да нач­нет­ся песнь ему по бы­лям на­ше­го вре­ме­ни — не по за­мыш­ле­нию Бо­я­но­ву! Ведь Бо­ян ве­щий ког­да песнь ко­му сло­жить хо­тел, то бел­кою ска­кал по де­ре­ву, се­рым вол­ком по зем­ле, си­зым ор­лом кру­жил под об­ла­ка­ми. По­ми­нал он дав­них вре­мен ра­ти — тог­да пус­кал де­сять со­ко­лов на стаю ле­бе­дей; ка­кую до­го­нял со­кол, та пер­вая песнь пе­ла ста­ро­му Яро­с­ла­ву, храб­ро­му Мсти­с­ла­ву, что за­ре­зал Ре­де­дю пред пол­ка­ми ка­сож­ски­ми, крас­но­му Ро­ма­ну Свя­то­с­ла­ви­чу. Бо­ян же, братья, не де­сять со­ко­лов на стаю ле­бе­дей пус­кал, но свои ве­щие пер­сты на жи­вые стру­ны воз­ла­гал; они же са­ми князь­ям сла­ву ро­ко­та­ли.

Самое замечательное в этих мягких переносах — почти полная кроссбраузерность. Ну а минус — текст увеличивается в 2-3 раза. Конечно этот минус сейчас не столь актуален во времена терабайтных дисков и безлимитных каналов связи.

И тогда же, во времена мамонтов я задумался написать скриптик для переносов, однако ввиду отсутствия дикой необходимости так и не написал, да и поискать я как-то не удосужился всё по той же причине. Но, оказывается уже есть созданный плагин для WordPress — Hypho-o automatic hyphenation. Плагин доступен для скачивания на wordpress.org. Так же для нуждающихся в «автоматических мягких» переносах, но не работающих на WP, есть страничка для онлайн расстановки переносов от ком­па­нии Qlikworld (Спасибо топику на хабре). Пытливые умы думаю смогут адаптировать и сам плагин для своей любимой CMS.

Переносы слов на CSS3

Как видно, это всё было актуально еще 3-4 года назад. Многие и пытались «украсить» сайт переносами слов ради чего даже писали плагины. Некоторые, как я, просто задумывались об этом. Но время идет. Мезозойская эра закончилась, мамонты вымерли…ну почти вымерли 🙂 И в наш век информационных технологий пришли HTML5 и CSS3. И благодаря этим достижениям нанотехнологий, при поддержке разработчиков браузеров и HTML5/CSS3 стандартов — нам на помощь пришли CSS3 переносы строк.

Что же это за CSS3 переносы строк? Да это некая противоположность white-space. Теперь нам доступно новое CSS3 свойство hyphens.

Для того, чтобы переносы расставлялись сами, нам достаточно у необходимого параграфа (блока) указать:

hyphens: auto;

Конечно, не все тут так сладко. Многие браузеры до сих пор не поддерживают это свойство. А в русскоязычном сегменте дела обстоят хуже, чем в англицком сегменте. И на данный момент переносы работают только в Firefox’е и только с префиксои (если вы читаете эту запись с ОгнеЛиса, то должны были переносы слов во всех статьях блога). Но начало положено.

И если вы хотите, чтобы уже сейчас переносы работали в ОгнеЛисе, а в ближайшем времени и в других браузерах (когда они станут поддерживать переносы) — вы можете воспользоваться таким кодом:

p {
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	-o-hyphens: auto;
	-khtml-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

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

Более подробно о поддержке браузерами переносов можно увидеть в Google Code. На этой странице можно увидеть таблицу и языковую поддержу переносов в браузерами.

Для пессимистов

Сейчас очень популярна так называемая «Газетная верстка» (дизайн) и Адаптивный дизайн. Вот тут-то и будет очень востребованы переносы. А конкретнее — для узких столбиков. А в сочетание с Multi-column оно как нельзя необходимо.

Ссылки по теме:

Спецификация CSS3: Text (#white-space, #hyphenation), Multi-column