Создание небольших SVG Страниц на Арабском языке, Иврите и других скриптах, которые выравниваются справа налево

Основы

Додайте direction="rtl" к svg тэгу для установки основного направления документа - справа налево. Базовое направление устанавливает общую направленность контекста для текста внутри элемента, в котором оно назначенное.

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

Сделав это, вам не потребуется дополнительная разметка направленности в вашем контенте. Значение свойства direction устанавливается в svg элементе и наследуется элементами, относящимися к тексту на протяжении всего документа. Большая часть переупорядочивания, которая необходима для отображения текста автоматически происходит за счет двунаправленного алгоритма Unicode ('bidi алгоритм'). Это можно проиллюстрировать на примере ниже.

<svg xmlns="http://www.w3.org/2000/svg" 
    width="100%" height="100%" viewBox="0 0 400 400"
    direction="rtl" xml:lang="fa">
    <title>...</title>
    <desc>...</desc>
    <text x="200" y="200" 
        font-size="10">داستان SVG Tiny 1.2 طولا ني است.</text>
    </svg>

Конечно, есть ситуации, когда вам может понадобиться применить больше разметок, и мы опишем их ниже. Кроме того, добавление direction="rtl" к svg элементу приведет к некоторым автоматическим воздействиям на свойства text-align и text-anchor, которые мы вскоре также будем описывать.

Однако, не делайте ошибку, считая, что назначения языка указывают направленность текста, или наоборот!

Даже если скриптовый subtag используется в значении атрибута языка, это не влияет на направленность текста в клиентском приложении. Вы должны всегда определять направления используя атрибут dir.

Логично, а не визуально

Визуальное расположение текста на Иврите было распространено в (очень) старых HTML клиентских приложениях, которые не поддерживали двунаправленный алгоритм Unicode. Текст хранится в исходном коде в том же порядке в котором можно ожидать его при отображении. (Это было не так часто в тексте написанном на Арабском скрипте, так как это портит взаимосвязь между символами.)

Текст с логическим расположением, сохраняется в памяти в том же порядке, в котором он, как правило, был напечатан (и обычно произносится). Двунаправленный алгоритм Unicode затем применяется в браузере, чтобы воспроизвести правильное визуальное отображение. В настоящее время почти весь текст в Сети находится в логическом порядке.

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

Как размечать контент

Установив, базовое направление на уровне элемента svg, вы не должны использовать свойство direction в других элементах, если только вы не хотите изменить базовое направление для того элемента.

Ненужное использование свойства direction влияет на пропускную способность и потенциально создает ненужную дополнительную работу по обслуживании страницы.

Базовое направление, установленное свойством direction тем не менее, влияет на то, как расположен смешанный текст и пунктуация внутри элемента text или textArea (это будет подробно описано чуть дальше). Иногда, возможно, вы захотите изменить базовое направление для одного из этих элементов, если он написан на другом языке чем остальные страницы.

Для этого просто используйте свойство direction в том элементе, или в элементе группировки, который окружает соответствующий контент.

<svg xmlns="http://www.w3.org/2000/svg" 
    width="100%" height="100%" viewBox="0 0 400 400"
    direction="rtl" xml:lang="he">
    <title>...</title>
    <desc>...</desc>
    <text x="200" y="20" 
        font-size="10">כתובת לפניות באנגליה:</text>
    <g direction="ltr">
        <text x="100" y="40" 
            font-size="10">3, Tennyson House</text>
        <text x="100" y="50" 
            font-size="10">17 Clairbourne Road,</text>
        <text x="100" y="60" 
            font-size="10">Harpenden AL5 4SD</text>
        </g>
    </svg>

Вы могли заметить, что выравнивание текста по отношению к координате x различны для двух примеров приведенных выше. Мы обсудим это далее.

Направление и text-align

Свойство text-align используется с элементом textArea, и имеет следующие значения: start, middle и end. Важно помнить, что первое и последнее из этих значений связанные с текстом логично, а не физически.

start означает место, где обычно начинается чтение строки, задающей текущее базовое направление. Когда базовое направление слева направо, то это значит - слева от элемента TextArea. Если наоборот - базовое направление справа налево, то это означает - справа от элемента TextArea.

Для end, просто наоборот.

Это интуитивно, если вы использовали CSS с HTML, так как свойство direction в CSS автоматически выравнивает текст справа в блочном элементе.

<svg xmlns="http://www.w3.org/2000/svg"
    width="100%" height="100%" viewBox="0 0 400 400"
    direction="rtl" xml:lang="ur">
    <title>...</title>
    <desc>...</desc>
    <textArea x="20" y="20" width="200">
        فعالیت بین‌المللی‌سازی، W3Cنا 
‎        عالمگیر ویب کو حقیقی طور پر عالمگیر بنانا
        </textArea>
    </svg>

Направление и text-anchor

Свойство text-anchor используется с элементом text, и его значениями также являются: start, middle и end. Опять же, первое и последнее из этих значений связанные с текстом логично, а не физически.

Если вы не указали базового направления, или вы указали direction="ltr", и если значение text-anchor установлено как start, текст будет распространяться на право по оси координат х. Если вы установили direction="rtl", тогда текст будет распространяться на лево по оси координат х. По умолчанию значение text-anchor установлено - start.

Для end - наоборот.

<svg xmlns="http://www.w3.org/2000/svg" 
    width="100%" height="100%" viewBox="0 0 400 400"
    xml:lang="en">
    <title>...</title>
    <desc>...</desc>
    <text x="200" y="10" 
        font-size="10">Internationalization activity, W3C</text>
    <text direction="rtl" x="200" y="20" 
        font-size="10">نشاط التدويل، W3C</text>
    </svg>

Вы должны иметь в виду, что направление, в котором текст распространяется от точки х (смотрите предыдущий пример) зависит от базового направления, то есть значение свойства direction, и not от того, имеете ли вы дело с Латинским или с Арабским текстом (или текстом на Иврит). Это важно.

Это означает, что, например, список терминов, содержащий Латинские и Ближневосточные слова ожидаемо испортит выравнивание элементов.

<svg xmlns="http://www.w3.org/2000/svg" 
    width="100%" height="100%" viewBox="0 0 400 400"
    direction="rtl" xml:lang="he">
    <title>...</title>
    <desc>...</desc>
    <text x="200" y="20" 
          font-size="10">W3C ,פעילות הבינאום</text>
    <text x="200" y="30" xml:lang="en" 
          font-size="7">(Internationalization Activity, W3C)</text>
    <text x="200" y="50"
          font-size="10">ליצור מהרשת רשת כלל עולמית באמת</text>
    <text x="200" y="60" xml:lang="en"
         font-size="7">(Making the World Wide Web worldwide)</text>
    </svg>

То, что вы должны помнить, однако, если вы по каким причинам, применяете direction="ltr" для одного с элементов text, вы должны также указать text-anchor="end" для этого элемента, так что он будет продолжать выстраиваться с другими.

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

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

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

Это не зависит от текущего базового направления, и работает, так как каждый символ в Unicode имеет связанное направленное свойство. Большинство букв строго типизированные как LTR. Буквы в скриптах, которые выравниваются справа налево строго типизированные как RTL.

Таким образом, в следующем примере есть три направленные действия:

Другой способ посмотреть на это, является то что изменения в направлении отмечают пределы направленных действий. Обратите внимание, чтобы это сделать вам не нужна никакая разметка или стилизация.

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

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

Что интересно? Когда алгоритм bidi встречает символы со свойствами нейтральной направленности (такие, как пробелы и знаки препинания), он определяет как их обработать, глядя на окружающие символы.

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

Обратите внимание, что вам для этого по-прежнему не нужны никакие разметка либо стилизация. И, что здесь до сих пор есть только три направленные действия.

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

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

Первый пример использует европейские цифры, '1234', второй выражает то же число, используя Арабско-Индийские цифры, ١٢٣٤. В обоих случаях цифры в номере читаются слева направо.

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

Отметим также, что, наряду с числом, такие определенные в противном случае нейтральные символы как символы валют, будут рассматриваться как часть числа, а не нейтральные символы.

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

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

Первая строка на этом рисунке показывает восклицательный знак, который является частью встроенного Арабского текста, который появляется в неправильном месте. Вторая строка показывает желаемый результат.

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

Так как же мы получаем знаки препинания в нужном месте?

Один из ответов это поместить Арабскую цитату в элемент tspan и использовать свойство direction, чтобы изменить базовое направление в пределах элемента tspan на RTL.

В отличие от элементов контейнера, которые мы рассмотрели ранее, элемент tspan требует от вас указать как свойство unicode-bidi, так и свойство direction, для того, чтобы изменение базового направления было эффективным. Значение которое вам нужно - это embed. (Позднее мы рассмотрим использование bidi-override.)

Обратите внимание как span тэг попадает внутрь кавычек - кавычки являются частью окружающего Английского текста.

Другая возможность - ввести невидимый, строго типизированный RTL символ после восклицательного знака. Таким образом, восклицательный знак будет интерпретироваться как RTL и присоединится к Арабскому направленному действию.

Просто так получилось, что есть такой символ Unicode, как U+200F, который называется RIGHT-TO-LEFT MARK (метка справа налево) (RLM). Есть похожий символ, U+200E, что называется LEFT-TO-RIGHT MARK (метка слева направо) (LRM). Поскольку символ невидимый вы можете отдать предпочтение фактическому введению числовой ссылки (‏)

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

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

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

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

Вторая строка на рисунке показывает желаемый результат.

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

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

Опять же, ради видимости вы можете отдать предпочтение использованию NCR (‎).

Следующая картина показывает другой пример, где разметка не нужна, и управляющий символ Unicode делает работу намного проще. Опять же, верхняя строка голубого цвета на рисунке показывает результат, когда вы будете полагаться только на двунаправленный алгоритм, а вторая строка показывает желаемый результат.

Желаемый результат был достигнут путем размещения ‏ рядом с скобкой, которая должна была стать частью контекста на Иврите, но которая появляется между двумя интервалами Латинского текста. Эффект метки RLM - разделить Латинский текст на три отдельные направленные действия, которые размещены в соответствии с базовым направлением RTL.