понеділок, 13 липня 2009 р.

Переноси і типографіка українського тексту в HTML


Довго я розбирався з правилами переносів. Особливо якщо зважити на «ефект Матриці» ©, який був у цій справі вирішальним. Я давно подумав, що не варто винаходити велосипед, але довго відкладав дослідження того, як воно реалізовано в TeX. Насправді, проблема переносу є нетривіальною, про що свідчить дисертація. Але відповідні таблиці для української мови давно існують, отже, проблема в реалізації алгоритму на JavaScript. І я вже був почав думати, як його краще запрограмувати, коли з'явилася щаслива думка, що я, певно, не один про це подумав. І правда, виявилося, що є відкритий проєкт Hyphenator, який підтримує різні мови. Все, що потрібно, — це витягти таблиці для українських слів з TeX і перетворити на UTF-8.

Я, звичайно, не міг не прикрутити переноси до транслітератора і потестувати правила. Найкращими виявилися таблиці, що їх створив Андрій Швайка, але вони, на жаль, погано відділяли префікс від кореня. Тому довелося ще трошки помучити patgen. Коли я закінчу тестувати таблиці, відправлю їх розробникам, і вони будуть доступні на сторінці проєкту. А поки що, Hyphenator можна запускати звідси.

В принципі, приклад все пояснює, якщо зазирнути в HTML, але я розкажу окремо, як прикрутити переноси до блоґа на Blogger. Головною особливістю є те, що шаблон Blogger не дозволяє ставити атрибут lang у <html>, а без нього програмка просить користувача вказати мову руками при завантаженні сторінки, що не є круто. Розв'язується це вставлянням в розділ <head> шаблону
<meta content='uk' http-equiv='content-language'/>
Ми вказали основну мову, але це ще не все. Hyphenator переносить тільки ті розділи, які йому дозволено переносити. А саме: тільки те, що має клас hyphenate. Тому, якщо необхідно, щоб переносилися слова в дописах, необхідно додати цей клас у відповідний розділ шаблону, а також додати атрибут, що явно вказує мову. Для переносу дописів знаходимо postbody і виправляємо його так:
<div class='hyphenate' lang='uk'><data:post.body/></div>
Те саме треба зробити з усіма елементами, в яких ви хочете, щоб слова переносилися. Тепер додаємо скриптик, який, власне, все й робить:
<script src="http://tran.comyr.com/Hyphenator/Hyphenator.js" type="text/javascript"></script>
<script type="text/javascript"><!--
Hyphenator.config({displaytogglebox:false,minwordlength:4});
Hyphenator.run();
//-->
</script>
Змінну displaytogglebox можна поставити true, якщо ви хочете, щоб у правому верхньому кутку з'явилася кнопочка, яка дозволить користувачу відключати переноси.

Заодно я написав типограф, який, окрім переносів, ще розставляє типографські знаки за стандартом. Ця штука, сподіваюся, згодиться тим, хто хоче, щоб їхні коментарі в блоґах радували око. Принаймні я віднедавна коментую з переносами.

7 коментарів:

  1. Вчо­ра Олек­сій Гре­ков від­пра­вив свої таб­ли­ці в Hyphenator. Що ж, тим гір­ше для них. Мої на­ба­га­то кра­ще пе­ре­но­сять...

    Хто хо­че, мо­же взя­ти мої таб­ли­ці тут.

    ВідповістиВидалити
  2. Дякую, дуже корисна річ, Зробив переноси у дописах на своєму блозі, на другому також встановлю.
    Добре було б як встроїти типограф у форму для надсилання дописів, наприклад як додаток до браузера, гадаю у принципі таке можливо.
    Не зрозумів як підключити ваші таблиці переносів.

    ВідповістиВидалити
  3. Як­що ви за­пус­ка­є­те Hyphenator з мо­єї сто­рін­ки, він уже з мо­їми таб­ли­ця­ми. Як­що ви ска­ча­є­те йо­го зі сто­рін­ки проєк­ту, то від­по­від­ний файл тре­ба за­мі­ни­ти на мій.

    Що сто­су­є­ть­ся до­дат­ку до бра­у­зе­ра, то, ду­маю, за до­по­мо­гою GreaseMonkey це не­важ­ко зро­би­ти, але я ним не ко­рис­ту­ю­ся, то­му не бе­ру­ся. ;)

    ВідповістиВидалити
  4. Дякую, зрозуміло.
    GreaseMonkey досі не користувався, треба буде подивитися.

    ВідповістиВидалити
  5. Тим­ча­со­во ви­да­лив скрипт пе­ре­но­сів, бо пе­ре­став пра­цю­ва­ти від­жет рей­тин­гів. І з при­хо­ву­ван­ням тек­с­ту «під кат» (Чи­та­ти да­лі...) проб­ле­ма. Швид­ше за все по­в’я­за­не зі за­мі­ною кла­су post-​body entry-​content на post-​​body hyphenate.

    ВідповістиВидалити
  6. Так, з div я по­га­ряч­ку­вав. Кра­ще до­да­ти клас hyphenate до P. Мабуть, справді кілька класів краще не робити, дякую. Додав ще галочку як прив'язувати.

    ВідповістиВидалити