Элементы цитирования и направление текста

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


В соответствии с действующим законодательством Российской Федерации допускается без согласия автора или иного правообладателя и без выплаты вознаграждения, но с обязательным указанием имени автора, произведение которого используется, и источника заимствования: цитирование в оригинале и в переводе в научных, полемических, критических или информационных целях правомерно обнародованных произведений в объеме, оправданном целью цитирования, включая воспроизведение отрывков из газетных и журнальных статей в форме обзоров печати.


Цитирование и цитата из высказывания какой-либо авторитетного человека, оформленная в виде прямой речи в информационном, публицистическом или аналитическом материале - это способ сделать текст объективным, серьезным и вызывающим больше доверия у читателя. Давайте рассмотрим как силами HTML оформляются короткие и длинные цитаты.

Короткие цитаты

HTML тег <q> (HTML Quote Element) используется для выделения коротких цитат (строчная цитата). Как правило, все современные браузеры автоматически устанавливают открывающиеся и закрывающиеся кавычки в начале и в конце выделенного текста.

Перейдем к рассмотрению примера:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <q></title>
	</head>
	<body>
		<p><q cite = "https://ru.wikipedia.org/wiki/Pecunia_non_olet"> Деньги не пахнут </q> - фраза, которую, как считается, произнёс император Веспасиан.</p>
	</body>
</html>

Атрибут cite указывает URL адрес ресурса, из которого была заимствована цитата. Для пользователя этот атрибут не отображается (не видимо его применение). Он может использоваться поисковыми машинами и в статистических целях при работе скриптов на стороне сервера. Допускается указывать как абсолютные адреса (например: <q cite = "http://basicweb.ru/html/tag_q.php">), так и относительные (например: <q cite = "tag_q.php">.

Ниже приведён пример, как это отображается в браузере:

Рис. 23 Пример использования коротких цитат в HTML
Рис. 23 Пример использования коротких цитат в HTML.

Длинные цитаты

HTML тег <blockquote> (HTML Block Quotation Element) используется для определения в документе блочной цитаты (длинная цитата внутри документа). Текст внутри этого тега отображается как выровненный блок с отступами слева и справа (по умолчанию 40 пикселей).

Пример:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <blockquote></title>
	</head>
	<body>
		<p>Здесь информация с сайта «Википедия»:</p>
		<blockquote cite = "https://ru.wikipedia.org/wiki/Pecunia_non_olet"> 
		Деньги не пахнут - крылатое латинское выражение. Слова, приписываемые императору Веспасиану,
		якобы произнесенные им после получения денег от налога на общественные уборные Рима
		и обращённые к его сыну Титу, который выразил неудовольствие по этому поводу. </blockquote> 
	</body>
</html>

По аналогии с тегом <q> атрибут cite тега <blockquote> указывает URL адрес ресурса, из которого была заимствована цитата. Для пользователя этот атрибут не отображается (не видимо его применение). Он может использоваться поисковыми машинами и в статистических целях при работе скриптов на стороне сервера. Допускается указывать как абсолютные адреса (например: <blockquote cite = "http://basicweb.ru/html/tag_blockquote.php">), так и относительные (например: <blockquote cite = "tag_blockquote.php">.

Ниже приведён пример, как это отображается в браузере:

Рис. 23а Пример использования коротких длинных цитат в HTML
Рис. 23а Пример использования длинных цитат в HTML.

HTML название произведения

HTML тег <cite> (HTML Citation Element) предназначен для выделения названия произведений. Он должен включать название работы или ссылку на творчество (URL-адрес). По умолчанию, браузеры отображают элементы <cite> курсивом.

Пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <cite><title>
	</head>
	<body>
		<cite>«Горе от ума»</cite> — комедия в стихах А. С. Грибоедова. Первый показ 1825 г.
	</body>
</html>

В браузере это выглядит следующим образом:

Рис. 23б Пример использования названий произведений в HTML.
Рис. 23б Пример использования названий произведений в HTML.

Направление вывода текста

Тег <bdo> (HTML bidirectional override element) используется для переопределения текущего направления текста (устанавливает направление вывода текста и преимущественно предназначен для использования с языками, где чтение происходит справа налево, например - арабский язык).

Тег <bdo> применяется с атрибутом dir и значениями ltr (left-to-right), или rtl (right-to-left), задающими направление текста слева направо, либо справа налево.

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <bdo></title>
	</head>
	<body>
		<p><bdo dir = "ltr">Направление текста слева направо.</bdo></p>
		<p><bdo dir = "rtl">Направление текста справа налево.</bdo></p>
	</body>
</html>

Результат примера:

Рис. 24 Пример использования тега <bdo> с атрибутом dir (направление текста в HTML).
Рис. 24 Пример использования тега <bdo> с атрибутом dir (направление текста в HTML).

В HTML 5 тег <bdi>html5 изолирует фрагмент текста, который должен отображаться в другом направлении письма и позволяет браузерам корректно обрабатывать двунаправленный текст. Этот элемент полезно использовать при отображении текста с разной направленностью письма.

Например:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <bdi></title>
	</head>
	<body>
		<h3>Победители европейского забега: </h3>
		<p>Участник № 1 <bdi>ماقسيم</bdi> 99 баллов – 1 место </p>
		<p>Участник № 2 <bdi>دميتري</bdi> 97 баллов – 2 место </p>
		<p>Участник № 3 John Connor 96 баллов – 3 место </p>
	</body>
</html>

Результат нашего примера:

Рис. 25 Пример использование разнонаправленных языков.
Рис. 25 Пример использования разнонаправленных языков.

Обращаю Ваше внимание, что браузеры Internet Explorer и Edge не поддерживают тег <bdi>html5.

Нюансы восточно-азиатских символов.

В HTML присутствуют элементы <ruby>html5, <rt>html5 и <rp>html5, которые используются для добавления фуриган (фонетические подсказки в японском и восточно-азиатских языках, их также называют - руби или ёмигана).

Фуриганы, как правило, отображаются мелким шрифтом над иероглифами (основным текстом) и содержат подсказки по их произношению и переводу. В элементе <ruby>html5 полезный текст фуриганы обозначается элементом <rt>html5.

Тег <rp>html5 определяет, что отображать браузеру, который не поддерживает тег <ruby>html5. Если браузер поддерживает тег <ruby>html5, то текст, который находится внутри тега <rp>html5 не отобразится для пользователя.

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <rp></title>
	</head>
	<body>
		<ruby>
			<rp>Ваш браузер не поддерживает отображение фуриган</rp>
			地球<rt>ふるさと</rt>
		</ruby>
	</body>
</html>

Результат нашего примера:

Рис. 26 Использование фуриган в HTML.
Рис. 26 Использование фуриган в HTML.


Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

  • Используя полученные знания составьте следующую HTML страницу:

Практическое задание № 18.
Практическое задание № 18.

Подсказка: чтобы достичь такого ровного текста, его необходимо выровнять по ширине.

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