diff --git a/README.md b/README.md index 313790f1..d792d620 100644 --- a/README.md +++ b/README.md @@ -5,4 +5,11 @@ Note that this is only a temporary location for articles, etc., while they are b To view a page as HTML, go to https://w3c.github.io/i18n-drafts/ and add the appropriate path to the file you want to view. You'll need to provide the filename plus language extension as a minimum, eg. https://w3c.github.io/i18n-drafts/articles/vertical-text.en -If you want to translate one or more of these resources, see the [Translation intructions](https://www.w3.org/International/2004/06/translation) page. +If you want to translate one or more of these resources, see the [Translation intructions](https://www.w3.org/International/i18n-drafts/pages/translation) page. + +### Contributing + +Editors should be familiar with and use the following: + +- [GitHub guidelines for working with i18n documents](https://www.w3.org/International/i18n-activity/guidelines/github) +- [Editorial guidelines for working with i18n documents](https://www.w3.org/International/i18n-activity/guidelines/editing) diff --git a/article-list/articlelist-data/translations.js b/article-list/articlelist-data/translations.js index 249d2b68..28838da7 100644 --- a/article-list/articlelist-data/translations.js +++ b/article-list/articlelist-data/translations.js @@ -1,6 +1,6 @@ var trans = { } -trans.versions = ['ar', 'bg', 'de', 'el', 'en', 'es', 'fr', 'hi', 'hu', 'it', 'ja', 'ko', 'nl', 'pl', 'pt', 'pt-br', 'ro', 'ru', 'sv', 'tr', 'uk', 'zh-hans', 'zh-hant'] +trans.versions = ['ar', 'bg', 'de', 'el', 'en', 'es', 'fr', 'gl', 'hi', 'hu', 'it', 'ja', 'ko', 'nl', 'pl', 'pt', 'pt-br', 'ro', 'ru', 'sv', 'tr', 'uk', 'zh-hans', 'zh-hant'] trans.outofdatetranslations = [] @@ -18,16 +18,10 @@ var titles = { "getstarted": [ { - "url": "/International/getting-started/index", - "ar": "مقدمة لموقع تدويل الشبكة العالمية", - "de": "Einstieg in die W3C-Internationalisierungs-Website", + "url": "/International/i18n-drafts/getting-started/index", "en": "Getting Started with the W3C I18n site", "es": "Introducción al sitio W3C I18n", - "fr": "Premiers pas avec le site W3C I18n", - "pt": "Introdução ao site W3C I18n", - "pt-br": "Introdução ao site I18n da W3C", - "ro": "Notiuni de baza despre site-ul W3C I18n", - "uk": "Приступаючи до роботи з сайтом W3C Інтернаціоналізації" + "zh-hans": "国际化入门资源" }, { "url": "/International/getting-started/characters", @@ -36,6 +30,7 @@ var titles = { "en": "Introducing Character Sets and Encodings", "es": "Introducción a las codificaciones y a los sets de caracteres", "fr": "Présentation des jeux et encodages de caractères", + "gl": "Introdución ás codificacións e ós conxuntos de caracteres", "hi": "परिचय कैरेक्टर समूह और कूटबन्धन", "hu": "Bevezető a Karakterkészletekbe és Karakterkódolásba", "pt": "Introdução de conjuntos de caracteres e codificações", @@ -54,6 +49,7 @@ var titles = { "en": "Language on the Web", "es": "Idiomas en la Web", "fr": "Langage sur le Web", + "gl": "Idiomas na Web", "hi": "वेब पर भाषा", "hu": "A Nyelv a Weben", "ja": "Web 上の言語", @@ -91,6 +87,7 @@ var titles = { "url": "/International/tutorials/tutorial-char-enc/index", "de": "Umgang mit Zeichencodierungen in HTML und CSS (Tutorial)", "en": "Handling character encodings in HTML and CSS (tutorial)", + "fr": "Gestion de l’encodage des caractères en HTML et CSS (tutoriel)", "ro": "Manevrarea codării de caractere în HTML și CSS (tutorial)", "sv": "Att hantera teckenkodningar i HTML och CSS (handledning)", }, @@ -115,6 +112,11 @@ var titles = { "sv": "Att välja & att använda en teckenkodning", }, { + "url": "/International/questions/qa-who-uses-unicode", + "en": "Who uses Unicode?", + "sv": "Vem använder Unicode?", + }, + { "url": "/International/questions/qa-html-encoding-declarations", "de": "Angabe der Zeichencodierung in HTML", "en": "Declaring character encodings in HTML", @@ -157,12 +159,11 @@ var titles = { "bg": "Конвертиране на HTML страница към Unicode", "en": "Changing an HTML page to Unicode", "fr": "Changer l’encodage d’une page HTML en Unicode", + "it": "Cambiare una pagina HTML in Unicode", }, { "url": "/International/questions/qa-escapes", - "de": "Verwendung von Zeichen-Escapes in Markup und CSS", "en": "Using character escapes in markup and CSS", - "sv": "Att använda kodade tecken i uppmärkning och CSS", }, { "url": "/International/questions/qa-doc-charset", @@ -251,9 +252,8 @@ var titles = { "uk": "Пропущені символи і гліфи", }, { - "url": "/International/questions/qa-who-uses-unicode", - "en": "Who uses Unicode?", - "sv": "Vem använder Unicode?", + "url": "/International/questions/qa-indic-graphemes", + "en": "Typographic character units in complex scripts", }, { "url": "/International/articles/unicode-migration/index", @@ -295,7 +295,9 @@ var titles = { { "url": "/International/questions/qa-text-processing-vs-metadata", "en": "Types of language declaration", + "es": "Tipos de declaración de idioma", "fr": "Types de déclaration de langues", + "it": "Tipi di dichiarazione linguistica", }, { "url": "/International/articles/language-tags/index", @@ -341,10 +343,6 @@ var titles = { "ru": "Установка языковых настроек в браузере", }, { - "url": "/International/questions/qa-text-processing-vs-metadata", - "en": "Types of language declaration", - }, - { "url": "/International/questions/qa-when-xmllang", "de": "xml:lang in XML-Dokument-Schemas", "en": "xml:lang in XML document schemas", @@ -357,12 +355,16 @@ var titles = { "url": "/International/questions/qa-no-language", "de": "Kennzeichnung von Text mit keiner Sprache", "en": "Tagging text with no language", + "es": "Etiquetado de texto sin idioma", + "fr": "Marquer du texte sans langue", + "it": "Etichettatura del testo senza lingua", "sv": "Märka upp text som 'inget språk'", }, { "url": "/International/questions/qa-link-lang", "de": "Kennzeichnung der Sprache von Linkzielen", "en": "Indicating the language of a link destination", + "es": "Indicar el idioma de destino de un enlace", "pl": "Wskazywanie języka strony docelowej linku", }, { @@ -414,8 +416,8 @@ var titles = { "de": "Verwendung des translate-Attributs in HTML", "en": "Using HTML's translate attribute", "es": "Utilizar el atributo translate de HTML", - "it": "Utilizzo dell'attributo HTML translate", "fr": "Utiliser l’attribut translate HTML", + "it": "Utilizzo dell'attributo HTML translate", }, { "url": "/International/questions/qa-non-eng-tags", @@ -430,6 +432,10 @@ var titles = { "ru": "Неанглийские тэги", "tr": "İngilizce olmayan kod etiketleri", "uk": "Неанглійські теги", + }, + { + "url": "/International/questions/qa-reference-links", + "en": "Internationalization tips for linking to headings & figures" } ], @@ -440,6 +446,8 @@ var titles = { "url": "/International/tutorials/bidi-xhtml/index", "de": "HTML-Seiten in arabischer, hebräischer und anderen von rechts nach links geschriebenen Schriften erstellen (tutorial)", "en": "Creating HTML Pages in Arabic, Hebrew and Other Right-to-left Scripts (tutorial)", + "es": "Creación de páginas HTML en árabe, hebreo y otros scripts de derecha a izquierda (tutorial)", + "fr": "Création de pages HTML en arabe, hébreu et autres scripts de droite à gauche (tutoriel)", }, { "url": "/International/articles/inline-bidi-markup/uba-basics", @@ -480,7 +488,7 @@ var titles = { "en": "Visual vs. logical ordering of text", "es": "Ordenando el texto de forma visual vs. lógica", }, - { + /*{ "url": "/International/tutorials/svg-tiny-bidi/Overview", "de": "SVG Tiny-Seiten in arabischer, hebräischer und mit anderen von rechts nach links geschriebenen Schriften erstellen", "en": "Creating SVG Tiny Pages in Arabic, Hebrew and other Right-to-left scripts", @@ -491,7 +499,7 @@ var titles = { "pt": "Criação de SVG Tiny Pages em árabe, hebraico, e em outros scripts da direita para a esquerda", "ru": "Создание небольших SVG Страниц на Арабском языке, Иврите и других скриптах, которые выравниваются справа налево", "uk": "Створення Невеличких SVG Сторінок в Арабській мові, Івриті та інших скриптах, які вирівнюються справа наліво", - }, + },*/ { "url": "/International/articles/vertical-text/index", "en": "Styling vertical Chinese, Japanese, Korean and Mongolian text", @@ -519,6 +527,7 @@ var titles = { "de": "Textlänge bei Übersetzungen", "en": "Text size in translation", "es": "El tamaño del texto en la traducción", + "fr": "La taille des textes dans les traductions", "hu": "Szövegméret a fordításban", "ja": "訳文における文字サイズ", "ko": "번역물의 텍스트 크기", @@ -575,6 +584,7 @@ var titles = { "url": "/International/questions/qa-personal-names", "de": "Personennamen aus aller Welt", "en": "Personal names around the world", + "es": "Los nombres propios en el mundo", "fr": "Noms de personnes à travers le monde", "uk": "Особисті імена в різних мовах світу", }, @@ -582,6 +592,7 @@ var titles = { "url": "/International/questions/qa-select-sorting", "de": "Auswahloptionen sortieren", "en": "Sorting select options", + "fr": "Tri des options de sélection", "pl": "Sortowanie rozwijanej listy", "ru": "Сортировка выпадающего списка", "uk": "Сортування випадаючого списку", @@ -680,6 +691,7 @@ var titles = { { "url": "/International/articles/definitions-time/index", "en": "Time & date: Essential concepts", + "es": "Fecha y hora: Conceptos básicos", }, { "url": "/International/questions/qa-date-format", @@ -695,6 +707,7 @@ var titles = { "url": "/International/questions/qa-personal-names", "de": "Personennamen aus aller Welt", "en": "Personal names around the world", + "es": "Los nombres propios en el mundo", "fr": "Noms de personnes à travers le monde", "uk": "Особисті імена в різних мовах світу", } @@ -718,6 +731,7 @@ var titles = { "ru": "Локализация по сравнению с интернационализацией", "sv": "Lokalisering och internationalisering", "uk": "Локалізація в порівнянні з Інтернаціоналізацією", + "zh-hans": "本地化与国际化有什么关系？", }, { "url": "/International/questions/qa-mono-multilingual", @@ -772,7 +786,7 @@ function addTitles (section, list) { if (rtlSet.has(f.clang)) a.dir = 'rtl' if (titles[section][i][f.clang]) { a.textContent = titles[section][i][f.clang] - a.href += '.' + f.clang + a.href += '.' + f.clang + '.html' a.className = 'native' } else { diff --git a/article-list/articlelist.ar.html b/article-list/articlelist.ar.html index 0ba2b1ba..4ce8a42e 100644 --- a/article-list/articlelist.ar.html +++ b/article-list/articlelist.ar.html @@ -32,15 +32,15 @@ f.additionalLinks = '' - + - - - - + + + + + - @@ -51,7 +51,7 @@

Articles & tutorials

-

You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

+

You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

If a title in the list below is in English, the article is not available in the language of this page.

Apart from the article titles, this page has not been fully translated. If you would like to translate it, please contact us.

@@ -60,9 +60,8 @@

Articles & tutorials

-
-
-

Getting started

+
+

Getting started

    - + - - - - + + + + + - @@ -51,7 +51,7 @@

    Статии, полезни практики, ръководства

    -

    Можете да открите ресуси също използвайки Internationalization techniques: Authoring HTML & CSS, които осигуряват по-лесен достъп до информацията.

    +

    Можете да открите ресуси също използвайки Internationalization techniques: Authoring HTML & CSS, които осигуряват по-лесен достъп до информацията.

    If a title in the list below is in English, the article is not available in the language of this page.

    diff --git a/article-list/articlelist.de.html b/article-list/articlelist.de.html index 5ec56fcb..f4e624de 100644 --- a/article-list/articlelist.de.html +++ b/article-list/articlelist.de.html @@ -32,15 +32,15 @@ f.additionalLinks = '' - + - - - - + + + + + - @@ -51,7 +51,7 @@

    Artikel und Tutorials

    -

    Die Quellen finden Sie auch nach Aufgaben sortiert im Internationalization techniques: Authoring HTML & CSS.

    +

    Die Quellen finden Sie auch nach Aufgaben sortiert im Internationalization techniques: Authoring HTML & CSS.

    Wenn ein Artikel unter englischem Titel aufgeführt wird, ist er nicht in deutscher Übersetzung verfügbar.

    diff --git a/article-list/articlelist.el.html b/article-list/articlelist.el.html index 6a85141d..17761c7c 100644 --- a/article-list/articlelist.el.html +++ b/article-list/articlelist.el.html @@ -32,15 +32,15 @@ f.additionalLinks = '' - + - - - - + + + + + - @@ -51,7 +51,7 @@

    Articles & tutorials

    -

    You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

    +

    You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

    If a title in the list below is in English, the article is not available in the language of this page.

    Apart from the article titles, this page has not been fully translated. If you would like to translate it, please contact us.

    diff --git a/article-list/articlelist.en.html b/article-list/articlelist.en.html index c496f2c0..ccb180b9 100644 --- a/article-list/articlelist.en.html +++ b/article-list/articlelist.en.html @@ -32,15 +32,15 @@ f.additionalLinks = '' - + - - - - + + + + + - @@ -51,7 +51,7 @@

    Articles & tutorials

    -

    You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

    +

    You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

    @@ -59,8 +59,9 @@

    Articles & tutorials

    -
    -

    Getting started

    + +
    +

    Getting started

      - + - - - - + + + + + - @@ -51,7 +51,7 @@

      Artículos & tutoriales

      -

      También podrá encontrar recursos si utiliza Internationalization techniques: Authoring HTML & CSS, que brinda un acceso más preciso a la información.

      +

      También podrá encontrar recursos si utiliza Internationalization techniques: Authoring HTML & CSS, que brinda un acceso más preciso a la información.

      If a title in the list below is in English, the article is not available in the language of this page.

      diff --git a/article-list/articlelist.fr.html b/article-list/articlelist.fr.html index 93d7265c..328d67c3 100644 --- a/article-list/articlelist.fr.html +++ b/article-list/articlelist.fr.html @@ -32,15 +32,15 @@ f.additionalLinks = '' - + - - - - + + + + + - @@ -51,7 +51,7 @@

      Articles et tutoriels

      -

      Vous pouvez également trouver des ressources à l’aide de Internationalization techniques: Authoring HTML & CSS, qui offre un accès plus détaillé à l’information.

      +

      Vous pouvez également trouver des ressources à l’aide de Internationalization techniques: Authoring HTML & CSS, qui offre un accès plus détaillé à l’information.

      Si un titre dans la liste ci-dessous apparaît en anglais, l'article n'est pas disponible en français.

      diff --git a/article-list/articlelist.gl.html b/article-list/articlelist.gl.html new file mode 100644 index 00000000..caed25b8 --- /dev/null +++ b/article-list/articlelist.gl.html @@ -0,0 +1,199 @@ + + + + +List of articles + + + + + + + + + + + + + + + +
      + +
      + +
      +

      Articles & tutorials

      + +

      You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

      +

      If a title in the list below is in English, the article is not available in the language of this page.

      +

      Apart from the article titles, this page has not been fully translated. If you would like to translate it, please contact us.

      + + +
      + + + +
      +

      Getting started

      +
        + +
        + + + + + + +
        +

        Characters

        +
          + +
          + + + + + +
          +

          Language

          +
            + +
            + + + + + +
            +

            Markup & text

            +
              + +
              + + + +
              +

              Text direction

              +
                + +
                + + + + +
                +

                Styling & layout

                +
                  + +
                  + + + + + +
                  +

                  Forms

                  +
                    + +
                    + + + + + + + + + + + +
                    +

                    Web addresses

                    +
                      + +
                      + + + + + +
                      +

                      Cultural issues

                      +
                        + +
                        + + + + + +
                        +

                        Other

                        +
                          + +
                          + + + + + +
                          +
                          + +
                          + + + diff --git a/article-list/articlelist.hi.html b/article-list/articlelist.hi.html index f307d295..61c77ee2 100644 --- a/article-list/articlelist.hi.html +++ b/article-list/articlelist.hi.html @@ -32,15 +32,15 @@ f.additionalLinks = '' - + - - - - + + + + + - @@ -51,7 +51,7 @@

                          Articles & tutorials

                          -

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          +

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          If a title in the list below is in English, the article is not available in the language of this page.

                          Apart from the article titles, this page has not been fully translated. If you would like to translate it, please contact us.

                          diff --git a/article-list/articlelist.hu.html b/article-list/articlelist.hu.html index e070f534..e5c01ef7 100644 --- a/article-list/articlelist.hu.html +++ b/article-list/articlelist.hu.html @@ -32,15 +32,15 @@ f.additionalLinks = '' - + - - - - + + + + + - @@ -51,7 +51,7 @@

                          Articles & tutorials

                          -

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          +

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          If a title in the list below is in English, the article is not available in the language of this page.

                          Apart from the article titles, this page has not been fully translated. If you would like to translate it, please contact us.

                          diff --git a/article-list/articlelist.it.html b/article-list/articlelist.it.html index 29a68a67..e41d7ad9 100644 --- a/article-list/articlelist.it.html +++ b/article-list/articlelist.it.html @@ -32,15 +32,15 @@ f.additionalLinks = '' - + - - - - + + + + + - @@ -51,7 +51,7 @@

                          Articles & tutorials

                          -

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          +

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          If a title in the list below is in English, the article is not available in the language of this page.

                          Apart from the article titles, this page has not been fully translated. If you would like to translate it, please contact us.

                          diff --git a/article-list/articlelist.ja.html b/article-list/articlelist.ja.html index b073ef96..7c3ab252 100644 --- a/article-list/articlelist.ja.html +++ b/article-list/articlelist.ja.html @@ -32,15 +32,15 @@ f.additionalLinks = '' - + - - - - + + + + + - @@ -51,7 +51,7 @@

                          文書 & チュートリアル

                          -

                          より細分化された分類で分けられている 国際化の技法: HTML & CSS を書くために のページからもさまざまな情報が入手できます。

                          +

                          より細分化された分類で分けられている 国際化の技法: HTML & CSS を書くために のページからもさまざまな情報が入手できます。

                          以下のリストのタイトルが英語表記の場合、その文書はこのページの言語(日本語)では提供されていません。

                          diff --git a/article-list/articlelist.ko.html b/article-list/articlelist.ko.html index 579e95ca..231acd0d 100644 --- a/article-list/articlelist.ko.html +++ b/article-list/articlelist.ko.html @@ -32,15 +32,15 @@ f.additionalLinks = '' - + - - - - + + + + + - @@ -51,8 +51,9 @@

                          Articles & tutorials

                          -

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          -

                          If a title in the list below is in English, the article is not available in the language of this page.

                          +

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          +

                          If a title in the list below is in English, the article is not available in the language of this page. The list of articles was last updated on .

                          +

                          Apart from the article titles, this page has not been fully translated. If you would like to translate it, please contact us.

                          diff --git a/article-list/articlelist.nl.html b/article-list/articlelist.nl.html index 0145eba3..05bb3f10 100644 --- a/article-list/articlelist.nl.html +++ b/article-list/articlelist.nl.html @@ -32,15 +32,15 @@ f.additionalLinks = '' - + - - - - + + + + + - @@ -51,7 +51,7 @@

                          Articles & tutorials

                          -

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          +

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          If a title in the list below is in English, the article is not available in the language of this page.

                          Apart from the article titles, this page has not been fully translated. If you would like to translate it, please contact us.

                          diff --git a/article-list/articlelist.pl.html b/article-list/articlelist.pl.html index c7e84a21..234896c9 100644 --- a/article-list/articlelist.pl.html +++ b/article-list/articlelist.pl.html @@ -32,15 +32,15 @@ f.additionalLinks = '' - + - - - - + + + + + - @@ -51,7 +51,7 @@

                          Articles & tutorials

                          -

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          +

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          If a title in the list below is in English, the article is not available in the language of this page.

                          Apart from the article titles, this page has not been fully translated. If you would like to translate it, please contact us.

                          diff --git a/article-list/articlelist.pt-br.html b/article-list/articlelist.pt-br.html index 7e352f0c..b5b1f814 100644 --- a/article-list/articlelist.pt-br.html +++ b/article-list/articlelist.pt-br.html @@ -32,15 +32,15 @@ f.additionalLinks = '' - + - - - - + + + + + - @@ -51,7 +51,7 @@

                          Artigos & tutoriais

                          -

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          +

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          If a title in the list below is in English, the article is not available in the language of this page.

                          Apart from the article titles, this page has not been fully translated. If you would like to translate it, please contact us.

                          diff --git a/article-list/articlelist.pt.html b/article-list/articlelist.pt.html index fb0b95ca..dc68b3aa 100644 --- a/article-list/articlelist.pt.html +++ b/article-list/articlelist.pt.html @@ -32,15 +32,15 @@ f.additionalLinks = '' - + - - - - + + + + + - @@ -51,7 +51,7 @@

                          Articles & tutorials

                          -

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          +

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          If a title in the list below is in English, the article is not available in the language of this page.

                          Apart from the article titles, this page has not been fully translated. If you would like to translate it, please contact us.

                          diff --git a/article-list/articlelist.ro.html b/article-list/articlelist.ro.html index 5de3166d..f432dd0a 100644 --- a/article-list/articlelist.ro.html +++ b/article-list/articlelist.ro.html @@ -32,15 +32,15 @@ f.additionalLinks = '' - + - - - - + + + + + - @@ -51,7 +51,7 @@

                          Articles & tutorials

                          -

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          +

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          If a title in the list below is in English, the article is not available in the language of this page.

                          Apart from the article titles, this page has not been fully translated. If you would like to translate it, please contact us.

                          diff --git a/article-list/articlelist.ru.html b/article-list/articlelist.ru.html index 1f4c67ac..b68d0828 100644 --- a/article-list/articlelist.ru.html +++ b/article-list/articlelist.ru.html @@ -32,15 +32,15 @@ f.additionalLinks = '' - + - - - - + + + + + - @@ -51,7 +51,7 @@

                          Articles & tutorials

                          -

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          +

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          If a title in the list below is in English, the article is not available in the language of this page.

                          Apart from the article titles, this page has not been fully translated. If you would like to translate it, please contact us.

                          diff --git a/article-list/articlelist.sv.html b/article-list/articlelist.sv.html index 91a0fbea..e1f01c30 100644 --- a/article-list/articlelist.sv.html +++ b/article-list/articlelist.sv.html @@ -32,15 +32,15 @@ f.additionalLinks = '' - + - - - - + + + + + - @@ -51,7 +51,7 @@

                          Articles & tutorials

                          -

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          +

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          If a title in the list below is in English, the article is not available in the language of this page.

                          Apart from the article titles, this page has not been fully translated. If you would like to translate it, please contact us.

                          diff --git a/article-list/articlelist.tr.html b/article-list/articlelist.tr.html index d0e0682a..c4ac056c 100644 --- a/article-list/articlelist.tr.html +++ b/article-list/articlelist.tr.html @@ -32,15 +32,15 @@ f.additionalLinks = '' - + - - - - + + + + + - @@ -51,7 +51,7 @@

                          Articles & tutorials

                          -

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          +

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          If a title in the list below is in English, the article is not available in the language of this page.

                          Apart from the article titles, this page has not been fully translated. If you would like to translate it, please contact us.

                          diff --git a/article-list/articlelist.uk.html b/article-list/articlelist.uk.html index 3fe88a51..50e3c896 100644 --- a/article-list/articlelist.uk.html +++ b/article-list/articlelist.uk.html @@ -32,15 +32,15 @@ f.additionalLinks = '' - + - - - - + + + + + - @@ -51,7 +51,7 @@

                          Articles & tutorials

                          -

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          +

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          If a title in the list below is in English, the article is not available in the language of this page.

                          Apart from the article titles, this page has not been fully translated. If you would like to translate it, please contact us.

                          diff --git a/article-list/articlelist.zh-hans.html b/article-list/articlelist.zh-hans.html index 8a354b28..f0e21973 100644 --- a/article-list/articlelist.zh-hans.html +++ b/article-list/articlelist.zh-hans.html @@ -31,15 +31,15 @@ f.additionalLinks = '' - + - - - - + + + + + - @@ -50,7 +50,7 @@

                          文章和教程

                          -

                          您还可以使用国际化技术：创作HTML和CSS（英文）查找资源，该页面提供更多的信息。

                          +

                          您还可以使用国际化技术：创作HTML和CSS（英文）查找资源，该页面提供更多的信息。

                          列表中的标题为英文意味着该文章没有简体中文版。

                          diff --git a/article-list/articlelist.zh-hant.html b/article-list/articlelist.zh-hant.html index 419dc3df..64290e2b 100644 --- a/article-list/articlelist.zh-hant.html +++ b/article-list/articlelist.zh-hant.html @@ -32,15 +32,15 @@ f.additionalLinks = '' - + - - - - + + + + + - @@ -51,7 +51,7 @@

                          Articles & tutorials

                          -

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          +

                          You can also find resources using the page Internationalization techniques: Authoring HTML & CSS, which provides more fine-grained access to information.

                          If a title in the list below is in English, the article is not available in the language of this page.

                          Apart from the article titles, this page has not been fully translated. If you would like to translate it, please contact us.

                          diff --git a/articles/article-text-size-data/translations.js b/articles/article-text-size-data/translations.js index edb725b6..4af0e800 100644 --- a/articles/article-text-size-data/translations.js +++ b/articles/article-text-size-data/translations.js @@ -1,6 +1,6 @@ var trans = { } -trans.versions = ['ar','de','en','es', 'fr', 'hu','ja','ko','pl','ro','ru','uk'] +trans.versions = ['ar','de','en','es', 'fr', 'hu','ja','ko','pl','ro','ru','uk', 'zh-hans'] trans.outofdatetranslations = [] diff --git a/articles/article-text-size.ar.html b/articles/article-text-size.ar.html index 00368735..01363012 100755 --- a/articles/article-text-size.ar.html +++ b/articles/article-text-size.ar.html @@ -34,12 +34,12 @@ - - - - + + + + + - @@ -74,9 +83,7 @@

                          Inline bidi markup examples

                          -
                          -
                          @@ -86,24 +93,23 @@

                          Inline bidi markup examples

                          To see the full source, click on the "Test in your browser" links and view the source of the page that displays.

                          It is common for content in Arabic, Hebrew, and other languages that use right-to-left scripts to include numerals or include text from other scripts. Both of these typically flow left-to-right within the overall right-to-left context.

                          -

                          This article provides a series of worked examples in HTML that support the advice in the companion article, Inline markup and bidirectional text in HTML.

                          +

                          This article provides a series of worked examples in HTML that support the advice in the companion article, Inline markup and bidirectional text in HTML.

                          It also describes a number of elements, attributes and characters that are commonly used for managing text direction in HTML.

                          -
                          -
                          -

                          Useful markup and control codes

                          -
                          -

                          The dir attribute

                          +
                          +

                          Useful markup and control codes

                          +
                          +

                          The dir attribute

                          The dir attribute sets the base direction for the content of an element.

                          To set the default direction of the whole HTML document to right-to-left, add dir="rtl" to the html tag. This will result in all elements in the document inheriting a base direction of RTL.

                          You can change the base direction for content within a page by surrounding that content with an element and adding a dir attribute to indicate the desired direction.

                          -

                          In principle, the right thing to do for every opposite-direction phrase is to set its base direction by using the dir attribute on an element tightly wrapping the phrase.

                          +

                          In principle, the right thing to do for every opposite-direction phrase is to set its base direction by using the dir attribute on an element tightly wrapping the phrase.

                          The dir attribute also isolates the content of the element from the content surrounding it in terms of the bidi algorithm. Wrapping the opposite-direction phrases in an element with a dir attribute, helps address some of bidi problems; adding isolation helps resolve some more.

                          @@ -115,10 +121,10 @@

                          The LRM/RLM

                          +
                          +

                          LRM/RLM

                          -

                          The visual order in which text is displayed can sometimes be modified using two invisible Unicode control characters: LRM (U+200E LEFT-TO-RIGHT MARK) which can be added to the source text using the character itself or the escapes ‎ or ‎, and RLM (U+200F RIGHT-TO-LEFT MARK), for which the escapes are ‏ or ‏). Each has the strong type indicated by its name, like an A or an א, but is invisible.

                          +

                          The visual order in which text is displayed can sometimes be modified using two invisible Unicode control characters: LRM (U+200E LEFT-TO-RIGHT MARK) which can be added to the source text using the character itself or the escapes ‎ or ‎, and RLM (U+200F RIGHT-TO-LEFT MARK), for which the escapes are ‏ or ‏. Each has the strong directional property type, like an A or an א, but the character is invisible.

                          @@ -128,8 +134,8 @@

                          LRM/RLM

                          In HTML, where the dir attribute is isolating, both cases are addressed by adding the dir attribute to an element wrapping the opposite-direction phrase, so there may be no need to use LRM/RLM. See below for details.

                          -
                          -

                          dir="auto"

                          +
                          +

                          dir="auto"

                          HTML addresses another need: text dropped into a page, say from a database, when you don't know its base direction. Before HTML5, you could only set the dir attribute to ltr or rtl, and had to somehow determine yourself which of them was appropriate.

                          -
                          -

                          The bdi element

                          +
                          +

                          The bdi element

                          The bdi (bidirectional isolate) element is just like a span that directionally isolates its content from the surrounding text, and uses first-strong heuristics to guess the base direction for its content. This is the same as using a dir attribute set to auto and wrapped around your content. It is most likely to be useful if you don't already have an element wrapping your content, as an alternative to adding a span with the dir attribute.

                          -
                          -

                          The bdo element

                          +
                          +

                          The bdo element

                          The bdo (bidirectional override) element prevents the bidirectional algorithm from rearranging the sequence of characters it encloses, and allows you to display the sequence from right to left or from left to right in the order in which the characters are stored in memory.

                          @@ -203,69 +208,90 @@

                          The CSS shim

                          -
                          -

                          Worked examples for static use cases

                          +
                          +

                          Worked examples for static use cases

                          -

                          In this section we look at how to write code that addresses various use cases where the content is written by the author. The section following this deals with use cases where content is injected into the page.

                          +

                          In this section we look at code to address various use cases for static pages, ie. where the content is written by a content author. The section following this deals with use cases where content is injected into the page.

                          -
                          -

                          Use case 1: Nested bidi

                          -

                          A right-to-left book title is embedded in a left-to-right context, and the book title itself contains an embedded left-to-right phrase. Here is the code without any additional bidi markup:

                          -
                          -
                          Bad code. Don't copy!
                          -

                          <p>the title is "AN INTRODUCTION TO c++" in arabic.</p>

                          -
                          -

                          What one would expect to see is:

                          -
                          -

                          Displayed result of previous code

                          -
                          -

                          Unfortunately, the bidirectional algorithm cannot tell where the boundaries of the nested changes in base direction should be. The result, without help in the markup, is:

                          -
                          -

                          Displayed result of previous code

                          -
                          +
                          +

                          Use case 1: Nested bidi

                          + +

                          A right-to-left book title is embedded in a left-to-right context, and the book title itself contains an embedded left-to-right phrase. Here is the code without any additional bidi markup:

                          + +
                          +
                          Bad code. Don't copy!
                          +

                          <p>the title is "AN INTRODUCTION TO c++" in arabic.</p>

                          +
                          + +
                          +

                          Output in your browser:

                          +

                          The title is "مدخل إلى C++" in Arabic.

                          +
                          + +

                          Unfortunately, the bidirectional algorithm cannot tell where the boundaries of the nested changes in base direction should be. The result, without help in the markup, is:

                          + +
                          +

                          Displayed result of previous code

                          +
                          + +

                          What one would expect to see is:

                          +
                          +

                          Displayed result of previous code

                          +

                          Fixing use case 1

                          -

                          To address this in HTML, if there is no other markup around the opposite-direction phrases, wrap both in markup with the appropriate dir value. (Note, by the way, how the markup appears inside the quotation marks, which are part of the English text.)

                          +

                          To address this in HTML, if there is no other markup around the opposite-direction phrases, wrap both in inline markup such as span with the appropriate dir value. (Note, by the way, how the markup appears inside the quotation marks, which are part of the English text.)

                          +
                          -

                          <p>the title is "<span dir="rtl">AN INTRODUCTION TO <span dir="ltr">c++</span></span>" in arabic.</p>

                          -
                          Test in your browser.
                          +

                          <p>the title is "<span dir="rtl">AN INTRODUCTION TO <span dir="ltr">c++</span></span>" in arabic.</p>

                          +
                          -

                          It is important to take into account that each phrase is nested. Just wrapping the Arabic in one span followed by a span containing the C++ would result in no improvement at all.

                          +
                          +

                          Output in your browser:

                          +

                          The title is "مدخل إلى C++" in Arabic.

                          +
                          + + +

                          It is important to take into account that each phrase is nested. Just wrapping the Arabic in one span followed by a span containing the C++ would result in no improvement at all.

                          advanced usage notes: Note that two elements with dir are needed in this case. This is because there are two opposite-direction phrases. If only one was used, like this:

                          Bad code. Don't copy!
                          -

                          <p>the title is "<span dir="rtl">AN INTRODUCTION TO c++</span>"</p>

                          +

                          <p>the title is "<span dir="rtl">AN INTRODUCTION TO c++</span>" in arabic.</p>

                          the displayed text would be as shown below. This moves the C++ to the left, as needed, but the + signs appear on the wrong side of the C.

                          -

                          Displayed result of previous code

                          +

                          Displayed result of previous code

                          This fails because the "C++" is an opposite-direction (LTR) phrase within the title, ending in neutral characters and the phrase is now being displayed with an RTL base direction. The bidi algorithm has no way of knowing that the plus signs are part of an LTR phrase, not of the RTL context, and thus displays them to the left of the "C" instead of to its right.

                          -

                          To solve this problem, wrap the overall RTL phrase in a <span dir="rtl">, and the LTR phrase nested inside it in its own <span dir="ltr">, as shown.

                          -
                          -

                          If there is already suitable markup to surround the book title, such as a cite element, add the dir attribute to that.

                          +
                          +

                          If there is already markup around the book title, such as a cite element, add the dir attribute to that.

                          -

                          <p>the title is <cite dir="rtl">AN INTRODUCTION TO <span dir="ltr">c++</span></cite> in arabic.</p>

                          -
                          Test in your browser.
                          +

                          <p>the title is <cite dir="rtl">AN INTRODUCTION TO <span dir="ltr">c++</span></cite> in arabic.</p>

                          +
                          +
                          +

                          Output in your browser:

                          +

                          The title is مدخل إلى C++ in Arabic.

                          +
                          +

                          advanced usage notes: If the "C++" in this example was an ordinary Latin-script word, such as "Python" you wouldn't actually need to mark it up to get the right display. The bidi algorithm would take care of it. However marking up text in this way avoids you having to understand why these two cases are different, and having to work out which case applies for your content.

                          Similarly, if the title contained no embedded left-to-right text, you wouldn't actually need directional markup at all, but adding it avoids possible issues related to following inline text, such as where the text is edited to add a following number or another title, like this:

                          -

                          <p>the titles are <cite dir="rtl">AN INTRODUCTION TO ARABIC</cite>, <cite dir="rtl">FIRST STEPS IN URDU</cite>, and <cite dir="rtl">MASTERING HEBREW</cite>.</p>

                          +

                          <p>the titles are <cite dir="rtl">AN INTRODUCTION TO ARABIC</cite>, <cite dir="rtl">FIRST STEPS IN URDU</cite>, and <cite dir="rtl">MASTERING HEBREW</cite>.</p>

                          Bulletproofing for legacy browsers

                          -

                          The solution outlined for modern browsers will work equally well for legacy browsers.

                          +

                          For this particular use case, the solution outlined for modern browsers will work equally well for legacy browsers.

                          advanced usage notes: As noted earlier, one use of LRM and RLM is to extend a directional run through neutral or weak characters at the start or end of an opposite-direction phrase, by putting a mark of the same direction as the phrase on the other side of those neutral or weak characters. For this example, instead of wrapping the "C++" in a <span dir="ltr">, we could add &lrm; after the second plus:

                          @@ -284,59 +310,103 @@

                          Bulletproofing for l

                          -
                          -

                          Use case 2: Following numbers

                          +
                          +

                          Use case 2: Following numbers

                          In the next example, the opposite-direction phrase is followed by a logically separate number. This is the code without any bidi markup:

                          -
                          -
                          Bad code. Don't copy!
                          -

                          <p>we find the phrase 'INTERNATIONALIZATION ACTIVITY' 5 times on the page.</p>

                          -
                          -

                          You would expect to see:

                          -
                          -

                          Displayed result of previous code

                          -
                          -

                          You would actually see:

                          -
                          -

                          Displayed result of previous code

                          -
                          -

                          This happens because the bidi algorithm tells the browser to treat the "5″ as part of the Hebrew text. Although this is often appropriate, it not appropriate here. We need to find a way to say that the name and the number are separate things, ie. to isolate the inserted name from the number.

                          -
                          -
                          -

                          Fixing use case 2

                          -

                          Wrap the opposite-direction phrase (the title) in markup and add the appropriate dir value. There is no need to add anything else, since the dir attribute automatically isolates its content.

                          +
                          -

                          <p>we find the phrase '<span dir="rtl">INTERNATIONALIZATION ACTIVITY</span>' 5 times on the page.</p>

                          -
                          Test in your browser.
                          +
                          Bad code. Don't copy!
                          +

                          <p>we find the phrase 'INTERNATIONALIZATION ACTIVITY' 5 times on the page.</p>

                          +
                          + +
                          +

                          Output in your browser:

                          +

                          We find the phrase 'פעילות הבינאום' 5 times on the page.

                          +
                          + +

                          You would see:

                          + +
                          +

                          Displayed result of previous code

                          +
                          + +

                          You would actually expect to see:

                          + +
                          +

                          Displayed result of previous code

                          -

                          If there is already suitable markup to surround the book title, such as an a element, add the dir attribute to it.

                          +

                          This happens because the bidi algorithm tells the browser to treat the "5″ as part of the Hebrew text. Although this is often appropriate, it not appropriate here. We need to find a way to say that the name and the number are separate things, ie. to isolate the inserted name from the number.

                          +
                          + + + + + +
                          +

                          Fixing use case 2

                          +

                          Wrap the opposite-direction phrase (the title) in markup and add the appropriate dir value. There is no need to add anything else, since the dir attribute automatically isolates its content.

                          -

                          <p>we find the phrase '<a href="..." dir="rtl">INTERNATIONALIZATION ACTIVITY</a>' 5 times on the page.</p>

                          -
                          Test in your browser.
                          +

                          <p>we find the phrase '<span dir="rtl">INTERNATIONALIZATION ACTIVITY</span>' 5 times on the page.</p>

                          +
                          -
                          + +
                          +

                          Output in your browser:

                          +

                          We find the phrase 'פעילות הבינאום' 5 times on the page.

                          +
                          + + +

                          If there is already suitable markup to surround the book title, such as an a element, add the dir attribute to it, instead.

                          + +
                          +

                          <p>we find the phrase '<a href="..." dir="rtl">INTERNATIONALIZATION ACTIVITY</a>' 5 times on the page.</p>

                          + +
                          + +
                          +

                          Output in your browser:

                          +

                          We find the phrase 'פעילות הבינאום' 5 times on the page.

                          +
                          +

                          Bulletproofing for legacy browsers

                          -

                          For browsers where dir doesn't isolate, you would fix this by not only adding the markup around the opposite direction, Hebrew text, but adding also an LRM character after it. That would prevent the number being associated with the right-to-left text.

                          +

                          All major browser engines now provide isolation when the dir attribute is used. For legacy browsers where dir doesn't isolate, you would fix this by not only adding the markup around the opposite direction, Hebrew text, but adding also an LRM character after it. That would prevent the number being associated with the right-to-left text.

                          +
                          -

                          <p>we find the phrase '<span dir="rtl">INTERNATIONALIZATION ACTIVITY</span>' &lrm;5 times on the page.</p>

                          -
                          Test in your browser.
                          +

                          <p>we find the phrase '<span dir="rtl">INTERNATIONALIZATION ACTIVITY</span>' &lrm;5 times on the page.</p>

                          +
                          -

                          If the search string was already tightly wrapped by an element, use that element tag to add the dir attribute, and add the LRM character after it.

                          +
                          +

                          Output in your browser:

                          +

                          We find the phrase 'פעילות הבינאום' ‎5 times on the page.

                          +
                          + + +

                          If the search string was already tightly wrapped by an element, use that element tag to add the dir attribute, and add the LRM character after it.

                          Of course, if the overall context is right-to-left, eg. Arabic/Hebrew/etc. text, and the book title was in English, you would need to add an RLM character rather than an LRM character.

                          -
                          -

                          Use case 3: Lists

                          +
                          +

                          Use case 3: Lists

                          Neutrals between same directional runs can sometimes be misinterpreted by the bidi algorithm. In this use case we have several country names in Arabic listed in a LTR paragraph. This is an example of an opposite-direction phrase followed by another, but logically separate, opposite-direction phrase. Here is the source code without any bidi markup:

                          -
                          -
                          Bad code. Don't copy!
                          -

                          <p>the names of these states in arabic are EGYPT, BAHRAIN and KUWAIT respectively.</p>

                          -
                          -

                          We expect to see the following:

                          + +
                          +
                          Bad code. Don't copy!
                          +

                          <p>the names of these states in arabic are EGYPT, BAHRAIN and KUWAIT, respectively.</p>

                          +
                          + + +
                          +

                          Output in your browser:

                          +

                          The names of these states in arabic are مصر, البحرين and الكويت, respectively.

                          +
                          + + +

                          We expect to see the following:

                          Egypt appears to the left of Bahrain.

                          @@ -354,48 +424,72 @@

                          Use case 3: Lists

                          Fixing use case 3

                          Simply wrap each Arabic word with markup and add the appropriate dir value.

                          -

                          <p>the names of these states in arabic are <span dir="rtl">EGYPT</span>, <span dir="rtl">BAHRAIN</span> and <span dir="rtl">KUWAIT</span> respectively.</p>

                          -
                          Test in your browser.
                          +

                          <p>the names of these states in arabic are <span dir="rtl">EGYPT</span>, <span dir="rtl">BAHRAIN</span> and <span dir="rtl">KUWAIT</span> respectively.</p>

                          +
                          -

                          If there is already markup surrounding the Arabic text, such as an a element, add the dir attribute to it.

                          +
                          +

                          Output in your browser:

                          +

                          The names of these states in Arabic are مصر, البحرين and الكويت respectively.

                          +
                          + +

                          If there is already markup surrounding the Arabic text, such as an a element, add the dir attribute to it.

                          +
                          -

                          <p>the names of these states in arabic are <a href="..." dir="rtl">EGYPT</a>, <a href="..." dir="rtl">BAHRAIN</a> and <a href="..." dir="rtl">KUWAIT</a> respectively.</p>

                          -
                          Test in your browser.
                          -
                          -
                          +

                          <p>the names of these states in arabic are <a href="..." dir="rtl">EGYPT</a>, <a href="..." dir="rtl">BAHRAIN</a> and <a href="..." dir="rtl">KUWAIT</a> respectively.</p>

                          + + + +
                          +

                          Output in your browser:

                          +

                          The names of these states in Arabic are مصر, البحرين and الكويت respectively.

                          +
                          +

                          Bulletproofing for legacy browsers

                          Add markup around the Arabic text, but add also an LRM character after it whenever that text is followed by another opposite-direction phrase. Use an RLM character if the surrounding context is right-to-left.

                          +
                          -

                          <p>the names of these states in arabic are <span dir="rtl">EGYPT</span>&lrm;, <span dir="rtl">BAHRAIN</span> and <span dir="rtl">KUWAIT</span> respectively.</p>

                          -
                          Test in your browser.
                          +

                          <p>the names of these states in arabic are <span dir="rtl">EGYPT</span>&lrm;, <span dir="rtl">BAHRAIN</span> and <span dir="rtl">KUWAIT</span>, respectively.</p>

                          +
                          +
                          +

                          Output in your browser:

                          +

                          The names of these states in Arabic are مصر‎, البحرين and الكويت, respectively.

                          +

                          As before, if the Arabic text was already tightly wrapped by an element, use that element tag to add the dir attribute.

                          -
                          -

                          Worked examples for dynamic use cases

                          +
                          +

                          Worked examples for dynamic use cases

                          In this section we will look at use cases that involve injecting content into a page at run time.

                          It is important to note that we cannot address markup inside the injected content. In all cases below, if the injected phrases contain embedded opposite-direction phrases themselves, these need to be already marked up when the phrase is injected into the page, either in the database, or added by scripting when the injected phrase is fetched. If this is not done, the injected text will look alright for simple cases, but may be problematic for more complex ones.

                          -
                          -

                          Use case 4: Nested bidi

                          +
                          +

                          Use case 4: Nested bidi

                          In the article Structural markup and right-to-left text in HTML there is an example of a page for an online book store that carries books in many languages and needs to display the original book titles regardless of the language of the user interface. Thus, a Hebrew or Arabic book title may appear in an English interface, and vice-versa.

                          Let us suppose that you searched for the book הצהרות קידוד תװי CSS and and let's further suppose that that book wasn't found. The bookstore might generate a message that says so. The image below shows what one would expect to see.

                          Book not found message.

                          Note how the 'CSS' is to the left of the Hebrew text because it is part of the book title. However with the following source code ...

                          -
                          -
                          Bad code. Don't copy!
                          -

                          <p>your search - <cite class="booktitle">CHARACTER ENCODING IN css</cite> - did not match any documents.</p>

                          -
                          -

                          ... here is the actual result. Note how the 'CSS' is now on the right of the Hebrew text.

                          + +
                          +
                          Bad code. Don't copy!
                          +

                          <p>your search - <cite class="booktitle">CHARACTER ENCODING IN css</cite> - did not match any documents.</p>

                          +
                          + +
                          +

                          Output in your browser:

                          +

                          Your search – הצהרות קידוד תװי CSS – did not match any documents.

                          +
                          + + +

                          ... here is the actual result. Note how the 'CSS' is now on the right of the Hebrew text.

                          Book not found message.

                          @@ -404,35 +498,51 @@

                          Use case 4: Nested bidi

                          Fixing use case 4

                          The default rule when there is no other element around the injected text, is to wrap it in bdi.

                          +
                          -

                          <p>your search - <bdi><?php echo $theString; ?></bdi> - did not match any documents.</p>

                          -
                          Test in your browser.
                          +

                          <p>your search – <bdi><?php echo $theString; ?></bdi> – did not match any documents.</p>

                          +
                          +
                          +

                          Output in your browser:

                          +

                          Your search – הצהרות קידוד תװי CSS – did not match any documents.

                          +
                          + +

                          The bdi tag automatically assigns a direction based on the first strong character in the injected string.

                          advanced usage notes:It is possible that the search string in this example begins with a strong left-to-right character, for example, if the book title that we are searching for begins with 'CSS', rather than ending with it. In that case, there is not much we can do by default in the markup. To cover this case you would have to use scripting to detect the direction of the string as a whole and apply that to the markup.

                          If there is another element around the injected text, use dir="auto".

                          -

                          <p>your search - <cite dir="auto"><?php echo $theString; ?></cite> - did not match any documents.</p>

                          -
                          Test in your browser.
                          +

                          <p>your search – <cite dir="auto"><?php echo $theString; ?></cite> – did not match any documents.</p>

                          +
                          -
                          - + +
                          +

                          Output in your browser:

                          +

                          Your search – הצהרות קידוד תװי CSS – did not match any documents.

                          +
                          +
                          + + + + +

                          Bulletproofing for legacy browsers

                          Without the expected HTML markup behavior we can't really address this use case using markup, since we need to know in advance the direction of the text. This can only be achieved by knowing the direction of or examining the injected phrase before insertion, and applying the appropriate directional information by scripting.

                          -
                          -

                          Use case 5: Following numbers

                          +
                          +

                          Use case 5: Following numbers

                          Here's an example where the names of restaurants are added to a page from a database and followed by a number. You don't know in advance the directionality of the injected text. This is the code produced by the script that injects the phrases, without bidi markup:

                          Bad code. Don't copy!
                          - 
                          <p><span class="name">aroma</span> - 3 reviews</p>
+      
                          <p><span class="name">aroma</span> - 3 reviews</p>
 <p><span class="name">PURPLE PIZZA</span> - 5 reviews</p>
-<p><span class="name">PURPLE PIZZA roma</span> - 3 reviews</p>
                          
+<p><span class="name">PURPLE PIZZA roma</span> - 3 reviews</p>

                          And here's what one would expect to see, and what you'd actually see.

                          @@ -450,37 +560,59 @@

                          Use case 5: Following numbers

                          Fixing use case 5

                          Once again, the default rule when there is no other element around the injected text, is to wrap it in bdi. The bdi element automatically isolates the injected phrase from the number, and sets the direction for the phrase based on its first strong character.

                          +
                          -

                          foreach $restaurant echo "<p><bdi>$restaurant['name']</bdi> - $restaurant['count'] reviews</p>";

                          -
                          Test in your browser.
                          -
                          +

                          foreach $restaurant +echo "<p><bdi>$restaurant['name']</bdi> - $restaurant['count'] reviews</p>";

                          + +
                          + + +
                          +

                          Output in your browser:

                          +
                          Top rated restaurants
                          +

                          Aroma - 3 reviews

                          5 stars
                          +

                          פיצה סגלה - 5 reviews

                          5 stars
                          +

                          פיצה סגלה Roma - 3 reviews

                          5 stars
                          +
                          +

                          The bdi tag automatically assigns a direction based on the first strong character in the injected string.

                          You'll notice that the example above puts bdi around the name Aroma too. Of course, you don't actually need that, but it won't do any harm. On the other hand, it simplifies the necessary script code, and means you can handle any name that comes out of the database, whatever script it is in.

                          If there is another element around the injected text, use dir="auto".

                          +
                          -

                          foreach $restaurant echo "<p><a href='...' dir='auto' class='name'>$restaurant['name']</a> - $restaurant['count'] reviews</p>";

                          -
                          Test in your browser.
                          -
                          -
                          +

                          foreach $restaurant +echo "<p><a href='...' dir='auto' class='name'>$restaurant['name']</a> - $restaurant['count'] reviews</p>";

                          + + + + +
                          +

                          Output in your browser:

                          +

                          Aroma - 3 reviews

                          5 stars
                          +

                          פיצה סגלה - 5 reviews

                          5 stars
                          +
                          +

                          Bulletproofing for legacy browsers

                          -

                          Again, without HTML5 markup behavior, all we can do is add a LRM character after the injected phrase, to ensure that it is isolated from the number. This would be sufficient to correctly render the second item in the list, because it is a very simple case, with no embedded opposite-direction phrases or neutral characters. The third case, however, will not work so well, since the base direction has to be set to right-to-left for the word 'Roma' to appear on the left. This can only be properly rendered if the injected phrase has markup added to it before insertion.

                          +

                          Again, without HTML5 markup behavior, all we can do is add an LRM character after the injected phrase, to ensure that it is isolated from the number. This would be sufficient to correctly render the second item in the list, because it is a very simple case, with no embedded opposite-direction phrases or neutral characters. The third case, however, will not work so well, since the base direction has to be set to right-to-left for the word 'Roma' to appear on the left. This can only be properly rendered if the injected phrase has markup added to it before insertion.

                          The code would look something like this.

                          -

                          foreach $restaurant echo "<p><span class='name' dir='auto'>$restaurant['name']</span>&lrm; - $restaurant['count'] reviews</p>";

                          -
                          Test in your browser.
                          +
                          foreach $restaurant
+echo "<p><span class='name' dir='auto'>$restaurant['name']</span>&lrm; - $restaurant['count'] reviews</p>";
                          +
                          -
                          -

                          Additional examples

                          +
                          +

                          Additional examples

                          -
                          -

                          Use case 6: Punctuation at the end of an opposite-direction phrase

                          +
                          +

                          Use case 6: Punctuation at the end of an opposite-direction phrase

                          It is a very common situation for punctuation or some other neutral character to appear at the end of an opposite direction phrase and belong with that phrase.

                          Unfortunately, such neutrals between different directional runs are typically misinterpreted unless there is additional bidi markup. In the following example, the exclamation mark should appear at the end of the Arabic text, ie. to the left, like this:

                          @@ -491,7 +623,7 @@

                          Use case 6: Punctuation at the end of an o

                          An exclamation mark appearing to the right of Arabic text.

                          -

                          Given our understanding of the bidi algorithm we can easily understand why this happened. Because the exclamation mark was typed in +

                          Given a basic understanding of the bidi algorithm, we can easily understand why this happened. Because the exclamation mark was typed in between the last RTL letter 'ب' (on the left)‌ and the LTR letter 'i' (of the word 'in') its directionality is determined by the base direction of the paragraph, ie. LTR in this case.

                          Because the exclamation mark is seen as LTR it joins the directional run that includes the text @@ -501,11 +633,19 @@

                          Use case 6: Punctuation at the end of an o

                          Fixing use case 6 when the direction is known

                          The general solution mentioned above works fine: just put the opposite-direction phrase in an element with a dir attribute. If there isn't already an element present, use a span.

                          +
                          -

                          <p>the title is "<cite dir="rtl" lang="ar">INTERNATIONALIZATION ACTIVITY!</cite>" in arabic.</p>

                          -
                          Test in your browser.
                          +

                          <p>the title is "<cite dir="rtl" lang="ar">INTERNATIONALIZATION ACTIVITY!</cite>" in arabic.</p>

                          +
                          + +
                          +

                          Output in your browser:

                          +

                          The title is "مفتاح معايير الويب!" in Arabic.

                          +
                          + +

                          advanced usage notes:You could also simply place an RLM after the exclamation mark, but we have already discussed earlier why that is a less ideal fix. Note, also, that when using this solution, without markup, the Arabic text is not marked up for language or styling. Adding markup around the embedded title is probably a better way to solve the problem.

                          @@ -514,16 +654,26 @@

                          Fixing use case 6 when the d

                          Fixing use case 6 for injected text

                          Use bdi if there isn't already a surrounding element, otherwise put a dir="auto" on the surrounding element.

                          +
                          -

                          <p>the title is "<bdi lang="ar">INTERNATIONALIZATION ACTIVITY!</bdi>" in arabic.</p>

                          -

                          <p>the title is "<cite dir="auto" lang="ar">INTERNATIONALIZATION ACTIVITY!</cite>" in arabic.</p>

                          -
                          Test in your browser.
                          +

                          <p>the title is "<bdi lang="ar">INTERNATIONALIZATION ACTIVITY!</bdi>" in arabic.</p>

                          +

                          <p>the title is "<cite dir="auto" lang="ar">INTERNATIONALIZATION ACTIVITY!</cite>" in arabic.</p>

                          +
                          -
                          - -
                          -

                          Use case 7: Telephone numbers, MAC addresses, etc.

                          + +
                          +

                          Output in your browser:

                          +

                          The title is "مفتاح معايير الويب!" in Arabic.

                          +

                          The title is "مفتاح معايير الويب!" in Arabic.

                          +
                          +
                          + + + + +
                          +

                          Use case 7: Telephone numbers, MAC addresses, etc.

                          The picture below shows the expected result of displaying a telephone number in a right-to-left context, where the area code is surrounded by parentheses, and where the number appears at the beginning of a line or after some right-to-left text.

                          Telephone number correctly ordered.

                          @@ -549,29 +699,51 @@

                          Use case 7: Telephone numbers, MAC address

                          Fixing use case 7 when the direction is known

                          The solution is the same. Put the opposite-direction phrase in an element with a dir attribute. If there isn't already an element present, use a span. The following code would be used in an overall right-to-left context.

                          +
                          -

                          <p>... <span dir="ltr">(012) 345 6789</span> ...</p>

                          -

                          <p>כתובת <span dir="ltr">‎‎01:02:aa:4a:bb:06</span> ...</p>

                          +

                          <p>... <span dir="ltr">(012) 345 6789</span> ...</p>

                          +

                          <p>כתובת <span dir="ltr">‎‎01:02:aa:4a:bb:06</span> ...</p>

                          Test in your browser.
                          -
                          + +
                          +

                          Output in your browser:

                          +
                          +

                          ... (012) 345 6789 ...

                          +

                          כתובת 01:02:aa:4a:bb:06 ...

                          +
                          +
                          +

                          -
                          -

                          Fixing use case 7 for injected text

                          + + + + +
                          +

                          Fixing use case 7 for injected text

                          +

                          Use bdi if there isn't already a surrounding element, or put dir="auto" on a surrounding element. We just show the simplest case here. The following code would be used in an overall right-to-left context.

                          +
                          -

                          <p>...<bdi>(012) 345 6789</bdi> ...</p>

                          -

                          <p>כתובת <bdi>‎‎01:02:aa:4a:bb:06</bdi> ...</p>

                          +

                          <p>...<bdi>(012) 345 6789</bdi> ...</p>

                          +

                          <p>כתובת <bdi>‎‎01:02:aa:4a:bb:06</bdi> ...</p>

                          Test in your browser.
                          -
                          + + +
                          +

                          Output in your browser:

                          +
                          +

                          ...(012) 345 6789 ...

                          +

                          כתובת 01:02:aa:4a:bb:06 ...

                          +

                          advanced usage notes:You could also solve both of these cases by simply inserting an RLM immediately before the number. Adding markup around the number is probably a safer way to solve the problem.

                          -
                          - +

                          + +

                          Ruby is a name given to the small annotations, typically used in Japanese, Chinese and Traditional Mongolian content, that are rendered alongside base text, usually to provide a pronunciation guide, but sometimes to provide other information.

                          + +

                          The term 'ruby' was adopted into Japanese typesetting after originally being used for British printing. In China these may be called 'interlinear annotations'. In this article we use the word 'ruby' to refer to the combination of 'base characters' plus their 'annotations'.

                          + +

                          We will assume that you are familiar with ruby, and how you want it to look. (If not, see the short overview of how ruby works.)

                          + +

                          This article will only discuss how to use CSS styling to affect the rendering of ruby content. For information about how to create the markup needed to support ruby, see Ruby Markup.

                          + + + + + +

                          The draft of the CSS Ruby Layout Module Level 1 provides a number of initial properties for describing the placement of ruby text in relation to the base text. Later versions of the spec are expected to add more properties. Note that this specification is not yet finalized, so this page will aim to give you an idea of what to expect if it is fully implemented, as well as describing what is currently supported.

                          + +

                          We won't simply reproduce the spec itself here, but rather provide guidance about how content authors can achieve key techniques. We will assume that your ruby content is marked up appropriately, so that the mapping between ruby bases and ruby text is correct.

                          -
                          -

                          Basic configurations

                          -

                          This section provides some suggestions for how to style annotations with Japanese and Chinese. The expected behavior is based on the layout requirements documents for Japanese (JLReq) and Chinese (CLReq). Only the more common configurations are described here; subsequent sections explain how to do fine tuning.

                          -

                          What follows assumes that you have used markup to map ruby text annotations to base characters appropriately, as described in the article Ruby Markup.

                          -
                          -

                          Japanese

                          -

                          Mono ruby is typically used to represent pronunciation of Japanese kanji characters. Each ideographic base character is mapped in markup to an annotation that indicates how to pronounce it (usually using hiragana).

                          -

                          As you can see in the following example, the annotations don't overlap adjacent kanji characters, and they are normally centred over the base character (in Japanese this is called nakatsuke). Lines can break between the base characters.

                          + + + +
                          +

                          Basic configurations

                          + +

                          This section describes typical scenarios for Japanese and Chinese. The expected behavior is based on the layout requirements documents for Japanese (JLReq) and Chinese (CLReq). Only the more common configurations are described here; subsequent sections will explain how to produce these configurations, and how to tailor the results.

                          + +

                          What follows assumes that you have used markup to map ruby text annotations to base characters appropriately, as described in the article Ruby Markup.

                          +
                          +

                          Japanese

                          + +

                          Mono ruby is typically used to represent pronunciation of Japanese kanji characters. Each ideographic base character is mapped in markup to an annotation that indicates how to pronounce it (usually using hiragana).

                          + +

                          As you can see in the following example, the annotations don't overlap adjacent kanji characters, and they are normally centred relative to the base character (in Japanese this is called nakatsuke). Lines can break between the base characters.

                          +
                          -
                          -

                          Horizontal ruby for 常用漢字表(じょうようかんじひょう)

                          -
                          Typical Japanese ruby.
                          -
                          -
                          -

                          This is usually produced automatically by the default display behavior of browsers, however if you want to style it explicitly, you would use the following CSS.

                          - -
                          - 
                          ruby { 
-    ruby-position: over;
-    ruby-align: center;
-    }
                          -
                          Test in your browser.
                          -
                          - - - - -

                          If the annotation doesn't fit over the base character you can expect one of the following things to happen.

                          -
                            -
                          1. If the character alongside is a kanji character, the base characters will be spaced a little wider so that the ruby text doesn't overlap.
                            2. -
                          2. If the character alongside is punctuation or kana, the annotation will overlap it up to a certain point.
                            3. -
                          3. If the base character is next to the line start or end, a little extra space will be added alongside the base character so that the annotation doesn't stick into the margin.
                            4. -
                          -

                          This behaviour is currently browser dependent, rather than specified in CSS.

                          -

                          For a jukuji annotation, where the kana don't map to individual base characters, such as for 田舎 (いなか), you will need to use group ruby. A single annotation is mapped in markup to a range of base characters. A kana annotation is normally spread across the base text evenly, with a little extra space at either end. If the annotation is in the Latin script, however, it is normally centred on the base text. Base characters in group ruby are not split across line breaks.

                          -

                          Since this is different styling from the normal phonetic approach, you will need to indicate in markup, using a class name, the items that should be treated as group ruby. Assuming we used a class name of jukuji, you could then add the following to your style sheet.

                          -
                          - 
                          .jukuji { 
-    ruby-position: over;
-    ruby-align: space-around;
-    }
                          -
                          Test in your browser.
                          -
                          -

                          If you want to apply a semantic, rather than phonetic, annotation, you will also need to use group ruby. The annotation is usually aligned as per the jukuji example just described. You may, however, want the annotation to appear on the other side of the base characters. To achieve this, you need to change the ruby-position value. The following code snippet assumes that such annotations have been given a class of semanticRuby.

                          -
                          - 
                          .semanticRuby { 
-    ruby-position: under;
-    ruby-align: space-around;
-    }
                          -
                          Test in your browser.
                          -
                          -
                          - -
                          -

                          Japanese variants

                          -
                          -

                          The sections lower down this page indicate how you can change some of these basic styles. For example, in vertical text you could set ruby-align to start to make the phonetic ruby annotations align with the start of the base text (called katatsuke in Japanese), or you could eliminate the extra space around a group-ruby annotation (by setting ruby-align to space-between).

                          - -
                          -
                          - -
                          -

                          Simplified Chinese

                          -

                          In Mainland China phonetic annotations normally consist of pinyin transcriptions, which are written in the Latin script. Content annotated with pinyin is usually only set horizontally, since Latin text would be sideways in vertical text and is harder to read.

                          -

                          There are two common approaches to phonetic annotation: character based and word based.

                          -

                          Character based annotations are common in text used for Chinese children, whereas word based annotations are often found in texts for those learning the Chinese language.

                          -

                          For character based phonetic annotations, you will need to use the markup to map each ideographic base character to an annotation that indicates how to pronounce it. This is mono ruby. The annotations usually appear above the base text.

                          -
                          -
                          -

                          Horizontal mono ruby for 他生怕被人笑话，立志要画得圆。 (tā shēng pà bèi rén xiào huà, li zhi yào huà de yuán.)

                          -
                          Character-based phonetic annotations using pinyin.
                          -
                          -
                          -

                          Word based phonetic annotations use group ruby, associating one annotation with more than one base character, and forbidding line breaks inside the annotation. Note how the top line below no longer breaks between the two parts of the word lizhi.

                          -
                          -
                          -

                          Horizontal word-based ruby for 他生怕被人笑话，立志要画得圆。 (tā shēng pà bèi rén xiào huà, li zhi yào huà de yuán.)

                          -
                          Word-based phonetic annotations using pinyin.
                          -
                          -
                          -

                          In both of these examples, the annotations are centred above the base text. This behaviour is usually produced by default by the browser, but if you want to explicitly style it you can use the following.

                          -

                          Sometimes, however, the word-based approach places the annotation below the base text.

                          -
                          - 
                          ruby { 
-    ruby-position: over;
-    ruby-align: center;
-    }
                          -
                          Test in your browser.
                          -
                          -

                          To make the pinyin appear below the base text, change the value of ruby-position to under.

                          -
                          -
                          -

                          Horizontal word-based ruby for 他生怕被人笑话，立志要画得圆。 (tā shēng pà bèi rén xiào huà, li zhi yào huà de yuán.) displayed below the base text.

                          -
                          Word-based phonetic annotations using pinyin placed below the base characters.
                          -
                          -
                          -

                          As for the Japanese section above, if the annotation doesn't fit over the base character you can expect one of the following things to happen.

                          -
                            -
                          1. If the character alongside is a hanzi character, the base characters will be spaced a little wider so that the ruby text doesn't overlap.
                            2. -
                          2. If the character alongside is punctuation or kana, the annotation will overlap it up to a certain point. Check whether this is true.
                            3. -
                          3. If the base character is next to the line start or end, a little extra space will be added alongside the base character so that the annotation doesn't stick into the margin. Check whether this is true.
                            4. -
                          -

                          In some cases, care may need to be taken to ensure that long pinyin annotations don't run into each other. This can be achieved by increasing the tracking of the hanzi characters or by reducing the size of the annotation text. The syllabic nature of the script makes it fairly easy in most cases to spot the start and end of an annotation.

                          +
                          +

                          Horizontal ruby for 常用漢字表(じょうようかんじひょう) +  +Vertical ruby for 常用漢字表(じょうようかんじひょう)

                          +
                          Typical Japanese ruby.
                          +
                          +
                          +

                          If the annotation doesn't fit over the base character you can expect one of the following things to happen.

                          + +
                            +
                          1. If the character alongside is a kanji character, the base characters will be spaced a little wider so that the ruby text doesn't overlap.
                            2. + +
                          2. If the character alongside is punctuation or kana, the annotation will overlap it up to a certain point.
                            3. + +
                          3. If the base character is next to the line start or end, a little extra space will be added alongside the base character so that the annotation doesn't stick into the margin.
                            4. +
                          + +

                          This behaviour is currently browser dependent, rather than specified using CSS.

                          + +

                          A jukuji annotation occurs where a sequence of base characters has a different pronunciation from what you would expect by looking at the individual base characters, eg. 田舎 (pronounced いなか). Because the kana don't map to individual base characters, you will need to use group ruby: a single annotation is mapped in markup to a range of base characters. The kana annotation is normally spread across the base text evenly, with a little extra space at either end. If the annotation is in the Latin script, however, it is normally centred on the base text. Base characters in group ruby are not split across line breaks.

                          + +

                          Jukugo ruby (note that this is a different term from jukuji!) is a term used to describe special treatment of annotations for compound nouns (jukugo in Japanese). Essentially the annotations for compound nouns can be spread across all of the base characters in the word, like group ruby, but a word can still be split at the end of a line, like mono ruby. Furthermore, the distribution of the annotations for a word may follow detailed rules with regards to allowable overlaps, so that they are not necessarily equally spaced as per group ruby. See some examples.

                          + +

                          Sometimes ruby annotations appear on opposite sides of a base character at the same time. In such cases, the top/right annotation is typically phonetic and uses mono ruby, and the bottom/left annotation is most likely group ruby and provides additional information about the base text.

                          +

                          Annotations and base text may be aligned at the start in vertical text, but are usually centred on the base in horizontal text.

                          +

                          The sections lower down this page indicate how you can change some of these basic styles.

                          -
                          -

                          Traditional Chinese

                          -

                          In Traditional Chinese, bopomofo (zhùyīn fúhào) ruby nearly always appears to the right of the base character, whether the text is set horizontally or vertically. Furthermore, the bopomofo annotation is always set vertically and the tone marks (apart from the light tone) are displayed in an additional column to the right of the bopomofo characters.

                          -
                          -
                          -
                          -
                          - Horizontal ruby for 電(ㄉㄧㄢˋ)腦(ㄋㄠˇ)
                          -
                          Vertical ruby for 電(ㄉㄧㄢˋ)腦(ㄋㄠˇ)
                          -
                          - -
                          Bopomofo (zhùyīn fúhào) annotations alongside Traditional Chinese characters.
                          -
                          -
                          -

                          What you have to do in CSS is indicate that this will be bopomofo ruby, so that the annotation doesn't appear 'over' or 'under' the base text. To do that, you need the inter-character value of ruby-position.

                          -
                          -
                          -
                          -

                          ruby { ruby-position: inter-character; }

                          -
                          Test in your browser.
                          -
                          -
                          -
                          -

                          The vertical placement for the bopomofo and the relative position of the tone characters within the invisible column to the right of the Han base character rely on the browser, or possibly font information. You don't need to specify anything more in CSS.

                          - + + +
                          +

                          Simplified Chinese

                          + +

                          In Mainland China phonetic annotations normally consist of pinyin transcriptions, which are written in the Latin script. Content annotated with pinyin is usually only set horizontally. This is fortunate since Latin text would be set sideways in vertical text, making it harder to read.

                          + +

                          There are two common approaches to phonetic annotation: character based and word based.

                          + +

                          Character based annotations are common in text used for Chinese children, whereas word based annotations are often found in texts for those learning the Chinese language.

                          + +

                          For character-based phonetic annotations, you will need to use markup to map each ideographic base character to an annotation which indicates the pronunciation. This is mono ruby. The annotations usually appear above the base text.

                          + +
                          +
                          +

                          Horizontal mono ruby for 他生怕被人笑话，立志要画得圆。 (tā shēng pà bèi rén xiào huà, li zhi yào huà de yuán.)

                          +
                          Character-based phonetic annotations using pinyin.
                          +
                          +
                          + +

                          Word based phonetic annotations use group ruby, associating one annotation with more than one base character, and forbidding line breaks inside the annotation. Note how the top line in fig_chinese_group_ruby no longer breaks between the two parts of the word lizhi.

                          + +
                          +
                          +

                          Horizontal word-based ruby for 他生怕被人笑话，立志要画得圆。 (tā shēng pà bèi rén xiào huà, li zhi yào huà de yuán.)

                          +
                          Word-based phonetic annotations using pinyin.
                          +
                          +
                          + +

                          In both of these examples, the annotations are centred above the base text.

                          + +

                          Annotations representing meaning or commentaries are common in light novels and translated works, and tend to describe phrases or words. They may contain casing, punctuation, and spaces, and may contain Chinese text explaining Latin base text, or vice versa, and they may appear on the opposite side of the base to phonetic annotations. Sometimes phonetic annotations are also placed below/left of the base.

                          + +
                          +
                          +

                          Horizontal word-based ruby for 他生怕被人笑话，立志要画得圆。 (tā shēng pà bèi rén xiào huà, li zhi yào huà de yuán.) displayed below the base text.

                          +
                          Word-based phonetic annotations using pinyin placed below the base characters.
                          +
                          +
                          + +

                          As for the Japanese section above, if the annotation doesn't fit over the base character you can expect one of the following things to happen.

                          + +
                            +
                          1. Since the annotations are often long, compared to the width of the Han base character, care may need to be taken to ensure that long pinyin annotations don't run into each other. To accomodate this, the tracking of the base text is often increased, to provide additional room. Occasionally, the size of the annotation text may be reduced. There may be some cases where annotations slightly overlap adjacent bases, but only while preserving a minimum space between annotations.
                            2. + +
                          2. If the annotation is longer than the base and is next to the line start or end, both the annotation and the base text can be aligned with line head or end. A little extra space will be added on the other side of the base character so that the annotation fits.
                            3. +
                          3. The syllabic nature of the script makes it fairly easy in most cases to spot the start and end of an annotation, but when adjacent annotations are longer than the base, they should ideally be separated by about a ¼em or ½em space.
                            4. +
                          + +

                          In some cases, care may need to be taken to ensure that long pinyin annotations don't run into each other. This can be achieved by increasing the tracking of the hanzi characters or by reducing the size of the annotation text.

                          + + + + +
                          +

                          Traditional Chinese

                          + +

                          In Traditional Chinese, bopomofo (zhùyīn fúhào) ruby nearly always appears to the right of the base character, whether the text is set horizontally or vertically. Furthermore, the bopomofo annotation is always set vertically and the tone marks (apart from the light tone) are displayed in an additional column to the right of the bopomofo characters. The tones are not combining marks, and the vertical position of the tone mark depends on the arrangement of the phonetic symbols in the previous column.

                          + +
                          +
                          +
                          +
                          +Horizontal ruby for 電(ㄉㄧㄢˋ)腦(ㄋㄠˇ)
                          +
                          Vertical ruby for 電(ㄉㄧㄢˋ)腦(ㄋㄠˇ)
                          +
                          + +
                          Bopomofo (zhùyīn fúhào) annotations alongside Traditional Chinese characters.
                          +
                          +
                          + +

                          Find more information about Bopomofo usage in Traditional Chinese.

                          +
                          -
                          -

                          Positioning ruby relative to the base text

                          -

                          This section looks at how you make the ruby text appear above, below or to the side of the ruby base - text.

                          -
                          -

                          Positioning ruby text 'over' the base

                          -

                          By 'over' we mean above horizontal text and to the right of vertical text.

                          -
                          -
                          -
                          + + + +
                          +

                          Positioning ruby relative to the base text

                          + +

                          Here we look at how you make the ruby text appear above or below the ruby base text, or to the side for bopomofo ruby.

                          +

                          A later section will describe how to display the annotation inline, ie. alongside the base with equal-sized characters.

                          + + + + +
                          +

                          Positioning ruby text 'over' the base

                          + +

                          By 'over' we mean above horizontal text and to the right of vertical text.

                          + +
                          +
                          +
                          Horizontal ruby for 水芝居(みずしばい)
                          Vertical ruby for 水芝居(みずしばい)
                          -
                          -
                          ruby-position set to over.
                          -
                          -
                          -
                          - -

                          This is the default behavior, and you can expect browsers to produce this without CSS. @@@ make the example 紙芝居 kamishibai

                          -

                          If you need to place the ruby explicitly in this position, use:

                          - - +
                          +
                          ruby-position set to over.
                          +
                          +
                          +
                          + +

                          This is the default behavior, and you can expect browsers to produce this without CSS.

                          + +

                          If you need to place the ruby explicitly in this position, use:

                          +
                          -
                          -

                          ruby { ruby-position: over; }

                          -
                          Test in your browser.
                          -
                          -
                          +
                          + + + + + +
                          +

                          Positioning ruby text 'under' the base

                          - -

                          To position the ruby text below horizontal base text or to the left of vertical text, use ruby-position: under.

                          -
                          - -
                          -

                          Positioning ruby text 'under' the base

                          -

                          By 'under' we mean below horizontal text and to the left of vertical CJK text.

                          -
                          -
                          -
                          -
                          Horizontal ruby for 水芝居(みずしばい)
                          -
                          Vertical ruby for 水芝居(みずしばい)
                          -
                          -
                          ruby-position set to under.
                          -
                          -
                          -

                          This position is often used in Japanese for semantic information (as opposed to phonetic labelling). It is also used sometimes for pinyin annotations in Chinese. Here is an example from the moedict dictionary.

                          -
                          -
                          -

                          -
                          An example of ruby on more than one side of the base characters.
                          - Change this example
                          -
                          -
                          -

                          To produce this effect, use:

                          +

                          To position the ruby text below horizontal base text or to the left of vertical text, use ruby-position: under.

                          + +
                          +
                          +
                          +
                          Horizontal ruby for 水芝居(みずしばい)
                          +
                          Vertical ruby for 水芝居(みずしばい)
                          +
                          +
                          ruby-position set to under.
                          +
                          +
                          + +

                          This position is often used in Japanese for semantic information (as opposed to phonetic labelling). It is also used sometimes for pinyin annotations in Chinese. Here is an example from the moedict dictionary.

                          + +
                          +
                          +

                          +
                          An example of ruby on more than one side of the base characters.
                          +
                          +
                          + +

                          To produce this effect, use:

                          -
                          -

                          ruby { ruby-position: under; }

                          -
                          Test in your browser.
                          -
                          -
                          +
                          + + + + + +
                          +

                          Positioning bopomofo ruby

                          +

                          In Traditional Chinese, bopomofo (zhùyīn fúhào) ruby appears to the right of the base character, whether the text is set horizontally or vertically. Furthermore, the bopomofo annotation is always set vertically and the tone marks (apart from the light tone) are displayed in an additional column to the right of the bopomofo characters.

                          + +
                          +
                          +
                          +
                          Horizontal ruby for 電(ㄉㄧㄢˋ)腦(ㄋㄠˇ)
                          +
                          Vertical ruby for 電(ㄉㄧㄢˋ)腦(ㄋㄠˇ)
                          +
                          + +
                          Bopomofo ruby is set to the right side, on a character by character basis.
                          +
                          +

                          What you have to do in CSS is indicate that this will be bopomofo ruby, so that the annotation doesn't appear 'over' or 'under' the base text. To do that, you need the inter-character value of ruby-position.

                          + +

                          The vertical placement for the bopomofo and the relative position of the tone characters within the invisible column to the right of the Han base character rely on the browser, or possibly font information. You don't need to specify anything more in CSS.

                          -
                          - -
                          -

                          Positioning bopomofo ruby

                          -

                          In Traditional Chinese, bopomofo (zhùyīn fúhào) ruby appears to the right of the base character, whether the text is set horizontally or vertically. Furthermore, the bopomofo annotation is always set vertically and the tone marks (apart from the light tone) are displayed in an additional column to the right of the bopomofo characters.

                          -
                          -
                          -
                          -
                          Horizontal ruby for 電(ㄉㄧㄢˋ)腦(ㄋㄠˇ)
                          -
                          Vertical ruby for 電(ㄉㄧㄢˋ)腦(ㄋㄠˇ)
                          -
                          - -
                          Bopomofo ruby is set to the right side, on a character by character basis.
                          -
                          -
                          -

                          What you have to do in CSS is indicate that this will be bopomofo ruby, so that the annotation doesn't appear 'over' or 'under' the base text. To do that, you need the inter-character value of ruby-position.

                          -

                          The vertical placement for the bopomofo and the relative position of the tone characters within the invisible column to the right of the Han base character rely on the browser, or possibly font information. You don't need to specify anything more in CSS.

                          - -
                          -
                          -

                          ruby { ruby-position: inter-character; }

                          -
                          Test in your browser.
                          -
                          -
                          + + + + +
                          +

                          Positioning double-sided ruby

                          -
                          - -
                          -

                          Positioning double-sided ruby

                          -

                          Occasionally, it is necessary to associate more than one annotation with the same base text. In this case, you need to specify which annotation goes where.

                          -
                          -
                          -

                          Horizontal ruby for 電(ㄉㄧㄢˋ)腦(ㄋㄠˇ)

                          -
                          Ruby annotations on two sides of the same base text.
                          - -
                          -
                          - -

                          This is complicated a little by the fact that there are two possible ways to create markup for double-sided ruby (see the Ruby Markup article for more details).

                          -

                          If you use the 'tabular' model of markup, the styling is reasonably straightforward and involves setting ruby-position on the appropriate rtc element. Given markup such as the following:

                          -
                          -
                          -

                          <ruby>
                          - <rb>東</rb><rb>南</rb>
                          - <rt>とう</rt><rt>なん</rt>
                          - <rtc><rt>tou</rt><rt>nan</rt></rtc>
                          - </ruby>の方角

                          -
                          - -
                          -

                          you could use CSS like this:

                          -
                          -

                          ruby { ruby-position: over; }
                          - rtc { ruby-position: under; }

                          -
                          Test in your browser.
                          -
                          -

                          If you use nested markup, and you have markup such as the following:

                          -
                          -

                          <ruby><ruby>東<rt>とう</ruby><rt>tou<rb><ruby>南<rt>なん</ruby><rt>nan</ruby>の方角

                          -
                          -

                          you could use CSS like this:

                          -
                          -

                          ruby { ruby-position: under; }
                          - ruby ruby { ruby-position: over; } -

                          -
                          Test in your browser.
                          -
                          -
                          +

                          Occasionally, it is necessary to associate more than one annotation with the same base text. In this case, you need to specify which annotation goes where.

                          + +
                          +
                          +

                          Horizontal ruby for 電(ㄉㄧㄢˋ)腦(ㄋㄠˇ)

                          +
                          Ruby annotations on two sides of the same base text.
                          + +
                          +
                          + +

                          This is complicated a little by the fact that there are two possible ways to create markup for double-sided ruby (see the Ruby Markup article for more details).

                          + +

                          If you use the 'tabular' model of markup, the styling is reasonably straightforward and involves setting ruby-position on the appropriate rtc element. Given markup such as the following:

                          + +
                          +
                          +
                          <ruby>
+<rb>東</rb><rb>南</rb>
+<rt>とう</rt><rt>なん</rt>
+<rtc><rt>tou</rt><rt>nan</rt></rtc>
+</ruby>の方角
                          +
                          + + +
                          + +

                          you could use CSS like this:

                          + +
                          +
                          ruby { ruby-position: over; }
+rtc { ruby-position: under; }
                          +
                          + +
                          +

                          Output in your browser:

                          +

                          東南とうなんtounanの方角

                          + +

                          If you use nested markup, and you have markup such as the following:

                          + +
                          +
                          <ruby><ruby>東<rt>とう</ruby><rt>tou<rb><ruby>南<rt>なん</ruby><rt>nan</ruby>の方角
                          +
                          + +

                          you could use CSS like this:

                          + +
                          +
                          ruby { ruby-position: under; }
                          
+ruby  ruby { ruby-position: over; }
                          +
                          + +
                          +

                          Output in your browser:

                          +

                          東とうtou南なんnanの方角

                          +
                          +
                          - -
                          -

                          Rendering ruby text inline

                          -

                          In some situations you may want the annotations to appear inline, after the base text. For example, the Ruby markup article describes how complicated kanji characters with ruby on top can create accessibility issues. In other cases you may want to do this because the user interface is too small for ruby text to be legible, or because you want to repurpose the content for another type of application, etc.

                          -

                          When both base text and annotation are side by side on the same line, it's important to be able to identify which is the annotation, and where it starts and ends.

                          -

                          The chief issue with all these approaches is that there isn't one set of CSS rules that can be applied to all content. If your page mixes the rp, interleaved, and tabular approaches, you'll need to use classes to indicate which set of CSS rules to apply to that particular ruby element.

                          -
                          -

                          Working with rp markup

                          -

                          If you use rp markup to specify what characters to use as delimiters and where to place them, you need to render the annotation inline and make the delimiters (which are invisible by default) visible.

                          -

                          You could use this, which changes the display value for the rt elementand sets the font size to be the same as the base text (overriding the default size for the rt element set by the browser).

                          -
                          -

                          rt { display: inline; font: inherit; }
                          - rp { display: inline; } -

                          -
                          -

                          The rest of this section looks at how you can use CSS if your content doesn't have rp markup.

                          -
                          -
                          -

                          Working with interleaved markup

                          -

                          If you are quite happy for annotations to appear immediately after the base character(s) they are attached to, your content may be using the interleaved approach to ruby markup, and the expected outcome would be like this.

                          -
                          -
                          -
                          -
                          Horizontal ruby for 電(ㄉㄧㄢˋ)腦(ㄋㄠˇ)
                          -
                          Vertical ruby for 電(ㄉㄧㄢˋ)腦(ㄋㄠˇ)
                          ` -
                          -
                          Expected inline display of ruby text using interleaved markup.
                          - -
                          -
                          -

                          In addition to making the rt content display appropriately inline (as mentioned earlier), you will also need to surround each annotation with something, to set it off from the base text. Here we use the before and after pseudo-elements to surround it with parentheses.

                          + + + + + +
                          +

                          Aligning annotations and bases

                          +
                          -
                          -

                          rt { display: inline; font: inherit; }
                          - rt::before { content: '（'; }
                          - rt::after { content: '）'; } -

                          -
                          Test in your browser.
                          -
                          -
                          + +

                          It's best to use this property on the ruby element.

                          + +

                          If you are working with inter-character bopomofo ruby, none of this is relevant, since the positioning of the bopomofo characters and tone marks is fixed.

                          + +

                          Most examples in this section use the following markup:

                          + +
                          +
                          <ruby><rb>浮世絵<rt>うきよえ<rb>昔話<rt>むかしばなし</ruby>
                          +
                          + +
                          +

                          Output in your browser with no CSS specified:

                          +
                          +

                          浮世絵うきよえ昔話むかしばなし

                          +
                          +
                          + + + + + +
                          +

                          Aligning to one edge

                          + + +
                          +
                          +

                          Picture of start-aligned text.

                          +
                          +
                          + + + +

                          If you want to align the edges of the annotation and the base, you can use the start value of ruby-align. (An older version of the Ruby CSS spec also included an end value, but that has been removed from the current version of the spec.)

                          +

                          This kind of alignment is mostly used for vertical Japanese text. (Horizontal Japanese text more often uses centering.)

                          +

                          Note, also, that applying this setting doesn't currently handle automatically certain requirements that may arise with regards to overflow and interaction with line edges in traditional printed text.

                          + +
                          +
                          +
                          ruby { ruby-align: start; }
                          +
                          + +
                          +

                          Output in your browser:

                          +
                          +

                          浮世絵うきよえ昔話むかしばなし

                          +

                          浮世絵うきよえ昔話むかしばなし

                          +
                          +
                          + + +
                          +
                          + + + + + +
                          +

                          Centering shorter items of text

                          + +
                          +
                          +

                          Picture of start-aligned text.

                          +
                          +
                          + +

                          If you want the shorter of the ruby base or ruby text to be centered, with the characters set solid, rather than aligned with an edge, it will hardly come as a surprise to learn that you just need to set the value of ruby-align to center.

                          + +
                          +
                          +
                          ruby { ruby-align: center; }
                          +
                          + +
                          +

                          Output in your browser:

                          +
                          +

                          浮世絵うきよえ昔話むかしばなし

                          +

                          浮世絵うきよえ昔話むかしばなし

                          +
                          +
                          + +
                          -
                          - -
                          -

                          Working with tabular markup

                          -

                          If you want all the annotations for a given word to follow that word, grouped together as shown here, your content will use the tabular markup approach.

                          -
                          -
                          -
                          -
                          Horizontal ruby for 電(ㄉㄧㄢˋ)腦(ㄋㄠˇ)
                          -
                          Vertical ruby for 電(ㄉㄧㄢˋ)腦(ㄋㄠˇ)
                          -
                          -
                          Expected inline display of the same text using tabular markup.
                          - -
                          -
                          -

                          Producing inline annotations in this case is a little more complicated if you're not using rp markup.

                          +
                          + + + + + +
                          +

                          Applying justification to shorter items of text in group ruby

                          + +

                          This section applies when both the bases and the annotation contain multiple characters – in other words, group ruby.

                          +

                          If you want to use up redundant space by stretching the shorter text, be it the annotation or the base, you have two choices: you can justify the shorter text from edge to edge of the longer one (space-between), or justify across a space that is slightly smaller than the full width available (space-around). Note, however, that the justification outcome differs according to what scripts are involved.

                          +

                          The default setting is space-between.

                          +
                          +

                          Justifying Japanese annotations

                          + +

                          Let's look first at what happens if the characters in your ruby annotation are kanji characters and kana characters. This is likely to be the case for Japanese ruby, and will typically apply when dealing with jukuji or semantic annotations.

                          +

                          To widen the shorter text to exactly the same width as the longer text, stretching the inter-character spaces equally, use the space-between value of ruby-align.

                          +
                          +
                          +

                          Picture of start-aligned text.

                          +
                          +
                          +
                          -
                          -

                          rt { display: inline; font: inherit; }
                          -
                          -/* Parens around <rtc> */
                          -rtc::before { content: "（"; } rtc::after { content: "）"; }
                          -
                          -/* Parens before first <rt> not inside <rtc> */
                          -rb + rt::before, rtc + rt::before { content: "（"; }
                          -
                          -/* Parens after <rt> not inside <rtc> */
                          -rb ~ rt:last-child::after, rt + rb::before { content: "）"; }
                          -rt + rtc::before { content: "）（"; }

                          -
                          Test in your browser.
                          -
                          -
                          +
                          +

                          Output in your browser:

                          +
                          +

                          浮世絵うきよえ昔話むかしばなし

                          +

                          浮世絵うきよえ昔話むかしばなし

                          +
                          +
                          +

                          Or you can stretch the text in the same way, but not quite so far, leaving half a character width of space on either side, as shown here. For this you use the space-around value.

                          +
                          +
                          +

                          Picture of start-aligned text.

                          + +
                          +
                          + +
                          +
                          +
                          ruby { ruby-align: space-around; }
                          +
                          + +
                          -
                          +
                          +

                          Output in your browser:

                          +
                          +

                          浮世絵うきよえ昔話むかしばなし

                          +

                          浮世絵うきよえ昔話むかしばなし

                          +
                          +
                          -
                          -

                          Aligning annotations and bases

                          -
                          -

                          When the ruby text annotation is longer than the ruby base it belongs to, or vice-versa, there can be several different ways of dealing with the extra space that is lying around. The CSS Ruby spec deals with this mostly through the use of the ruby-align property.

                          - -
                          -

                          It's best to use this property on the ruby element.

                          -

                          If you are working with inter-character bopomofo ruby, none of this is relevant, since the positioning of the bopomofo characters and tone marks is fixed.

                          - -
                          -

                          Aligning to one edge

                          - -
                          -
                          -

                          Picture of start-aligned text.

                          -
                          -
                          - - + +
                          +
                          +

                          Picture of start-aligned text.

                          +
                          Latin script annotations are centred relative to a longer base.
                          +
                          +
                          + + +
                          +
                          +
                          ruby { ruby-align: space-between; }
                          +
                          + + - - -

                          If you want to align the edges of the annotation and the base, you can use the start value of ruby-align. (An older version of the Ruby CSS spec also included an end value, but that has been removed from the current version.)

                          - -
                          -
                          -

                          ruby { ruby-align: start; }

                          -
                          Test in your browser.
                          -
                          - -
                          - +
                          + +
                          +

                          Output in your browser:

                          +
                          +

                          洗衣机xǐyījī周杰伦Jay Chou

                          + +
                          +
                          + +

                          There is no difference in styling for the two example words shown above – we simply removed the spaces from the pinyin on the left.

                          +
                          - -
                          -

                          Centering shorter items of text

                          -
                          -
                          -

                          Picture of start-aligned text.

                          -
                          -
                          -

                          If you want the shorter of the ruby base or ruby text to be centered, with the characters set solid, rather than aligned with an edge, it will hardly be a surprise to learn that you just need to set the value of ruby-align to center.

                          -
                          -
                          -

                          ruby { ruby-align: center; }

                          -
                          Test in your browser.
                          -
                          -
                          + +

                          Producing inline annotations in this case is a little more complicated if you're not using rp markup.

                          + + +
                          +
                          +
                          rt { display: inline; font: inherit; }
+
+/* Parens around <rtc> */ 
+rtc::before { content: "（"; } rtc::after  { content: "）"; } 
+
+/* Parens before first <rt> not inside <rtc> */ 
+rb  + rt::before, rtc + rt::before { content: "（"; } 
+
+/* Parens after <rt> not inside <rtc> */
+rb ~ rt:last-child::after, rt + rb::before  { content: "）"; } 
+rt + rtc::before { content: "）（"; }
                          +
                          + +
                          +

                          Output in your browser:

                          +
                          +

                          水芝居みずしばい

                          +

                          水芝居みずしばい

                          +
                          +
                          + + +
                          +
                          -
                          -

                          Handling gaps in annotations

                          + + + +
                          +

                          Handling gaps in annotations

                          +

                          You may want to attach ruby annotations to a word such as 振り仮名 (furigana) without adding the redundant り.

                          @@ -642,121 +858,133 @@

                          Handling gaps in annotations

                          The word 'furigana' doesn't need a redundant hiragana character as an annotation, but is still treated as a single word when applying markup.
                          +

                          In the examples shown below we use interleaved markup, since that is better supported at the moment. The same principles should, however, apply if tabular markup is used.

                          One way to achieve this would be to simply leave a blank rt element, like this:

                          -
                          -

                          <ruby><rb>振<rb>り<rb>仮<rb>名<rt>ふ<rt><rt>が<rt>な</rt></ruby>

                          -
                          Test in your browser.
                          -
                          - -
                          -

                          This would pose a problem, however, if you wanted to display the annotation inline: instead of 振り仮名（ふりがな） you would see 振り仮名（ふがな）. It can also present problems if you want to merge ruby annotations across a compound noun (something which may be introduced later).

                          -

                          The CSS spec proposes a solution for this. If the base text and corresponding annotation are identical, browsers should not show the annotation unless it is part of an inline sequence. So you could use the following code to produce this effect, without any special styling, if the browser supports it.

                          + +
                          +

                          <ruby><rb>振<rt>ふ<rb>り<rt><rb>仮<rt>が<rb>名<rt>な</rt></ruby>

                          +
                          + +
                          +

                          Output in your browser:

                          +
                          +

                          振ふり仮が名な

                          +

                          振ふり仮が名な

                          +
                          +
                          + + +
                          +

                          However, this is not ideal. In particular, this would pose a if you wanted to display the annotation inline and you are using the (generally preferable) tabular model of markup: instead of 振り仮名（ふりがな） you would see 振り仮名（ふがな）. It can also present problems if you want to merge ruby annotations across a compound noun (something which may be introduced later).

                          + +

                          The CSS spec proposes a solution for handling these unnecessary annotations: if the base text and corresponding annotation are identical, browsers should not show the annotation unless it is part of an inline sequence. So you could use the following code to produce this effect, without any special styling, if the browser supports it.

                          +
                          -
                          -

                          <ruby><rb>振<rb>り<rb>仮<rb>名<rt>ふ<rt>り<rt>が<rt>な</rt></ruby>

                          -
                          Test in your browser.
                          -
                          - +
                          +

                          <ruby><rb>振<rt>ふ<rb>り<rt>り<rb>仮<rt>が<rb>名<rt>な</rt></ruby>

                          +
                          + +
                          +

                          Output in your browser:

                          +
                          +

                          振ふりり仮が名な

                          +

                          振ふりり仮が名な

                          +
                          +
                          + +

                           

                          -
                          -

                          Browser support

                          -

                          The article describes behavior for the following browser versions. We will try to update the article as behavior changes.

                          - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                          BrowserVersionEngineOther browsers using that engine
                          Firefox Firefox51.0.1GeckoConkeror, etc.
                          Chrome Chrome56.0.2924.87BlinkOpera, Vivaldi, etc.
                          Safari Safari10.0.3WebkitiOS-based browsers, Yandex, UC Browser, etc.
                          Edge Edge38.14393EdgeHTML 
                          Edge Internet Explorer11.0Trident 
                          - -
                          -
                          -

                          To do

                          + + + +
                          +

                          Browser support

                          +

                          The article describes behavior for the following browser versions. We will try to update the article as behavior changes.

                          + + + + + + + + + + + + + + + + + + + + + + + +
                          Browser engineBrowser testedBrowsers using that engine
                          Firefox GeckoFirefox v103Firefox, Conkeror, etc.
                          Chrome BlinkChrome v103Chrome, Edge, Brave, Opera, Vivaldi, etc.
                          Safari WebKitSafari v15.5Safari, iOS-based browsers, Yandex, UC Browser, etc.
                          +
                          -
                          - + + + + + + + -
                          - + diff --git a/articles/serving-xhtml/index.de.html b/articles/serving-xhtml/index.de.html index 62cd6bf2..e0e891df 100644 --- a/articles/serving-xhtml/index.de.html +++ b/articles/serving-xhtml/index.de.html @@ -4,7 +4,7 @@ HTML und XHTML ausliefern - - - - - - - + + + + + + + - + + + + + + + + + @@ -48,19 +52,17 @@

                          Servire HTML e XHTML

                          -
                          -

                          Pubblico previsto: Sviluppatori XHTML/HTML (utilizzando editor o scripting), sviluppatori CSS, sviluppatori di script (PHP, JSP, JSP, ecc.), project manager Web e chiunque abbia bisogno di una blanda introduzione alle modalità Quirks vs Standard, e che ruolo le dichiarazioni DOCTYPE e XML giocano in questo senso. E' anche molto utile per chi vuole sapere come dichiarare la codifica dei caratteri dei propri documenti.

                          Questo articolo descrive molto brevemente alcuni aspetti di come XHTML viene inviato dal server allo user agent (es. un browser), e di come gli user agent comuni gestiscono il markup che ricevono. Descrive questioni specifiche per l'implementazione, piuttosto che gli standard W3C.

                          Questi argomenti hanno una rilevanza su come dichiarare la codifica dei caratteri di un documento HTML o XHTML. Queste informazioni sono utili anche per spiegare perché alcuni aspetti dello stile CSS non appaiono come previsto, o variano da user agent a user agent.

                          -
                          + -
                          -

                          Tipi di MIME

                          +
                          +

                          Tipi di MIME

                          Quando un server serve (cioè invia) un documento ad un browser, invia anche alcune informazioni aggiuntive con il documento, chiamate header HTTP.

                          Il campo Content-Type dell'header HTTP descrive che tipo di formato di dati si ha. Queste informazioni sono espresse utilizzando un label MIME media type. Ecco un esempio di una header HTTP per un file HTML usando il tipo MIME text/html. Si noti che la voce Content-Type può anche esprimere la codifica dei caratteri del documento.

                          @@ -94,8 +96,8 @@

                          Tipi di MIME

                          -
                          -

                          Modalità 'Standard' vs 'Quirks'

                          +
                          +

                          Modalità 'Standard' vs 'Quirks'

                          Gli attuali browser mainstream possono mostrare un file HTML sia in modalità Standard che in modalità Quirks. Questo significa che alla visualizzazione del file vengono applicate regole diverse, una conforme ad un'interpretazione del comportamento atteso secondo gli standard W3C, l'altra alle aspettative basate sul comportamento non standard dei browser più vecchi.

                          Nelle ultime versioni dei principali browser, la modalità standard è attivata dalla presenza di un oggetto Dichiarazione DOCTYPE. La mancanza di un DOCTYPE può portare a un rendering diverso da browser a browser.

                          Le schermate seguenti illustrano alcune di queste differenze.

                          @@ -161,8 +163,8 @@

                          Modalità 'Standard' vs 'Quirks'

                          I browser che commutano in questo modo tra modalità Standard e Quirks sono spesso chiamati a fare uno scambio di DOCTYPE.

                          Generalmente è una buona idea servire sempre le pagine in modalità Standard - cioè includere sempre una dichiarazione DOCTYPE.

                          -
                          -

                          La dichiarazione XML e i DOCTYPE

                          +
                          +

                          La dichiarazione XML e i DOCTYPE

                          C'è un aspetto dell'uso dei DOCTYPE che è di fondamentale importanza per le dichiarazioni di codifica dei caratteri e per risultati di stile prevedibili.

                          Poiché XHTML 1.0 è basato su XML, è possibile aggiungere una dichiarazione XML all'inizio del markup, anche se quest'ultimo è servito come HTML. In questo modo la parte superiore del file di cui sopra avrebbe questo aspetto (la dichiarazione XML è evidenziata in corsivo rosso):

                          @@ -182,8 +184,8 @@

                          La dichiarazione XML e i DOCTYPE

                          -
                          - +