Работа с языковыми элементами

Есть пять элементов HTML, четыре из которых являются новыми в HTML5, которые обеспечивают поддержку для работы с «не-западными» (non-Western) языками. В следующих разделах описаны эти элементы.

Элементы ruby, rt и rp

Символ «рубин» (ruby) является обозначением, которое помещается выше или справа от символов в логографических языках (таких как китайский или японский), и он помогает читателю правильно произносить звуки. Элемент ruby обозначает диапазон текста, который содержит символ «рубин». В таблице 8-20 представлен этот элемент.

Таблица 8-20: Элемент ruby

Элемент	`ruby`
Тип элемента	Фразовый
Разрешенные родительские элементы	Любой элемент, который может содержать фразовый контент
Локальные атрибуты	Нет
Содержание	Фразовый контент и элементы `rt` и `rp`
Стиль тегов	Открывающий и закрывающий теги
Новый в HTML5	Да
Изменения в HTML5	N/A
Соглашение по стилям	`ruby { text-indent: 0; }`

Мы используем элемент ruby в сочетании с элементами rt и rp, которые также являются новым в HTML5. Элемент rt отмечает обозначения в символах «рубин», а элемент rp обозначает скобки вокруг обозначения, которые могут отображаться в браузерах, не поддерживающих обозначений в символах «рубин».

Я не разговариваю ни на одном логографическом языке, то есть у меня нет базы, чтобы создать пример с помощью логограмм. Самое лучшее, что я могу сделать в этом разделе, – это использовать текст на английском языке, чтобы показать, как обозначений в символах «рубин» отображаются в браузере. Листинг 8-19 содержит такие обозначения.

Листинг 8-19: Использование элементов ruby, rt и rp

<!DOCTYPE HTML>
<html>
	<head>
		<title>Example</title>
		<meta name="author" content="Adam Freeman"/>
		<meta name="description" content="A simple example"/>
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	</head>
	<body>
		I like apples and oranges.
		The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the Florida
		citrus industry.
		<p>
			<q cite="http://en.wikipedia.org/wiki/Apple">The
			<dfn title="apple">apple</dfn> is the pomaceous fruit of the apple tree,
			species Malus domestica in the rose family.</q>
		</p>
		<p>
			Oranges are often made
			into<ruby> OJ <rp>(</rp><rt>Orange Juice</rt><rp>)</rp></ruby>
		</p>
	</body>
</html>

Когда документ отображается в браузере, который поддерживает обозначения в символах «рубин», элементы rp и их содержимое игнорируются, а содержимое элемента rt отображается в виде обозначений (аннотаций), как показано на рисунке 8-16.

Рисунок 8-16: Использование элементов ruby, rt и rp

При отображении документа в браузере, который не поддерживает аннотации с символами «рубин», то содержимое элементов rp и rt отображается. Когда я писал эту главу, Firefox не поддерживал аннотации с символами «рубин»; вы можете увидеть, как он отображал содержимое, на рисунке 8-17.

Рисунок 8-17: Отображение аннотации с символами «рубин» в браузере, который их не поддерживает

Элемент bdo

Элемент bdo указывает явное направление текста для своего содержания, перекрывая автоматическую направленность, которая обычно применяется. В таблице 8-21 представлен элемент bdo.

Таблица 8-21: Элемент bdo

Элемент	`bdo`
Тип элемента	Фразовый
Разрешенные родительские элементы	Любой элемент, который может содержать фразовый контент
Локальные атрибуты	Нет, но требуется глобальный атрибут `dir`
Содержание	Фразовый контент
Стиль тегов	Открывающий и закрывающий теги
Новый в HTML5	Нет
Изменения в HTML5	Нет
Соглашение по стилям	Нет

Вы должны использовать элемент bdo с атрибутом dir, который имеет допустимые значения rtl (right-to-left, т.е. справа налево) и ltr (left-to-right, т.е. слева направо). В листинге 8-20 показано использование элемента bdo.

Листинг 8-20: Использование элемента bdo

<!DOCTYPE HTML>
<html>
	<head>
		<title>Example</title>
		<meta name="author" content="Adam Freeman"/>
		<meta name="description" content="A simple example"/>
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	</head>
	<body>
		I like apples and oranges.
		The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the Florida
		citrus industry.
		<p>
			This is left-to-right: <bdo dir="ltr">I like oranges</bdo>
		</p>
		<p>
			This is right-to-left: <bdo dir="rtl">I like oranges</bdo>
		</p>
	</body>
</html>

На рисунке 8-18 видно, как браузер отображает содержимое этого элемента.

Рисунок 8-18: Использование элемента bdo

Элемент bdi

Элемент bdi обозначает отрывок текста, который изолирован от другого контента в целях изменения направления текста. В таблице 8-22 представлен этот элемент.

Таблица 8-22: Элемент bdi

Элемент	`bdi`
Тип элемента	Фразовый
Разрешенные родительские элементы	Любой элемент, который может содержать фразовый контент
Локальные атрибуты	Нет
Содержание	Фразовый контент
Стиль тегов	Открывающий и закрывающий теги
Новый в HTML5	Да
Изменения в HTML5	N/A
Соглашение по стилям	Нет

Этот элемент используется при отображении контента, для которого не доступна информация о направленности. Когда это происходит, браузер автоматически определяет направленность, и это может нарушить форматирование страницы. В листинге 8-21 представлен простой пример такой проблемы.

Листинг 8-21: Работа с текстом без элемента bdi

<!DOCTYPE HTML>
<html>
	<head>
		<title>Example</title>
		<meta name="author" content="Adam Freeman"/>
		<meta name="description" content="A simple example"/>
		<meta charset="utf-8"/>
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	</head>
	<body>
		I like apples and oranges.
		Here are some users and the fruit they purchased this week:
		<p>Adam: 3 applies and 2 oranges</p>
		<p> 2 :ميرك وبأ apples</p>
		<p>Joe: 6 apples</p>
	</body>
</html>

При отображении этого документа арабское имя вызывает алгоритм направленности текста в браузере для отображения числа 2 перед именем, а не после него, как показано на рисунке 8-19.

Рисунок 8-19: Результат двунаправленного текстового алгоритма при смешивании форматов

Эту проблему можно решить, используя элемент bdi, как показано в листинге 8-22.

Листинг 8-22: Использование элемента bdi

<!DOCTYPE HTML>
<html>
	<head>
		<title>Example</title>
		<meta name="author" content="Adam Freeman"/>
		<meta name="description" content="A simple example"/>
		<meta charset="utf-8"/>
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	</head>
	<body>
		I like apples and oranges.
		Here are some users and the fruit they purchased this week:
		<p><bdi>Adam</bdi>: 3 applies and 2 oranges</p>
		<p><bdi> ميرك وبأ </bdi>: 2 apples</p>
		<p><bdi>Joe</bdi>: 6 apples</p>
	</body>
</html>

Вы можете увидеть корректирующий результат использования этого элемента на рисунке 8-20.

Рисунок 8-20: Использование элемента bdi

8.7. Заключение: другие текстовые элементы

или RSS канал: