misc/class
lib/jquery_pnotify, lib/moment, lib/lodash, misc/notification, site/engine, misc/social
if( $.browser.msie && $.browser.version <= 8 ) include('lib/respond'); $._social.__cfg = {"init":[{"service":"basic"},{"fb_app_id":"1997094873850041","service":"fb"},{"vk_app_id":"2978320","service":"vk"},{"service":"twi"}],"like":[{"service":"fb"},{"service":"vk"},{"via":"","channel":"","hash_tag":"","service":"twi"}]}; window._SiteEngine = new classes.SiteEngine( { user_id: 0, controller: 'content_article', action: 'view', content_css_version: '1459538664', social_enabled: 0} );

Faiwer
Блог web-программиста

Переносы в тексте

 — 
24 ноября 2015 11:10

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

Итак. Что мы имеем? Мы имеем css3 свойство hyphen: auto. Но довольно унылую поддержку. Во-первых его не умеет ни Chrome, ни его клоны. Во-вторых его не умеет Firefox под linux. В третьих (в чём я не уверен) поддержка идёт на уровне встроенных словарей. Т.е. если вам потребовалась поддержка переносов в, к примеру, казахском тексте, вас снова ждёт облом. Но само свойство хорошо. В идеале вбив его можно забыть про все проблемы, ибо браузер сам их порешает.

Что у нас есть ещё вналичии? Есть такие опции как word-break, word-wrap, overflow-wrap, line-break. К сожалению никакая комбинация этих свойств не позволяет добиться нормальных переносов в таблице, которую перекашивает, как раз из-за отсутствия этих переносов. Например вы можете добиться вот такого вот результата:

21018,8 ― это цельное выражение, которое было по-умному разбито на много строк. Или, например вот так:

Один вариант чудесатее другого. В конечном счёте вы придёте к &shy;. Это специальный непечатный символ, который можно расположить в нужной части слова, и тогда браузер, при необходимости, воспользуется им и сделает полноценный перенос с дефисом. Т.е. если подготовить всё руками, то браузер сдюжит. Работает даже в IE8. Заместо &shy; вы можете воспользоваться \u00AD, что было удобнее в моём случае.

Но как у нас с автоматизацией? Ну… как минимум есть такая JS-библиотека ― Hyphenator. В неё уже встроена поддержка десятков 3 языков. Работает довольно добротно. Но она опирается не на словари, а на некие LaTeX правила. Я не вникал к детали. Т.е. по сути идеальность и соответствие правилами не гарантируется. Однако довольно добротный результат библиотека выдаёт. Если вы не боитесь нашествия grammar nazi, можно смело применять.

А что с поддержкой казахского языка? Его нет. При желании и соответствующих навыках можно добавить самому. Я выбрал примитивный вариант ― сделал кальку на основе русского варианта. Просто расширил русскую конфигурацию необходимыми буквами, задав им соответствия тем буквам, которые уже есть в нерасширенной кирилице. Для этого в библиотеке есть поддержка свойства charSubstitution. Результат выглядит как-то так:

Теги:
JavaScript CSS Переносы Hyphenator
Комментарии
Оставить комментарий
Оставить комментарий:
Отправить через:
Предпросмотр
modules/comment
window._Comment_content_article_121 = new classes.Comment( '#comment_block_content_article_121', { type: 'content_article', node_id: '121', user: 1, user_id: 0, admin: 0, view_time: null, msg: { empty: 'Комментарий пуст', ask_link: 'Ссылка:', ask_img: 'Ссылка на изображение:' } });