Небольшой плагин для автоматической расстановки переносов строк в HTML для русского текста
Делая сайт с адаптивным дизайном, столкнулся со следующей проблемой — на небольших экранах слова переносились не очень красиво. В поисках решений есть множество вариантов, но подразумевают либо ручную правку текста и вставкой спецсимвола мягкого переноса «­» или использование css свойства hyphens, за счет которого используются возможности браузеров для переноса строк, но оно поддерживается не всеми браузерами. Решение было найдено в виде простого плагина, описание которого в статье.
Для решения проблемы нашелся небольшой плагин для jQuery, который автоматически подставляет символ «мягкого» переноса строки «­» в русском тексте.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | jQuery.fn.hyphenate = function() { var all = "[абвгдеёжзийклмнопрстуфхцчшщъыьэюя]", glas = "[аеёиоуыэю\я]", sogl = "[бвгджзклмнпрстфхцчшщ]", zn = "[йъь]", shy = "\xAD", re = []; re[1] = new RegExp("("+zn+")("+all+all+")","ig"); re[2] = new RegExp("("+glas+")("+glas+all+")","ig"); re[3] = new RegExp("("+glas+sogl+")("+sogl+glas+")","ig"); re[4] = new RegExp("("+sogl+glas+")("+sogl+glas+")","ig"); re[5] = new RegExp("("+glas+sogl+")("+sogl+sogl+glas+")","ig"); re[6] = new RegExp("("+glas+sogl+sogl+")("+sogl+sogl+glas+")","ig"); return this.each(function() { var text = jQuery(this).html(); for (var i = 1; i < 7; ++i) { text = text.replace(re[i], "$1"+shy+"$2"); } jQuery(this).html(text); }); }; |
Оформлен он как плагин для jQuery, но ничего не мешает переписать его под чистый JS.
Использовать его достаточно просто:
1 | jQuery('.text').hyphenate(); |
Результат:
Текст до:
Текст после:
Комментарии к Небольшой плагин для автоматической расстановки переносов строк в HTML для русского текста (11)
Афанасьев Андрей
Добрый день, подскажите как его подключать. Я создал файл hephen.js с кодом скрипта, подключил его в шаблоне, в head вставил jQuery(‘.text’).hyphenate();.
Не чего не работает, подскажите как правильно делать?
Stanislav
Добрый. Вы проверяли работу плагина на блоке с классом .text? Т.е. в данном случае взаимодействие будет на текст внутри Текст
Афанасьев Андрей
Проверил только что. Не работает. Может я не правильно подключил скрипт.
Stanislav
Нужна ссылка на неработающий вариант, так не разобраться. jQuery, надеюсь, подключен? В консоли ошибок javascript нет?
Афанасьев Андрей
Чуть попозже я дам ссылку, когда сайт создам.
Stanislav
Ок. Ну и последнее, код запускать после загрузки документа:
jQuery(function() {
jQuery(‘.text’).hyphenate();
})
Афанасьев Андрей
Вы можете для новичков написать статью, как правильно подключать и где. Например я в Joomla пытался подключить. Не вышло.
Я бы был очень благодарен за данную статью.
Stanislav
Увы, но со временем сейчас все сложно. Тут ничего сложного нет, подключаем jQuery, подключаем кастомный js скрипт, в котором прописываем плагин из статьи + код:
jQuery(function() {
jQuery(‘.text’).hyphenate();
})
Вот и все. Специфику подключения в разных CMS лучше смотреть в обучающих материалах на профильных ресурсах.
Афанасьев Андрей
Ясно, спасибо.
Афанасьев Андрей
Не все даже знают, как правильно подключать скрипты.
Stanislav
Так можно бесконечно писать. Не все знают как включать компьютер 🙂 Если люди не знают как подключать скрипты, то лучше воздержаться от работы с jQuery до момента изучения таких вещей.