Перенос слов на jQuery

Денис Левченко

Руководитель

Перенос слов на jQuery

Перено́с в типографике — разрыв части текста (слова, формулы и т. п.), при котором её начало оказывается на одной строке, а конец — на другой.

Основная функция переноса слов — эстетическая. Если не применять переносы, то некоторые строчки оказываются слабо заполненными. Кроме того, текст с переносами занимает меньше места (ru.wikipedia.org).

Поддержка

На данный момент (11.01.2010), мягкие переносы (­ или ­) поддерживаются всеми популярными браузерами — FireFox (начиная с версии 3), Opera (начиная с версии 7.2), Internet Explorer (начиная с версии 5.5) и некоторыми другими:

IE 5.5 (+) FF 2 FF 3.0 (+) Safari 3.0 Win (+) Chrome (+) Opera 7.2 (+) Konqueror 3.5.7
Да Нет Да Да Да Да Да

Кстати, ошибка в «БагТрэкер» Мозиллы о не правильной интерпретации мягкого переноса (­) была занесена еще в июне 1999 года. На протяжении 9-ти лет в комментариях к этой ошибке обсуждалось, почему ее нельзя исправить «быстро» ;) и в итоге ошибка продолжала существовать до июля 2007.

Комментарии писались разные, был даже такой — «This is a cry of frustration» (Это крик отчаяния). В нём пользователь обвиняет англоговорящих разработчиков браузера в том, что они не думают о людях, которые говорят на других языках (немецком, венгерском, польском, норвежском, шведском и т.д.). По его мнению, в этих языках чаще всего встречаются длинные слова, которые, в свою очередь, без использования переносов, делают восприятие информации — не удобным и портят внешний вид страницы.

После такого «вопля души» один из разработчиков пообещал, что ошибка будет исправлена в новой версии браузера (FireFox 3), и попросил «воздержаться от дальнейших комментариев».

Приступим

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


(function($) {
    $.dvsHyph = {
        options: {
            shy: $('<i>&shy;</i>').html(),
            spec: '[йьъ]', //"специальные" буквы
            vovel: '[аеёиоуыэюя]', //гласные буквы
            consonant: '[бвгджзклмнпрстфхцчшщ]', //согласные буквы
            letters: '[ьъйаеёиоуыэюябвгджзйклмнпрстфхцчшщъь]',
            rules: []
        },
        run: function(options) {
            var o = $.dvsHyph.options;
            with(o) {
                rules = [ //набор правил (алгоритм)
                    [consonant + vovel, vovel + letters],
                    [vovel + consonant, consonant + vovel],
                    [consonant + vovel, consonant + vovel],
                    [vovel + consonant, consonant + consonant + vovel],
                    [vovel + consonant + consonant, consonant + vovel],
                    [vovel + consonant + consonant, consonant + consonant + vovel],
                    [spec, letters + letters]
                ];
            };
            
            return this.each(function() {
                var t  = $(this);
                var text = t.html();
                
                for (var i = o.rules.length - 1; i >= 0; i--) {
                    var r = o.rules[i];
                    var regexp = new RegExp('(' + r[0] + ')(?=' + r[1] + ')', 'gi');
                    text = text.replace(regexp, '$1' + o.shy);
                }
                t.html(text).css('text-align', 'justify');
            });
        }
    };
    
    $.fn.hyph = $.dvsHyph.run;
})(jQuery);

Смотрим, что получилось

В один прекрасный вечер не менее прекрасный экзекутор, Иван Дмитрич Червяков, сидел во втором ряду кресел и глядел в бинокль на «Корневильские колокола». Он глядел и чувствовал себя на верху блаженства. Но вдруг... В рассказах часто встречается это «но вдруг». Авторы правы: жизнь так полна внезапностей! Но вдруг лицо его поморщилось, глаза подкатились, дыхание остановилось... он отвел от глаз бинокль, нагнулся и... апчхи!!! Чихнул, как видите. Чихать никому и нигде не возбраняется.

Без переносов

В один прекрасный вечер не менее прекрасный экзекутор, Иван Дмитрич Червяков, сидел во втором ряду кресел и глядел в бинокль на «Корневильские колокола». Он глядел и чувствовал себя на верху блаженства. Но вдруг... В рассказах часто встречается это «но вдруг». Авторы правы: жизнь так полна внезапностей! Но вдруг лицо его поморщилось, глаза подкатились, дыхание остановилось... он отвел от глаз бинокль, нагнулся и... апчхи!!! Чихнул, как видите. Чихать никому и нигде не возбраняется.

<p id="hyphenation">В один прекрасный вечер...</p>

<script>
    $(function() {
        $('#hyphenation').hyph();
    });
</script>

Вывод

На данном примере было продемонстрировано расширение библиотеки jQuery с помощью нового метода обёртки «.hyph()». Также текст стал смотреться красивее, что будет особо заметно при наборе узких колонок.

Похожие посты

Мы подобрали посты, которые могут быть вам интересны

Комментарии

Тут без вас никак. Поделитесь с нами вашими мыслями

Горячие вакансии