Прискорююча кнопка n назначена для пропусків при навігації по сторінкам. Пропуск для переходу на початок контента.

Даний документ є перекладом. У випадку будь-яких невідповідностей і помилок остання версія документу англійською мовою повинна розглядатися як офіційна. Першопочаткове авторське право належить W3C, як це вказано нижче.

Перекладач: Alexandr Shlapak (Олександр Шлапак)

s_gotoW3cHome Інтернаціоналізація
 

Розмітка і Стилізація Ruby

Аудиторія: шифрувальники XML та XHTML/HTML (використовуючи редактори або скрипти), розробники скриптів (PHP, JSP, і т.д.), шифрувальники CSS, і кожен хто хоче дізнатися як використовувати анотації ruby.

Ruby - маленькі анотації, які зображуються поряд із основним текстом. Це особливо корисно для Японського та іншого Східноазіатського контенту (ruby в Японській мові відома як Фуріґана).

Специфікація Анотацій Ruby забезпечує спосіб для відмітки тексту ruby, і прийнята у якості модуля XHTML 1.1. В CSS3 ведеться робота над механізмами для підтримки стайлінгу ruby тексту.

У цій статті ми познайомимо вас з основними механізмами, і обговорити сучасний рівень знань по відношенню до підтримки ruby.

Хто така Ruby?

На жаль, ruby не відноситься до гламурної жінки. Це більш прозаїчний технічний термін, який відноситься до певного типу анотацій пов'язаних з основним текстом. Назва 'ruby' походить від назви розміру шрифту (близько половини розміру нормального 10 піксельного шрифту), що використовується Британськими верстальниками.

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

У Японській мові, де ruby має називу Фуріґана, фонетичні транскрипції зазвичай з'являються в Хірагані вище горизонтального тексту і справа від вертикального тексту. Хоча ruby в Японській мові часто представлена Хіраганою, також іноді можна знайти анотації написані на Кандзі, Катакані (зокрема, у Японському 'Манга' коміксі) і Латинському тексті.

Фуріґана зазвичай з'являється під горизонтальним текстом, і зліва від вертикального тексту в тих рідкісних випадках, коли вона використовується, щоб виразити семантичну інформацію.

Приклад ruby в Японській мові.

Приклад ruby в Японській мові.

Використання ruby анотації для Японської мови не обмежене. Насправді воно не обов'язково обмежене і для будь-якого з Азіатських скриптів. Її можна використовувати як спосіб для анотації для багатьох різних застосувань, таких як тлумачення мови і анотацій.

Нижче на малюнку показані приклади ruby тексту, що використовує Латинську мову, Кандзі, і Катакану для анотації основного тексту.

Будь-який символ дійсний в ruby тексті і анотаціях.

Будь-який символ дійсний в ruby тексті і анотаціях.

Тут показано, Спрощені Китайські символи, що нижче під кожним символом містять анотації, що представлені піньїньськими транслітераціями.

Приклад ruby в Спрощеному Китайському скрипті.

Приклад ruby в Спрощеному Китайському скрипті

Такі анотації в Традиційній Китайській зазвичай використовують символи Бопомофо для визначення вимови, і скоріше анотації з'являються над основним текстом, він розташовується вертикально справа від кожного символу, незалежно від того чи основний текст розташовується вертикально або горизонтально.

Зверніть увагу, як звукові відмітки з'являються праворуч від стовпця алфавітних символів Бопомофо.

Приклад ruby в Традиційному Китайському скрипті.

Приклад ruby в Традиційному Китайському скрипті

Розмітка ruby

Є два аспекти при роботі з текстом ruby: по-перше, забезпечити структурну інформацію за допомогою розмітки, яка стосується ruby і її основного тексту, по-друге спрямувати презентаційні (стайлінг) питання, наприклад, чи довгий текст ruby перекриває сусідній основний текст, чи короткий ruby текст розташовується по центру або вирівнюється по лівому краю за більш довгим основним текстом і т.д. У цьому розділі ми розглянемо вираження структури за допомогою розмітки.

Рекомендація W3C щодо Ruby Анотацій (також доступні в Японській мові) описує розмітку яку можна використати для підтримки ruby.

Специфікація визначає два варіанти розмітки ruby: проста розмітка ruby та комплексна розмітка ruby.

Проста ruby

Проста розмітка ruby пов'язує одне написання ruby тексту із написанням основного тексту.

Проста розмітка ruby.

Проста розмітка ruby.

Приклад вище показує бажаний візуальний результат, а потім розмітку, що повинна це робити.

Ви хочете розмістити речення на Хірагані かみしばい поверх основного тексту 紙芝居, яке є частиною довшого речення. Анотація як правило, написана шрифтом невеликого розміру.

Перший крок - оточити як основний текст так і анотацію розміткою ruby. Тоді, в її рамках, додайте основний текст до елементу rb (основний елемент ruby), і анотацію до елементу rt (текст ruby), в такому порядку. От і все. Чи знає ваш клієнтський додаток як відобразити цю розмітку це вже інше питання, яке ми розглянемо пізніше.

Розмітка для цілого речення матиме такий вигляд:

<p>これは<ruby><rb>紙芝居</rb><rt>かみしばい</rt></ruby>です。</p>

Комплексна ruby

Комплексна розмітка ruby може встановити більш тісний зв'язок між анотаціями і основним текстом, і може об'єднати два тексти ruby із одним основним текстом. Давайте подивимося на це просто.

У той час як приклад простої розмітки ruby, що ми бачили раніше пов'язує все написання тексту анотації з усім написанням основного тексту, комплексна розмітка ruby дозволяє вказати, який біт анотації відноситься до якого символу в межах одного елементу ruby .

Комплексна розмітка ruby.

Комплексна розмітка markup.

Наведений вище приклад показує три символи в основному тексті 林和代 анотовані для вимови трьома рядками はやし, かず та . Кожна анотація чітко узгоджена з відповідним символом.

Для розмітки даних таким способом, що дозволяє нам досягти цього ми використовуємо два нові елементи rbc (основне вмістилище ruby), та rtc (вмістилище тексту ruby). У найпростішому випадку (як показано на слайді), кожен з цих елементів відповідно містить стільки ж елементів rb та rt. Таким чином, елемент rb і його відповідний елемент rt можуть ефективно використовуватися разом у парі.

Це аналогічно використанню елементів td всередині елементів tr в HTML таблицях.

Розмітка для цього, буде такою яка показана на слайді:

<ruby>
<rbc><rb>林</rb> <rb>和</rb> <rb>代</rb></rbc>
<rtc> <rt>はやし</rt><rt>かず</rt><rt>よ</rt> </rtc>
</ruby>

Є правило: проста ruby не має rbc або rtc елементів; комплексна ruby має rtc та rtc елементи.

Асоціації one-to-many. Ми можемо дізнатися трохи більше про це. На діаграмі нижче ми використовуємо той же приклад, але анотації розділені тільки на два написи: перший вище прізвище, , і другий над заданим ім'ям 和代. Іншими словами, ми пов'язували одне написання анотацій з кількома написаннями основних символів.

Асоціації one-to-many із комплексною розміткою ruby.

Асоціації one-to-many із комплексною розміткою ruby.

Це досягається шляхом застосування методу схожого на той, що використовувався при створенні таблиць в HTML. Другий і третій елементи rt стають одним цілим, при додаванні атрибуту rbspan що в даному випадку має значення №2.

Розмітка в даний час має наступний вигляд:

<ruby>
<rbc><rb>林</rb> <rb>和</rb> <rb>代</rb></rbc>
<rtc> <rt>はやし</rt><rt rbspan="2">かずよ</rt> </rtc>
</ruby>

Декілька анотацій. У нашому останньому прикладі комплексної анотації ruby ми показуємо як одночасно пов'язати основний текст із 2 анотаціями. Нижче, приклад у верхній частині ілюстрації показує це для Японської мови, де одна анотація написана над основним текстом, а інша нижче тексту.

Декілька анотацій з комплексной розміткою ruby.

Декілька анотацій з комплексной розміткою ruby.

На даному прикладі ми дотримуємося цього просто використовуючи тільки одну пару rb і rt. Що тут нового - це те, що ми маємо два елементи rtc всередині елемента ruby (але як і раніше тільки один елемент rbc).

Ось код:

<ruby>
<rbc><rb>民政局</rb></rbc>
<rtc><rt>みんせいきょく</rt></rtc>
<rtc><rt>ガバメント・セクシヨン</rt></rtc>
</ruby>

Ви не можете мати більше двох елементів rtc, пов'язаних з одним елементом rbc.

Відображення розмітки за замовчуванням

Специфікація Анотації Ruby не забезпечує нормативний текст про розміщення анотацій, залишаючи це для реалізації. Однак, є деякі інформативні пропозиції для клієнтських додатків щодо стилізації за замовчуванням. (Є також корисні властивості стилю, зазначені в CSS3 Модулі Ruby, які ми обговоримо в наступному розділі.)

Якщо реалізація буде слідувати порадам в специфікації, то ви можете очікувати, що розмір шрифту анотації бути близько половини висоти основного тексту, і для анотації в простій ruby з'являтиметься перед основним текстом. В цьому випадку, 'перед', це технічний термін, що використовується щоб звернутися до області вище нормальної лінії горизонтального тексту і області праворуч від лінії вертикального тексту чиї стовпці розвиваються справа наліво (наприклад вертикальний Китайський, Японський і Корейський текст). Ви також розраховує на те, що текст ruby матиме таке саме спрямування що і основний текст (тобто вертикальне або горизонтальне). Якщо є декілька анотацій для одного тексту, то ви можете очікувати, що перша з'явитися перед текстом, і друга після, тобто нижче горизонтального тексту і зліва від вертикального тексту чиї стовпці розвиваються справа наліво.

'Перед' означає ліворуч від рядка вертикального Монгольського тексту, відтоді як стовпці розвиваються зліва направо.

Візуальна ілюстрація 'перед' і 'після'.

Візуальна ілюстрація 'перед' і 'після'.

Це, ймовірно, дійсне для отримання очікуваних результатів для тексту на Японській мові, але в інших скриптах очікувана поведінка може відрізнятися. Специфікація зазначає, що, наприклад, Піньінь ruby зазвичай з'являється після основного тексту Китайською мовою. Потрібна буде додаткова підтримка стилів, щоб досягнути цього в простій ruby.

Крім того, специфікація звертає вашу увагу на той факт, що Бопомофо ruby в Китайському тексті зазвичай з'являється праворуч від символів в горизонтальному тексті, але не дає поради як це змінити.

Примітка: Інформацію про форматування ruby в Японському контенті можна знайти в JIS X 4051 ("Правила форматування для Японських документів" (日本語文書の組版方法) JIS X 4051:2004, Японська Асоціація Стандартів, 2004 (в Японській мові)).

Ми також побачимо (потім) що є функції відступу визначені в стандарті, які дозволяють послідовно відображати основний текст і ruby на клієнтських додатках, які ще не обробляють розмітку.

Механізм відступу

Ми обговорювали подання, а є ще одна частина розмітки яку ми ще не дослідили. Якщо клієнтський додаток не розуміє як відобразити текст ruby, він просто відобразить основний текст, який відразу слідує після тексту ruby, використовуючи той самий розмір шрифта (як показано на слайді). Це заплутає користувача.

Елемент rp (круглі дужки ruby) дозволяє вам вказати символи які з'являться навколо простого тексту ruby, якщо клієнтський додаток не підтримує представлення ruby. Швидше за все, ви захочете використовувати тут дужки, але тут доступні будь-який символ або послідовність символів.

Ruby без rp розмітки.

Ruby без rp розмітки.

Якщо додати елементи rp перед і після тексту ruby як у цьому прикладі, то коли клієнтський додаток не в змозі буде розпізнати текст ruby він з'явиться в дужках, що є більш прийнятним. Клієнтські додатки що не знають як обробити ruby автоматично ховатимуть контент елементів rp оскільки вони показують ruby у відповідному місці.

<ruby>
<rb>紙芝居</rb>
<rp>(</rp>
<rt>かみしばい</rt>
<rp>)</rp>
</ruby>

Ми можемо використовувати символ всередині елемента rp. Наприклад, Японська мова іноді використовує різні символи для круглих дужок.

Ruby із rp розміткою.

Ruby із rp розміткою

Зауважимо, що цей механізм відступу не доступний для комплексної ruby.

Стиль Ruby

CSS3 Ruby Модуль запроваджує ряд властивостей для опису розміщення тексту ruby по відношенню до основного тексту. Зверніть увагу, що ця специфікація ще не завершена, так що цей розділ прагнутиме дати вам уявлення про те, що буде можливо за допомогою цієї специфікації, а не вичерпно перераховує всі можливості.

Ми використовуватимо слова 'перед' та 'після' з тим самим значенням як описано раніше.

Є три основні властивості: ruby-position, ruby-overhang, та ruby-align.

Теми, які ми не будемо обговорювати тут, включають:

Положення ruby

Перша властивість, ruby-position, дозволяє вам вказати де повинна з'явитися ruby по відношенню до основного тексту.

ruby-position може мати наступні властивості: before (перед), after (після), inline (вбудована), та right (праворуч). Ви можете застосувати цей стиль до елементу ruby.

Для розміщення тексту ruby вище горизонтального основного тексту або праворуч від вертикального тексту, використовуйте ruby-position: before. Це поведінка за замовчуванням.

Ruby-position: before

Ruby-position: before

Для розміщення тексту ruby нижче горизонтального основного тексту або зліва від вертикального тексту, використовуйте ruby-position: after.

Ruby-position: after

Ruby-position: after

Наприклад, якщо ваш документ містить Китайський текст з Піньінь ruby, і ви хочете щоб вся ruby з'являлася нижче основного тексту, ви маєте включити наступне у ваші CSS призначення:

ruby { ruby-position: after; }

Якщо ви хочете щоб текст ruby з'являвся вбудованим, то ви повинні використовувати ruby-position: inline. Зверніть увагу, що через помилки, це не пояснюється в поточній версії специфікації CSS3 Ruby.

Ruby-position: inline

Ruby-position: inline

Дужки на малюнку вище повинні бути забезпечені в розмітці rp.

Вирівнювання ruby

Властивість ruby-align спрямовує відносне вирівнювання ruby і основного тексту коли один довший ніж інший. В основному ефект застосовується до того що коротший або текст ruby або основний текст. Це набуває таких значень: auto, left, start, center, end, right, distribute-letter, distribute-space, та line-edge.

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

Якщо ви приміняєте auto поведінка залишається до реалізації, але рекомендована поведінка (описана стандартом JIS 4051) - це приміняти distribute-letter до Китайських, Японських або Корейських символів написаних в повну ширину, але приміняти center до інших. Це поведінка за замовчуванням.

ruby-align: distribute-letter поширюється на коротший текст застосовуючи відстань між символами так що початкові краї першого ruby і основного символа вирівнюються, як кінцеві краї останнього ruby і основних символів.

Ruby-align: distribute-letter

Ruby-align: distribute-letter

ruby-align: distribute-space робить те ж саме, що й ruby-align: distribute-letter, але невеликий простір залишається перед першим і після останнього символа.

Ruby-align: distribute-space

Ruby-align: distribute-space

ruby-align: center вирівнює центри ruby і основного текстів.

Ruby-align: center

Ruby-align: center

ruby-align: left та ruby-align: start є синонімами, і результатом є вирівнювання початку як ruby так і основного тексту.

Ruby-align: left / start

Ruby-align: left / start

ruby-align: right та ruby-align: end є синонімами, і результатом є вирівнювання кінця як ruby так і основного тексту.

Ruby-align: right / end

Ruby-align: right / end

Виступ ruby

Якщо текст ruby ширший ніж основний текст, то ви можете вказати чи виступає він за будь-який оточуючий основний текст чи ні, і на скільки саме він виступає, використовуючи властивість ruby-overhang. Це набуває таких значень: auto, start, end, та none.

Щоб дозволити тексту ruby перекрити оточуючі основні символи з обох сторін використовуйте ruby-overhang: auto. Це залежить тільки від прийняття рішення скільки перекриттів дозволити, але стандарт JIS 4051 рекомендує максимальну ширину символу ruby. Реалізація також може примінити це вибірково в залежності від типу символа - для цього є правила в стандарті JIS.

Це значення за замовчуванням.

Ruby-overhang: auto

ruby-overhang: start тільки дозволяє тексту ruby виступати за попередні основні символи.

Ruby-overhang: start

ruby-overhang: end тільки дозволяє тексту ruby виступати за наступні основні символи.

Ruby-overhang: end

ruby-overhang: none запобігає будь-які виступи.

Ruby-overhang: none

Виконання ruby

Специфікації

Специфікація розмітки Анотації Ruby в Травні 2001 року стала Рекомендацією W3C, так що це завершена робота.

Розмітка анотації ruby не діє в HTML 4 або XHTML 1.0 документах. Тим не менш, специфікація є одним з модулів, що складають XHTML 1.1. Також очікується, що вона буде одним з модулів в XHTML 2.0, яка знаходиться в розробці.

Робота робилася Робочою Групою Набору Інтернаціоналізованих Тегів (ITS) в W3C щоб зробити словник розмітки який розробники схем могли б використати для підтримки інтернаціоналізації і локалізації і швидше за все, включити розмітку ruby.

14 Травня 2003 року модуль CSS3 Ruby був переміщений до Кандидатських Рекомендацій, але досі потребує редагування. Як тільки текст буде готовий треба буде знайти деякі реалізації, створити і примінити тести щоб перемістити специфікацію до Пропонованого і потім повністю Рекомендованого статусу.

Реалізація статуту

Специфікація розмітки анотації ruby визначає два рівня відповідності. Реалізації можуть підтримувати тільки просту розмітку ruby, або одночасно просту і комплексну розмітку.

Internet Explorer 5+ підтримує просту розмітку ruby в різних типах документів. Хоча фактична реалізація є не зовсім тим самим що й специфікація, вона досі робить правильні речі з стандартною розміткою. Це означає, що при поданні він поміщає текст ruby над основним текстом і видаляє будь-які символи в елементах rp. Так як ця розмітка не є стандартом для HTML або XHTML 1.0, ми не можемо рекомендувати її вам для використання для цих форматів (ваші сторінки більше не перевірятимуться). Тим не менш, проста ruby також підтримується в XHTML 1.1 документах, де її використання є дійсним.

W3C браузер Amaya підтримує відображення як простої, так і (в значній мірі) комплексної ruby.

Існує розширення для таких браузерів, як: Mozilla, Netscape 7 і Firefox що підтримує як просту так і комплексну ruby, включаючи rbspan, для сторінок, які обслуговуються як "application/xhtml+xml" (а не як "text/html"). Тим не менш, місце завантаження попереджає, що:

"Інколи це розширення спричиняє помилку, коли ви показуєте спливаючі меню, завантажуєте веб-сторінки, або працюєте з вкладками, тому що воно вторгається в операції пов'язані з завантаженням сторінок. Будь ласка, не використовуйте його, у разі якщо ви хотіли б використовувати стабільний браузер"

Masayasu Ishikawa також написав статтю, що пропонує деякі обхідні шляхи для подання простої ruby в Mozilla/Firefox, Safari і Opera 8-ї версії.

Є деякі тести для простої і комплексної розмітки ruby на сайті W3C.

Internet Explorer також забезпечує дуже обмежену підтримку для деяких властивостей CSS3 Модуля Ruby, але не завжди використовує те саме значення властивості що зазначене в специфікації. В іншому випадку нині вам навряд чи вдасться знайти підтримку для цих властивостей - що не дивно, так як специфікація все ще не є рекомендацією.

Розкажіть нам про те, що Ви думаєте.

Підписатися на RSS джерело.

Нові джерела

Новини головної сторінки

Twitter (Новини головної сторінки)

‎@webi18n

Додаткові матеріали

Автор: Richard Ishida, W3C. Перекладач: Alexandr Shlapak (Олександр Шлапак).

Допустимий XHTML 1.0!
Допустимий CSS!
Кодування UTF-8!

Переклад Англійського контенту від 2005-07-21. Переклад останнього оновлення 2011-08-24 15:00 GMT

Для перегляду історії внесення змін до перекладу натисність article-ruby в блоге i18n.