В этом видео я расскажу о том, какие есть методы для того,
чтобы сделать документ многоязычным.
Итак, этот раздел называется интернационализация, или i18n.
Что такое i18n?
На самом деле это английское слово internationalization, указана первая
буква, последняя буква этого слова и между ней еще 18 букв, потому и называется i18n.
Прежде чем начать разбираться в определенных методах интернационализации,
нужно ознакомиться с таким понятием, как таблица символов.
Таблица символов — это когда каждому символу соответствует набор бит.
Например, у нас есть какой-то текст, и если мы указываем неправильную кодировку,
то есть таблицу символов, то браузер может этот текст отобразить как-то вот так.
Обычно принято указывать в качестве кодировки utf-8.
Это такой стандарт кодирования, который позволяет предоставить
практически любые символы почти что на любом языке.
Есть несколько способов для задания кодировки документу.
Раньше это писалось таким
длинным метаэлементом: meta http-equiv и так далее.
В HTML5 это выглядит всё гораздо короче.
В элементе meta указывается атрибут charset и utf-8.
Раньше в стандарте html чтобы задать язык документа,
нужно было писать довольно длинную запись: это <meta
http-equiv=''Content-Language'' и так далее.
В HTML5 все записывается гораздо проще.
У элемента html можно указать атрибут lang со значением того языка,
на котором написан документ.
Как я говорил в предыдущих видео,
очень важно указывать атрибут lang в элементе html.
Для чего это нужно?
Для того чтобы когда автоматический переводчик будет переводить страницу,
он будет ориентироваться на первое попавшееся слово в документе.
Оно может быть английским.
Ну, допустим, это какая-то статья, и заголовок у нее на английском языке.
Переводчик подумает, что эта страница на английском языке,
и предложит ее перевести.
Указав в начале, то есть в корневом элементе русский язык,
например, переводчик сразу понимает, на каком языке данный документ.
Если на странице используется несколько языков, то языки можно переопределять.
Например, у нас есть html-документ, и в корневом элементе html
мы указываем язык русский, и внутри документа есть цитата на английском языке.
Для этой цитаты мы можем указать явно, что внутри этой цитаты английский язык,
указав атрибут lang="en", тем самым переопределив то значение,
которое было указано выше, то есть в теге html.
Так же из CSS мы можем обратиться к элементу определенного языка,
написав blockquote: lang, и указать значение языка.
И вот так это выглядит в браузере.
То есть цитата на русском языке имеет красный цвет текста.
При помощи атрибута dir можно менять направление текста.
В некоторых языках пишут предложения слева направо, например, в русском.
В некоторых языках справа налево, например, в арабских.
Так вот, это направление можно менять при помощи атрибута dir (direction).
У него есть три значения: ltr — то есть текст слева направо,
rtl — текст справа налево, и значение auto сообщает браузеру,
что нужно самому определить, что за язык и правильно его отобразить.
Например, у нас есть несколько вариантов языков,
и у него разные атрибуты dir.
В первом случае direction справа налево,
и текст пишется справа налево, при этом порядок букв тоже поменялся.
Если мы указываем значение ltr,
то текст пишется слева направо, и порядок букв привычен нам.
Если же мы укажем dir="auto", то браузер решит, что этот язык пишется
обычно справа налево и переносит его справа и меняет порядок букв.
Если же мы ничего не указываем, то по умолчанию выставляется слева направо.
Если в документе много языков с разным направлением,
то мы можем его также переопределять, как и атрибут lang.
То есть мы в качестве основного значения у
элемента html говорим, что у нас язык, в котором предложения пишутся справа налево,
а внутри есть текст на арабском, например.
И мы явно ему указываем, что направление внутри этого элемента справа налево.
И вот так это выглядит в браузере.
Существует специальный элемент bi-directional output,
который нужен только для того, чтобы изменить направление текста.
Например, у нас есть текст, и внутри используется язык,
направление которого справа налево.
Мы оборачиваем этот кусок текста в элемент
bdo и указываем при помощи атрибута dir направление текста.
Ну и в браузере это выглядит вот так.
В данном случае текст не прижался к правому краю, поскольку этот элемент,
он является текстовым, то есть не создает никаких переносов.
Именно поэтому поменялось лишь направление, точнее, порядок букв.
Также можно менять направление
текста при помощи символов мнемоники: &lrm и &rlm.
Например, у нас есть текст, и внутри есть какое-то название,
которое пишется слева направо, а весь кусок текста — справа налево.
Мы указываем после этого слова символ мнемоники &lrm, и порядок меняется.
Вот как-то так это будет выглядеть.
При помощи атрибута translate можно указывать переводимость текста.
Сейчас в большинстве браузеров есть встроенные переводчики,
то есть иногда браузер предлагает перевести страницу.
Это очень удобно, но иногда не нужно, чтобы весь текст переводился.
И для того куска текста, который не нужно переводить,
можно поставить атрибут translate со значением no.
В этом случае этот текст не переведется переводчиком.
Например, у нас есть страница из двух колонок: левая колонка
должна переводиться, правая колонка не должна переводиться.
И внутри каждого элемента мы устанавливаем атрибут translate со значением no,
где это не нужно, и пробуем перевести страницу.
После того как мы перевели страницу, можно заметить, что там,
где был указан атрибут translate="no", тот текст не перевелся.
Еще, видите, есть у нас кусок кода, обернутый в элемент code.
Браузер понял, что этот кусок текста не принадлежит обычному тексту,
и его переводить не нужно.
Ну потому что это кусок кода, который, как правило, не переводится.
При помощи специального символа мнемоники можно запретить слияемость текста.
Например, вот у нас есть текст из индийского письма Деванагари.
Если мы возьмем два символа и поставим их рядом, то они схлопнутся в один.
При помощи символа мнемоники zwnj мы можем предотвратить это слияние.
Ну и вот выглядит как-то вот так.
То есть первые два символа находятся отдельно.
А как только мы их помещаем рядом, то есть это третья строка, символы схлопываются.
А если между ними указать символ мнемоники,
специальный символ мнемоники, то они не схлопнутся.
На этой неделе вы узнали, что такое семантическая разметка,
как создавать формы и какие методы для интернационализации существуют в HTML.
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
