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

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

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

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

CSS3 та Міжнародний Текст

Аудиторія: автори HTML/XHTML та CSS контенту, які хочуть отримати загальне уявлення про те, що їх чекає в майбутньому у зв'язку з впровадженням підтримки нелатинського тексту в CSS. Стаття передбачає, що читач має базові знання CSS.

В даний час модулі CSS3 перебувають в стадії розробки і в майбутньому представлять велику кількість властивостей, призначених для підтримки нелатинського тексту, від підтримки вертикального скрипту до вирівнювання Кашіди по ширині, від розташування ruby до нумерації списку. Ця стаття дасть вам уявлення про деякі з властивостей, які розробляються і обговорюватиме те, як ви можете допомогти втілити ці розробки в життя.

Стаття не розкриватиме вам усі властивості для підтримки міжнародного тексту, які планують включити в CSS3. Вона дасть вам уявлення того, що буде, так що ви зможете побачити потенційні вигоди.

Жодна зі специфікацій, які ми будемо тут обговорювати ще не завершена.

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

Списки

Спосіб нумерації елементів в списку залежить від скрипту. В CSS2 були вказані дев'ять нелатинських систем нумерації. Сюди входять: нижня грецька, єврейська, вірменська, грузинська, CJK (Китай Японія Корея)-ідеографічна, хірагана, катакана, хірагана-Іроха, катакана-Іроха. На жаль, клієнтські додатки не приміняють всі ці системи, і, зважаючи на частину своєї місії - представляти snapshot (знімок) поточного використання, специфікація CSS 2.1 знижує це число до двох: вірменська, грузинська.

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

Треба сказати, що очікувана поведінка для цих параметрів також була зазначена погано.

Значення list-style-type в CSS 2 та CSS 2.1

Значення list-style-type в CSS 2 та CSS 2.1.

Модуль Списків CSS3 в даний час вказує майже 70 нелатинських схем нумерації списків, і забезпечує набагато точніші правила їх використання. (однак, якщо ви хочете уникнути скорочення цього число, то не втрачайте можливість, і скажіть про це! Розробники, як правило, час від часу задають собі запитання: а чи потрібна мені підтримка такої великої кількості можливостей?)

list-style-type в CSS3

list-style-type в CSS3

Текст

Напрямок тексту

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

Ключові параметри тут це: напрямок тексту в блоці (block-progression), напрямок вбудованого тексту, та орієнтація гліфа.

Властивості напрямку тексту.

Властивості напрямку тексту.

Напрямок block-progression дозволяє вам вказати напрямок в якому будуть поширюватися текстові рядки. Для горизонтального тексту доцільно було б використовувати напрямок зверху вниз, оскільки рядки поширюються зверху вниз. Для вертикального Китайського, Японського та Корейського текстів, нормальним буде напрямок - справа наліво, оскільки рядки в таких текстах поширюються з правої до лівої частини сторінки або блоку. Напрямок зліва направо був би доцільним для Монгольського скрипту, який також вертикальний, але в ньому ви починаєте читати з верхньої лівої позиції.

В рамках даного рядка повинна бути можливість вказати напрямок вбудованого тексту. Для Арабського скрипту та Івриту був би доцільним напрямок справа наліво. Це має бути інтерпретовано по відношенню до напрямку тексту в блоці.

Властивість writing-mode була запропонована в якості раціонального способу, який поєднує в набір спільних комбінацій напрямок тексту в блоці та напрямок вбудованого тексту.

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

До більш складніших аспектів напрямку тексту належить питання: як забезпечити найкращий для користувача спосіб підтримки вбудованого тексту в вертикально встановлених параграфах. В даний час Робоча Група CSS обговорює те, як це має працювати (Травень 2006 року).

Розрив рядка

Тип скрипту впливає на очікувану поведінку тоді, коли рядки з текстом переносяться - особливо він впливає на усунення пробілів навколо розривів рядків у коді.

Китайський та Японський скрипти не розмежовують слова та пробіли, і переносяться за принципом символ-за-символом. Проте, є деякі правила (так звані правила kinsoku в Японській мові), які забороняють появу певних символів (переважно розділових знаків) на початку рядка, та інші, які забороняють появу певних символів в кінці рядка.

Тайський скрипт використовує пробіли для того, щоб розмежовувати швидше фрази, аніж слова, і зазвичай в реченні не використовує остаточнній розділовий знак. Однак, є тверде поняття слова і текст повинен вкладатися в межі слова. Для того, щоб вказати ситуацію де перенос підходить, деякі Тайські системи покладаються на користувачів додаючи пробіли нульової ширини (zero-width), але для того, щоб визначити межі слів краще використовувати словник.

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

Властивості розриву рядка в CSS3 дадуть вам можливість вказати відповідну поведінку для таких скриптів, як: Китайський, Японський і Тайський тоді, коли додавання пробілів між текстом, що переноситься може бути недоцільним. (Це досить складне питання, і до цих пір продовжується обговорення того, як краще з цим впоратися.)

Деякі з властивостей CSS3 дозволять вам визначити чи варто по-різному використовувати перенесення в середині вбудованого тексту з іншого скрипту. Наприклад, якщо у вас є Латинський текст в середині Китайського, то він повинен переноситися посимвольно чи слово за словом? Обидва варіанти є дійсними, і CSS має дозволяти вам вибрати варіант відповідно до ваших вподобань або контексту. (Дивіться нижче на малюнку два приклади.)

Можливості розриву рядка зі змішаним CJK та Латинським текстом.

Можливості розриву рядка зі змішаним CJK та Латинським текстом.

Крім того, важливо також дозволити користувачеві виражати його вподобання, що пов'язані з правилами kinsoku (кінсоку) та їх Китайськими та Корейськими еквівалентами. Наприклад, нижче у верхній частині зображення показаний типовий результат, коли за останнім символом рядка слідує невеликий Катакана символ.

Мала кана і розриви рядка.

Мала кана і розриви рядка.

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

Один із способів застосування в кінці рядка kinsoku (кінсоку) правил, які ми щойно згадували - перенести два символи вниз до наступного рядка. Це може бути зроблено, наприклад, для того, щоб уникнути появи останнього розділового знаку в реченні на початку рядка.

Як альтернатива: залишити висячі розділові знаки з краю. CSS3 має дозволити вам керувати цим.

Висячі розділові знаки.

Висячі розділові знаки.

Вирівнювання тексту та, зокрема, вирівнювання тексту по ширині

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

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

Тип вирівнювання по ширині, що встановлене, як normal та inter-ideograph.

Тип вирівнювання по ширині, що встановлене, як normal та inter-ideograph.

Текст написаний на Арабському скрипті зазвичай вирівнюється по ширині шляхом розтягування зв'язаних базових ліній літер у слові, а не шляхом розтягування пробілів між словами. CSS3 повинна забезпечити властивості для того, щоб ви саме таким чином могли розширити базову лінію.

Ви також повинні мати можливість вказати, до якої пори застосовуються такі розтягування при вирівнюванні тексту по ширині.

Тип вирівнювання по ширині, що встановлене, як normal та kashida.

Тип вирівнювання по ширині, що встановлене, як normal та kashida.

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

Обрізка під час вирівнювання тексту по ширині.

Обрізка під час вирівнювання тексту по ширині.

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

Обрізка пунктуації line-intial.

Обрізка пунктуації line-intial.

Текстовий інтервал

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

Властивість text autospace встановлена як normal, потім встановлена як numeric плюс alpha.

Властивість text autospace встановлена як normal, потім встановлена як numeric плюс alpha.

Сітки документу

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

CSS3 може визначити набір властивостей для застосування сіток і для управління символами неповної ширини всередині сітки, наприклад, Латинським текстом. Такі властивості вказуватимуть, чи слід застосовувати до неідеографічних символів сітку так само, як і для CJK символів.

Це зображення показує вертикальний текст написаний Японською мовою без застосування сітки.

Японський текст без застосування сітки.

Японський текст без застосування сітки.

На цій наступній картинці ми бачимо на попередньому тексті ефект від застосування одного із видів сітки.

Японський текст із розташуванням grid-based (на основі сітки).

Японський текст із розташуванням grid-based (на основі сітки)

Kumimoji та warichu

Kumimoji - Японське слово, що утворюється в результаті об'єднання до 5-ти гліфів в межах одного широкого гліфу.

Kumimoji.

Kumimoji.

Warichu - Японське слово для друку вбудованої примітки там, де текст протікає в двох рядках.

Warichu.

Warichu.

Обидва ці ефекти будуть доступні завдяки властивостям CSS3.

Виділення

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

Японські мітки boten

Японські мітки boten.

Для того щоб вказати символ типу boten, який буде використовуватися, і положення по відношенню до основного тексту необхідні різні властивості (тобто верх або низ для горизонтального тексту, та ліво або право для вертикального).

Модуль ruby

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

Розмітка ruby

Анотація Ruby Рекомендація описує, як розмітити тексту так, щоб було зрозуміло, де основний текст, а де анотація ruby. (Це не є специфікацією CSS.) Є прості і складні моделі ruby. Нижче на зображені показано просту форму розмітки, що описана в Рекомендації. Текст в елементі <rt> - це анотація. Основний текст міститься в елементі <rb>.

Ruby: як показується і як розмічається.

Ruby: як показується і як розмічається

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

Для більш детального опису дивіться Розмітка та стилізація ruby.

Стилізація ruby

Іноді, можливо, ви захочете мати змогу контролювати розташування ruby тексту. Наприклад, в специфікації Анотації Ruby говориться, що загалом краще розміщати pinyin (піньінь) анотації нижче, аніж вище горизонтального Китайського тексту. CSS3 забезпечить властивість, яка дозволить вам контролювати місцем розташування ruby тексту.

Ruby-position: before

Ruby-position: before

Якщо ви вкажете before (перед), то текст ruby з'явиться над основним горизонтальним текстом і справа від вертикального тексту. Якщо ви вкажете after (після), то текст ruby з'явиться нижче основного горизонтального тексту і зліва від вертикального тексту.

Ruby-position: after

Ruby-position: after

Значення 'right' (справа) може бути корисним при роботі із bopomofo (бопомофо) анотаціями в Традиційному Китайському тексті, в якому ruby з'являється в стовпчику - справа від кожного ідеографічного символу не зважаючи на те чи то горизонтальний, чи то вертикальний текст.

Ruby-position: right

Ruby-position: right

Властивості також необхідні для того, щоб вказати відносне вирівнювання ruby та основного тексту, коли один текст довший за інший. В основному ефект застосовується до коротшого - або до ruby, або до основного тексту.

На зображенні нижче показано як буде виглядати текст, якщо властивість ruby-align встановлена як end. (Не звертайте уваги на зелену лінію, яка зображена тільки для того, щоб чіткіше показати межі.)

Ruby-align: end

Ruby-align: end

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

Наприклад, на наступному малюнку зображений ефект установки властивості ruby-overhang як start. Зверніть увагу, як ruby текст перекриває попередні, але не наступні символи основного тексту. Відзначимо також, що ruby текст не перекриває сам себе.

Ruby-overhang: start

Ruby-overhang: start

Більш детальний опис запропонованого в даний час підходу до стилізації ruby дивіться в статті Розмітка та стилізація ruby.

Коли це буде готово?

Де це буде застосовуватися

Ми дуже коротко розглянули деякі, але далеко не всі, з запропонованих CSS3 модулів міжнародної підтримки. Більше того, ми тільки трохи заглибилися у властивості, які ми описали. Коли CSS3 буде зроблено, багато розділів цієї статті по праву можуть стати окремими статтями.

Деякі з функцій, які ми обговорили були реалізовані в Internet Explorer 5+, але з того часу специфікації були змінені, так що ви повинні бути дуже обережними при використанні цих можливостей. Немає ніякої гарантії, що все, що ви реалізуєте в даний час в Internet Explorer в довгостроковій перспективі буде мати сумістний код. Наприклад, властивості розташування сітки в даний час абсолютно інші.

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

Наступний список показує нинішній стан модулів, що тут обговорюються. Зверніть увагу, що робота над усіма цими специфікаціями досі триває. Навіть Кандидатська Рекомендація перш, ніж вона стане Рекомендацією, може знову стати Робочим Проектом.

Це не є вичерпний перелік специфікацій, які містять властивості, що мають відношення до міжнародного тексту. Наприклад, запропонований CSS3 Модуль Рядків, який ще не був опублікований в якості Робочого Проекту, обіцяє забезпечити контроль над вирівнюванням тексту в скрипті.

Також в модулях, які залежать від цих специфікацій, ще є незавершена додаткова робота, яку треба доробити.

Як швидше зробити ці властивості доступними?

Якщо ви зацікавлені в тому, щоб ці функції стали доступними, будь ласка, повідомте про це W3C. Для нас завжди корисно почути те, що хочуть користувачі. Є також ряд практичних проектів в яких можна взяти участь.

В даний момент Робоча Група CSS має багато роботи, і робота над цими модулями просувається повільно. Як вже згадувалося раніше, навіть в даний час продовжується дискусія навколо функцій в Кандидатських Рекомендаціях. Ваша допомога у розвитку цих специфікацій буде оцінена.

Шляхом перегляду і коментування загальнодоступних проектів ви можете допомогти розвитку специфікацій. Якщо ви маєте досвід у цій галузі, то для того, щоб допомогти просуванню роботи, ви також могли б прийняти участь в Робочих Групах CSS або Інтернаціоналізації. Значна частина специфікації була взята з Японської JIS 4051 специфікації, але все ще є ряд областей, де корисно було б мати локальне введення або підтвердження вимог і очікуваної поведінки тексту в інших скриптах.

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

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

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

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

Нові джерела

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

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

‎@webi18n

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

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

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

Переклад Англійського контенту від 2006-05-17. Переклад останнього оновлення 2012-01-15 18:00 GMT

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