HTML :: Тег <ruby>

В HTML тег <ruby> (от англ. ruby – рубин) предназначен для добавления небольшой аннотации сверху или снизу от заданного текста. Обычно такая форма записи используется для идеографической письменности вроде китайского языка, когда требуется написать один текст над другим (например, для объяснения символов языка).

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

Синтаксис

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

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

Атрибуты

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

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/html5/text-level-semantics.html#the-ruby-element

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

Примеры

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