Главная страница   /   8.6. Работа с языковыми элементами (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

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

Есть пять элементов 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