Створення невеликих SVG Сторінок на Арабському мовою, івриті та інших скриптах, які вирівнюються справа наліво

  1. Основи bidi алгоритму
  2. Символи і спрямоване введення
  3. спрямовані дії
  4. нейтральні символи
  5. цифри
  6. Нейтральні символи між різними спрямованими діями
  7. Нейтральні символи між однаковими спрямованими діями
  8. дзеркальні символи
  9. Вкладені спрямовані дії
  10. Підводячи підсумки про розмітку tspan

У попередніх розділах ми вже згадували, що іноді недостатньо просто додати інформацію про направлення в svg тезі. У цьому розділі ми розглянемо, коли і чому потрібно більше контролю, і зокрема, ми розглянемо, як розмічати елементи tspan для надсилання (для якого необхідно ввести властивість unicode-bidi).

Основи bidi алгоритму

спрямований контекст (базовий напрямок)

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

Базовий напрямок або встановлюється явно найближчим батьківським елементом, який використовує властивість direction, або, за відсутності таких батьківських елементів, він успадковує спрямованість svg тега за замовчуванням - зліва направо.

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

Символи і спрямоване введення

Ми вже знаємо, що послідовність Латинських символів надається (тобто показується) один за одним зліва направо (ми можемо побачити це на цій сторінці). Крім того, bidi алгоритм дасть послідовність строго типізованих RTL (справа наліво) символів один за іншим справа наліво.

Це не залежить від поточного базового напрямку, і працює, так як кожен символ в Unicode має пов'язану спрямоване властивість. Більшість букв строго типізовані як LTR. Букви в скриптах, які вирівнюються справа наліво строго типізовані як RTL.

Направлене введення.

спрямовані дії

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

Таким чином, в наступному прикладі є три спрямовані дії:

Спрямовані дії.

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

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

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

Вплив базового напрямку на відображення спрямованих дій.

Вплив базового напрямку на відображення спрямованих дій

нейтральні символи

Пропуски і розділові знаки не є строго типізований як LTR або RTL в Unicode, так як вони можуть бути використані в будь-якому типі скрипта. Тому вони класифікуються як нейтральні.

Що цікаво? Коли алгоритм bidi зустрічає символи з властивостями нейтральної спрямованості (такі, як пропуски і розділові знаки), він визначає як їх обробити, дивлячись на навколишні символи.

Нейтральний символ між двома строго типізований символами з тим же типом спрямованості буде мати таку ж спрямованість. Так нейтральний символ між двома строго типізований RTL символами буде розглядатися як RTL символ, і матиме ефект розширення спрямованої дії. Ось чому три Арабських слова в цій фразі LTR (розділені тільки пробілом, який має нейтральну спрямованість) читаються справа наліво, як єдине спрямовану дію. (Перше Арабське слово, що ви читаєте це مفتاح потім معايير потім الويب.)

Нейтральні символи як частина спрямованої дії.

Нейтральні символи як частина спрямованої дії

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

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

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

Нейтральні символи.

цифри

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

Цифри.

Цифри

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

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

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

Нейтральні символи між різними спрямованими діями

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

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

Нейтральні символи між спрямованими діями можуть закінчуватися там, де їх бути не повинно.

З огляду на наші попередні обговорення алгоритму bidi, ми легко можемо зрозуміти, чому це сталося. Тому що знак оклику був введений між останньою RTL літерою 'ب' (ліворуч) і LTR літерою 'i' (слова 'in') його спрямованість визначається основним напрямком параграфа (тут LTR). Зверніть увагу, що не важливо, що є фактично два розділові знаки і пробіл в цій позиції - вони все нейтральні символи і тому це впливає на них однаково. Так як знак оклику розглядається як LTR він приєднується до спрямованого дії, яке включає текст на 'Арабською мовою'.

Так як же ми отримуємо розділові знаки в потрібному місці?

Один з відповідей це помістити Арабську цитату в елемент tspan і використовувати властивість direction, щоб змінити базовий напрямок в межах елемента tspan на RTL.

На відміну від елементів контейнера, які ми розглянули раніше, елемент tspan вимагає від вас вказати як властивість unicode-bidi, так і властивість direction, для того, щоб зміна базового напрямку було ефективним. Значення яке вам потрібно - це embed. (Пізніше ми розглянемо використання bidi-override.)

<Text> The title is "<tspan direction =" rtl "unicode-bidi =" embed "xml: lang =" ar "> ... </ tspan>" in Arabic. </ Text> [ live code ]

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

Зверніть увагу як span тег потрапляє всередину лапок - лапки є частиною навколишнього Англійського тексту.

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

Просто так вийшло, що є такий символ Unicode, як U + 200F, який називається RIGHT-TO-LEFT MARK (мітка справа наліво) (RLM). Є схожий символ, U + 200E, що називається LEFT-TO-RIGHT MARK (мітка зліва направо) (LRM). Оскільки символ невидимий ви можете віддати перевагу фактичного введення числової посилання (& # x200F;)

Додавання цього символу відразу після знаку оклику видаватиме бажаний результат.

<Text> The title is "...! & # X200F;" in Arabic. </ text>

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

Нейтральні символи між однаковими спрямованими діями

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

Другий рядок на малюнку показує бажаний результат.

Нейтральні символи між текстом однакового напрямку можуть бути неправильно інтерпретовані в якості частини єдиного дії.

Причиною відмови є те, що за допомогою строго типізованого справа наліво (RTL) символу з обох сторін, двонаправлений алгоритм бачить нейтральну кому * як частина Арабського тексту. Він інтерпретує перші два Арабських слова і кому у вигляді списку на Арабському мовою. Насправді кома є частиною Англійського тексту, і повинна відзначати кордон двох направлених дій в Арабській мові.

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

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

Просте рішення полягає у використанні іншого невидимого символу Unicode, на цей раз LEFT-TO-RIGHT MARK, поруч з коми. Це ставить наші нейтральні розділові знаки між строго типізований RTL і LTR символами і змушує їх взяти на себе спрямованість базового напрямку, який є зліва направо в Англійському тексті. Це розбиває Арабські слова на два окремих спрямованих дії, які розташовуються LTR згідно переважному напрямку параграфа.

<Text> The names of these states in Arabic are ..., & # x200E; ... and ... respectively. </ Text>

Знову ж таки, заради видимості ви можете віддати перевагу використанню NCR (& # x200E;).

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

Бажаний результат був досягнутий шляхом розміщення & # x200F; поруч з дужкою, яка повинна була стати частиною контексту на івриті, але яка з'являється між двома інтервалами Латинського тексту. Ефект мітки RLM - розділити Латинський текст на три окремі спрямовані дії, які розміщені відповідно до базового напрямком RTL.

Інший приклад використання RLM або LRM, на цей раз в контексті на івриті.

дзеркальні символи

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

Дзеркальні символи, як правило, пари символів, такі як круглі дужки, квадратні дужки і т.д., форма яких при відображенні залежить від того, частиною якого контексту вони є: LTR або RTL. Вам не потрібно змінювати символ для зміни форми. Кінці відкритої круглої дужки завжди дивляться в бік текстового потоку. На зображенні нижче, у верхньому рядку дужка обведена червоним дивиться вправо, так як вона розглядається як відкриває дужка деякого Латинського тексту. У нижньому варіанті тексту, такий же символ (знову обведений червоним) розглядається як відкриває дужка, що відноситься до Єврейського тексту (тобто розгорнуте назва слід за скороченням в порядку читання), і тому виглядає інакше.

Дзеркальні символи.

Це означає, що або збережений контент на Арабському мовою / івриті або на латиницю, ви все одно на початку тексту, який знаходиться в дужках повинні використовувати той же символ LEFT PARENTHESIS (ліва кругла дужка). Іншими словами, ставлення до дзеркальних символів так, як ніби будь-яке слово left (ліво) в назві означає 'opening' (відкриття), і right (право) означає 'closing' (закриття).

Вкладені спрямовані дії

Unicode алгоритм bidi і LRM / RLM мітки працюють досить добре, коли є тільки один рівень змішаного тексту. Якщо у вас є ситуації, коли є два або більше рівнів вкладеності спрямованого тексту вам потрібно інше рішення. Ця картина показує Латинське пропозицію, що містить цитату на івриті, яка, в свою чергу, містить як Іврит так і Латинський текст ( 'W3C').

Порядок двох слів на івриті правильний, але текст 'W3C' повинен з'явитися в лівій частині цитати і кома повинна з'явитися між Єврейським текстом і 'W3C'.

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

Проблема виникає тому що, спрямовані потоки в даний час впорядковані відповідно до базового напрямку LTR. Однак, всередині цитати на івриті, правильним розташуванням за замовчуванням має бути RTL.

Для вирішення цієї проблеми ми повинні відкрити новий рівень вкладення. Для цього вам потрібно помістити цитату в елемент tspan і призначити його спрямованість RTL використовуючи властивості direction і unicode-bidi.

<Text> The title says "<tspan direction =" rtl "unicode-bidi =" embed "> ... </ tspan>" in Hebrew. </ Text>

Є також керуючі символи Unicode які ви можете використовувати для того, щоб досягти того ж результату, але тому, що вони встановлюють базову спрямованість фрагменту тексту за допомогою невидимих ​​меж це не рекомендується .

Підводячи підсумки про розмітку tspan

аким чином, в той час як ви просто використовуєте властивість direction на таких контейнерних елементах, як svg, g, text і textArea, ви повинні використовувати як direction так і unicode-bidi = "embed" у елементах tspan, так як вони є вбудованими.

Інша корисне значення unicode-bidi - це bidi-override. Вам не потрібно буде його використовувати дуже часто. Воно описане в наступному розділі.

Що цікаво?
Так як же ми отримуємо розділові знаки в потрібному місці?