HTML :: Тег <rt>

В HTML тег <rt> (от англ. ruby text – текст рубина) формирует аннотацию сверху или снизу от базового текста, после которого он идет. Элемент должен располагаться внутри контейнера <ruby> и обычно используется совместно с элементами <rb> (формирует базовый текст для аннотации), <rp> (используется для вывода текста в браузерах, не поддерживающих элемент <ruby>), <rtc> (поддерживается только в Firefox и формирует дополнительную аннотацию к тексту).

Закрывающий тег может быть опущен, если он является последним элементом в контейнере <ruby> или за ним идет один из элементов <rb>, <rp>, <rtc> или другой элемент <rt>.

Синтаксис

	<ruby>
	  ...
	  <rb>Базовый текст</rb>
	  <rp>Текст, если нет поддержки</rp>
	  <rt>Аннотация</rt>			 
	  <rp>Текст, если нет поддержки</rp>
	   ...  
	</ruby>

	Закрывающий тег: не обязателен.

Атрибуты

Для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-rt-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/rt

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>
</head>
<body>

	<p>
		В этом примере выведено оригинальное английское написание<br> 
		города Сан-Франциско, его написание с помощью китайских<br>  
		иероглифов, а также дана транскрипция произношения на пиньинь.
	</p>
	
	<p>
		Если браузер не поддерживает элемент &lt;ruby&gt;,<br> 
		транскрипция будет выведена рядом с символами в скобках.
	</p>	
		
	<p>
		Сан-Франциско - 
		
		<ruby>
			<rb>旧</rb><rp>(</rp><rt>jiù</rt><rp>)</rp>
			<rb>金</rb><rp>(</rp><rt>jīn</rt><rp>)</rp>
			<rb>山</rb><rp>(</rp><rt>shān</rt><rp>)</rp>
		</ruby>.
	</p>
</body>
</html>

Пример №1

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №2</title>
</head>
<body>
	

	<p>
		Ниже представлен ряд пиктограмм и<br> 
		соответствующих им мнемоник. 
	</p>
	
	<p>
		Если браузер не поддерживает элемент &lt;ruby&gt;,<br> 
		мнемоники будут выведены рядом через запятые.
	</p>  	
		
	<p>
		<ruby>
			♠<rp>: </rp><rt>&amp;#x2660;</rt><rp>, </rp>
		</ruby>
		
		<ruby>
			♥<rp>: </rp><rt>&amp;#x2665;</rt><rp>, </rp>
		</ruby>		
		
		<ruby>
			♦<rp>: </rp><rt>&amp;#x2666;</rt><rp>, </rp>
		</ruby>		
		
		<ruby>
			♣<rp>: </rp><rt>&amp;#x2663;</rt><rp>. </rp>
		</ruby>		
	</p>
	
</body>
</html>

Пример №2