ruby в HTML

Тег ruby

Тег ruby добавляет текст с аннотацией, которая находится над этим текстом. Аннотация в данном случае — это расшифровка текста под ней. Тег чаще всего используется для иероглических языков (для расшифровки значений иероглифов), но может быть использован для того, чтобы написать один текст над другим в любых языках.

Текст, к которому пишется аннотация должен лежать в теге ruby, а текст аннотации — в теге rt (rt должен находится в ruby). Также в ruby может находится тег rp, который задает текст для тех браузеров, которые не поддерживают тег ruby.

Аннотация по умолчанию отображается меньшего размера, чем сам текст. Это можно исправить с помощью CSS свойства font-size


Тег задает аннотацию Ruby.

Аннотация Ruby — это небольшой дополнительный текст, прикрепленный к основному тексту для обозначения произношения или смысла соответствующих символов. Этот вид аннотаций часто используется в японских изданиях.

Используйте тег вместе с и/или тегом: Элемент состоит из одного или нескольких символов, которым требуется объяснение/произношение, и элемента , который предоставляет эту информацию, и необязательного элемента , который определяет, что отображать для обозревателей, не поддерживающих Ruby Аннотации.

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает элемент.


HTML элемент предназначен для добавления небольшой аннотации сверху или снизу от заданного текста. Такая форма записи преимущественно используется для идеографической письменности вроде китайского языка, но может применяться и для других языков, если требуется написать один текст над другим.

Категории контента Основной поток(Flow content), текстовой контент(phrasing content), явный контент(palpable content).
Допустимый контент Текстовый контент(phrasing content).
Тэг пропускания None, both the starting and ending tag are mandatory.
Разрешенные родители Любой элемент который согласован с текстовым контентом(phrasing content).
Разрешенные роли ARIA Любые
DOM интерфейс HTMLElement


Этот элемент включает в себя только глобальные атрибуты.

Using ruby HTML Tag


ruby HTML: Main Tips

  • tag represents ruby annotations for East Asian characters.
  • It is used to convey the right pronunciation, as some characters have multiple options.
  • HTML ruby tag was introduced in HTML5 and supports all global attributes.
  • You cannot omit the ending tag.
Theory is great, but we recommend digging deeper!
Learn HTML5 and CSS3 to Build a Website from Scratch

Stone River eLearning

HTML ruby tags are used to provide the information on how to pronounce Japanese, Chinese, and Korean characters:

As you can see in the example above, there are a few elements used for HTML ruby annotations:

  • defines a connection between the base text and the ruby HTML text.
  • specifies the ruby HTML text element, which may contain inline elements.
  • surrounds the ruby parentheses for the browsers that do not support ruby HTML text.

Note: the level of support for ruby annotations differs greatly between browsers and their versions: you can check it here.

HTML тег

Парный тег, определяющий «рубиновое» аннотирование.

  • От англ. «[ruby]» — «рубин».
  • Используется в основном для подсказок по произношению в типографике Восточной Азии.
  • Может быть использован для любых целей, когда один текст нужно разместить над другим (перевод над словом, аккорд над строкой песни и т.д.)
  • Внутри данного тега, помимо текста, должен быть как минимум один тег , определяющий текст, являющийся аннотацией.

How to Parse HTML in Ruby

Are you trying to parse HTML with Ruby?

This task can be a bit difficult if you don’t have the right tools.

But today you’re in luck!

Because Ruby has this wonderful library called Nokogiri, which makes html parsing a walk in the park.

Let’s see some examples.

First, install the nokogiri gem with:

If you have issues installing the gem try this:

How to Extract The Title

Then create the following script, which contains a basic HTML snippet that will be parsed by nokogiri.

Run this code to get the page title:

If you want to parse data directly from a URL, instead of an HTML string…

You can do this:

This will download the HTML & get you the title.


Getting the title is nice, but you probably want to see more advanced examples.

Let’s take a look at how to extract links from a website.

If you want all the links from a page first you’ll need the HTML.

You can use the same open-uri technique to download the HTML for any public website.

Then parse it with Nokogiri to get a document object.

Like this:

You can query this object for information in one of two ways:

  • Using XPath queries
  • Using CSS selectors

Let’s see how to do this using XPath first.

Here’s the code:

What does that do?

This filters through all the HTML tags in the page, and gives you the ones you are requesting.

In this case “a” tags.

Which are the tags that contain links in HTML.


What you have is an array of Nokogiri::XML::Element representing these tags.

If you want to get the link URL & text you can do this:

This will print all the links, one per line, on your screen.

If instead of links you want to scrap some other information, like a list of images available on the page, you can follow the same process.

The only thing you need to change is the type of tag you want.

For example:

Where img is the HTML tag for images, and src is the attribute where the image URL is stored.

To find the correct CSS selector & attributes use your browser’s developer tools.

Using CSS Selectors With Nokogiri

You can use CSS selectors by replacing the xpath method with the css method.

Here’s an example:

Note: The difference between at_css & css is that the first one only returns the first matched element, but the latter returns ALL matched elements.

Using CSS gets you the same results, the whole point is telling Nokogiri what HTML elements you want to work with.

Most developers are more familiar with CSS than XPath, so you want to use CSS.


You can find the Nokogiri documentation here:

HTML 5 Tag

The HTML tag is used for specifying Ruby annotations, which is commonly used in East Asian typography.

Ruby (also spelt rubi) characters are small, annotative glosses that can be placed above or to the right of a character when writing logographic languages such as Chinese or Japanese to show the pronunciation. Ruby annotations, are usually used as a pronunciation guide for relatively obscure characters.

The tag was introduced in HTML 5.


This example demonstrates how to write the element into your HTML code. This example is the pinyin for the word «hanzi» («chinese character») in simplified chinese, as used in mainland china. This example requires that your browser can display Chinese characters.

Note: At the time of writing, the element has limited browser support. This example is based on the W3C HTML 5 Working Draft, and is solely to demonstrate the context of this tag.


HTML tags can contain one or more attributes. Attributes are added to a tag to prov >style=»color:black;» .

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The attributes that you can add to this tag are listed below.

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

Attribute Description

Global Attributes

The following attributes are standard across all HTML 5 tags.

  • accesskey
  • class
  • contenteditable
  • contextmenu
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event.

Here are the standard HTML 5 event handler content attributes.

  • onabort
  • oncancel
  • onblur
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • oncontextmenu
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • onemptied
  • onended
  • onerror
  • onfocus
  • onformchange
  • onforminput
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onload
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onmousewheel
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreadystatechange
  • onscroll
  • onseeked
  • onseeking
  • onselect
  • onshow
  • onstalled
  • onsubmit
  • onsuspend
  • ontimeupdate
  • onvolumechange
  • onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Язык программирования Ruby


Ruby — один из самых молодых языков программирования. Его создатель Юкихиро Мацумото (Yukihiro Matsumoto, также известный под псевдонимом Matz), профессиональный японский программист, рассказывает: > Название языка происходит от имени драгоценного камня рубина (по аналогии с другим широко распространенным языком программирования Perl: pearl — жемчуг).

Вот как характеризует Ruby его автор: > [1].

В Японии Ruby стал популярным с момента появления первой общедоступной версии в 1995 году, однако наличие документации только на японском языке сдерживало его дальнейшее распространение. Лишь в 1997 году появилось описание Ruby на английском языке, а в 1998 году открылся форум ruby-talk. С этого момента Ruby начал свое шествие по всему миру. За последний год появились три англоязычные книги, посвященные ему (см. [2-5]), хотя на русский язык, к сожалению, ни одна из них еще не переведена. Сейчас Ruby входит в большинство дистрибутивов ОС Linux, доступен он и пользователям других операционных систем.

Заметим, что данная статья не является справочным руководством по языку. С кратким введением можно познакомиться в электронном учебнике [6], а более полная информация может быть найдена в [7] и [8], а также на уже упомянутых выше сайтах сети интернет. Основная цель статьи — дать людям, уже знакомым с различными языками программирования, общее представление об особенностях Ruby, показать его мощь и красоту, объяснить, что он одинаково хорош и как первый язык программирования, и как средство для работы профессионального программиста и системного администратора.

Программисты говорят о Ruby

В этом разделе мы изложим собранные из различных источников высказывания о языке Ruby, отложив на некоторое время рассмотрение примеров, иллюстрирующих их. Большая часть вопросов, которые будут затронуты, предполагает наличие определенных знаний у читателя в области теории языков и объектно-ориентированного программирования. Легче всего понять Ruby тем, кто знает Smalltalk, Lisp, C, C++ и Perl. > набор из Perl, Java и C++ тоже является весьма хорошей стартовой позицией для изучения Ruby.

Тем же, кто не может похвастаться подобными знаниями, весьма приятно будет узнать, что

Во введении мы уже цитировали Юкихиро Мацумото — создателя Ruby. Вот что еще он сам говорит об этом языке. Итак, Ruby

* имеет простой синтаксис;

* поддерживает обработку исключений;

* позволяет переопределять операторы;

* является чисто объектно-ориентированным языком (complete, full, pure object oriented language), в котором, в отличие от Java или Perl, все — объекты;

* позволяет работать с целыми числами произвольной величины;

* не требует объявления переменных;

* использует префиксы (@, $, @@) для задания области видимости (scope) переменных;

* поддерживает многопоточное программирование.

Одной из первых работ, привлекших внимание к Ruby, была уже несколько устаревшая статья Хала Фултона (Hal Fulton) >. Вот некоторые из них.

Ruby является динамическим языком. В отличие от статических языков, подобных C++ или Java, методы и переменные в Ruby могут быть добавлены или переопределены во время выполнения программы. Это позволяет, например, обойтись без директив условной компиляции #ifdef, необходимых для языка C. Здесь проявляется сходство Ruby с такими языками, как Lisp и Smalltalk.

Ruby — интерпретируемый язык. Так как это свойство отрицательно сказывается на производительности, то хочется дать некоторые комментарии. Во-первых (и это самое главное), быстрый цикл разработки является важнейшим достоинством, которое > некоторые недостатки. Во-вторых, хотя Ruby и не является катастрофически медленным, в тех случаях, когда скорость абсолютно необходима, можно написать часть кода на языке C. Наконец, в-третьих, никто не сказал, что когда-нибудь не будет написан компилятор с языка Ruby.

В Ruby имеется возможность работы с регулярными выражениями. Когда-то они использовались только в некоторых утилитах UNIX-систем (grep, sed, vi). Затем, благодаря языку Perl, значительное число людей признало их мощь при обработке текстов. Ruby дает возможность использовать эту силу с еще большей легкостью.

Помните известную фразу Исаака Ньютона >? Ruby, безусловно, >, среди которых Smalltalk, CLU, Lisp, C, C++, Perl, Kornshell и другие языки. В Ruby собрано все лучшее, что накоплено человечеством в области языков программирования. При этом соблюдены следующие три принципа: не изобретать колесо, не чинить не сломанное, использовать имеющиеся у программистов знания и опыт. В Ruby пригодятся и знания о файлах и потоках из ОС UNIX, и спецификации функции printf из стандартной библиотеки ввода/вывода языка C, и умение работать с регулярными выражениями в Perl.

Ruby — язык написания сценариев (scripting language). Не следует считать, что это характеризует язык, как > или недостаточно мощный. Подобный язык должен быть интерпретируемым и способным заменить командные файлы, взаимодействующие с операционной системой и управляющие поведением других программ.

Ruby — универсальный и гибкий язык. С его помощью можно одинаково изящно реализовать как то, что традиционно делается с помощью интерпретатора Kornshell, так и то, что пишется обычно на C.

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

Для языка Ruby уже написано большое число библиотек. Потоки, сокеты, объекты, сохраняемые между запусками программ, CGI-программы, базы данных, GUI — все это можно использовать, программируя на Ruby.

Дэйв Томас (Dave Thomas) и Энди Хант (Andy Hunt), соавторы первой книги по Ruby, вышедшей на английском языке, в интервью журналу «Dr. Dobb’s Journal» (январь 2001) говорят: > Фактически это означает, что Ruby — естественный и практически неизбежный результат эволюции современных языков программирования. Авторы данной статьи согласны с такой точкой зрения.

Хочется подчеркнуть, что Ruby не является панацеей для решения всех проблем программистов. Не следует отказываться от использования языков Java и C++ там, где их применение оправдано. С другой стороны, не разумно недооценивать возможности практического применения Ruby в реальных проектах.

Послушаем теперь высказывания лучших представителей программистского сообщества, которые сравнивают Ruby с другими языками.

Начнем с языка Java:

* Ruby — интерпретируемый язык;
* в Ruby все является объектом (в Java есть типы int и Integer, что создает определенные неудобства);
* переменные в Ruby не являются статически типизированными и не требуют объявления;
* модули (modules) в Ruby позволяют с помощью > (mixins) конструировать подобие интерфейсов (interfaces) языка Java, допуская при этом в них реализацию методов.

Теперь сравним с языком Perl:

* Ruby значительно легче освоить, на нем легче программировать, а написанные программы проще сопровождать;
* в Ruby префиксы (@, $, @@) описывают область видимости (scope), а не тип переменной;
* Ruby позаимствовал из языка Perl регулярные выражения, переменную $_ и многое другое.

Завершим сопоставление Ruby с другими языками рассмотрением одного из ближайших > — языка Python. Это сравнение особенно интересно потому, что именно Python рассматривается сейчас многими, как хороший кандидат на роль первого языка программирования. Итак, сравним Ruby с языком Python:

* управляющие конструкции и методы в языке Ruby завершаются ключевым словом end, в то время как Python использует так называемый > синтаксис, когда признаком завершения является изменение количества лидирующих пробелов в очередной строке программы;
* вместо self в Ruby для обозначения переменных экземпляра используется префикс @;
* в Ruby, в отличие от языка Python, понятия типа и класса являются синонимами;
* Python не поддерживает наследования и не позволяет добавлять методы к существующим типам;
* используемый в Ruby алгоритм сборки мусора позволяет проще писать реализации методов на языке C;
* расширения для Ruby, написанные на C/C++ позволяют определять новые классы;
* зачастую Ruby быстрее, чем Python.

И вновь дадим слово создателю языка. Его высказывание о планах дальнейшей работы над Ruby, выраженное в виде одной из управляющих конструкций языка, позволит нам плавно перейти к рассмотрению примеров реальных программ.

Программисты пишут на Ruby

Начнем с примеров, показывающих, что знание библиотек ввода/вывода языков C и C++ пригодится и в Ruby.

Специальная глобальная переменная $_ всегда содержит результат последней операции чтения. Она же используется как аргумент по умолчанию во многих конструкциях. Следующая программа, например, печатает все строки из входного потока, которые содержат слово Ruby.

Ruby-стиль, однако, рекомендует использовать итератор each:

ARGF в Ruby — это объект, который представляет собой конкатенацию содержимого всех файлов, имена которых заданы в командной строке, либо просто стандартный поток ввода (в случае отсутствия аргументов).

Вот как выглядит на Ruby программа вычисления факториала числа, указываемого в качестве аргумента командной строки:

Для вычисления с помощью этой программы, размещенной в файле fact.rb, значения 100! достаточно выполнить команду ruby fact.rb 100.

Три программы, рекурсивно вычисляющие 30-е число Фибоначчи, приведенные ниже, позволяют сравнить производительность интерпретаторов Ruby, Python и Perl.

Еще одна классическая задача — определение с помощью решета Эратосфена списка всех простых чисел, не превосходящих заданного (100 по умолчанию).

В качестве следующего примера рассмотрим решение на языке Ruby задачи, которая часто предлагается студентам первого курса, изучающим языки C/C++: для заданного текстового файла определить число вхождений в него каждого из встречающихся в нем слов. Использование ассоциативных массивов и ряда стандартных методов работы с файлами и строками позволяет написать чрезвычайно краткую и ясную программу.

Приведем два простых примера использования стандартной библиотеки классов. В результате выполнения первой программы будет найдено, что 7/8+1/8=1, а 7/8*1/8=7/64; вторая из них вычислит (1 + i)64.

Без подробных объяснений приведем две эквивалентные программы, иллюстрирующие переопределение оператора [] для класса SongList. Ассоциативный массив (associative array, hash или dictionary) допускает индексирование произвольными объектами, а не только целыми числами. В данном случае оператор [] позволяет находить нужную песню не только по номеру, но и по ее названию.

Так как Ruby унаследовал лучшие особенности многих языков, то для выполнения достаточно стандартных действий обычно имеется несколько разных возможностей. Вот 13 (!) различных способов напечатать числа от 0 до 9:

В заключение вопрос для тех, кто не знает языка Ruby: что напечатает следующая программа?

Если вы сумеете угадать ответ, то это будет лучшим подтверждением тому факту, что Ruby интуитивно ясный язык. Если же не угадаете, то у вас будет еще одна причина изучить его.

Ruby и новички

Этот язык, несомненно, является одним из лучших в качестве первого языка программирования. Быстрый цикл разработки (редактирование — запуск — редактирование), использование интерпретатора, изначальная объектно-ориентированность, нетипизированные переменные, которые не требуют объявления, — все это позволяет учащимся сконцентрировать свое внимание на общих принципах программирования.

Не менее важны мультиплатформенность Ruby и его принадлежность к миру свободно распространяемого ПО. Еще один весомый аргумент в его пользу — возможность практического использования языка в самых разных областях, что не позволит впоследствии профессионалу, который вырастет из новичка, пожалеть о напрасно потраченном времени.

Можно заметить, что значительному числу перечисленных выше требований удовлетворяют и Python, и Java, и C++ и даже (в меньшей степени) Delphi. Последний из них, правда, является коммерческим продуктом, что автоматически должно было бы повлечь исключение его из рассмотрения. Однако в России даже среди организаторов олимпиад по программированию для школьников находятся люди, утверждающие, что стоимость дистрибутива Delphi составляет около 70 рублей!

Язык C++ практически никто и никогда не рекомендовал в качестве первого языка — слишком он сложен. Java, наоборот, используется как первый язык, достаточно часто. Python сейчас рассматривается многими как неплохой кандидат на эту роль.

Попробуем сначала сравнить языки Ruby и Java, посмотрев на них глазами человека, только начинающего знакомиться с миром программирования. Для такого человека чрезвычайно важна ясность и краткость программ, отсутствие в них странных и непонятных > слов. А именно из них и состоит в основном Java-вариант традиционной первой программы!

Аналогичную программу на Ruby долго объяснять не придется:

puts «Здравствуй, мир!»

Ruby в этом смысле очень дружелюбный язык. Программа, написанная новичком, может быть очень короткой и не содержать ничего лишнего, а для создания такой программы необходим, в основном, только здравый смысл.

В отличие от языка Java в Ruby нет проблемы > чисел. Приведенные выше программы вычисления факториала числа или чисел Фибоначчи, будучи написанными на Ruby, всегда дают верный результат. В случае же языка Java ограничения на диапазон представимых целых чисел приводят к нелепым (с точки зрения ученика школы или студента первого курса) равенствам типа

Неприятная неожиданность для человека, только приступающего к изучению программирования!

Еще одним важным фактором является простота методов, используемых в Ruby для ввода данных с клавиатуры или из файла. В случае языка Java сложность этих операций приходится тщательно маскировать, ограждая новичка от ненужных ему проблем.

Компактность дистрибутива Ruby и простота его установки в любой операционной системе позволяют школьнику или студенту без проблем работать на домашнем компьютере. Опять сравнение не в пользу Java!

Язык Python по многим параметрам похож на Ruby. Из приведенных выше различий этих двух языков для рассматриваемой нами ситуации начального обучения программированию особенно значимым оказывается > синтаксис, используемый в языке Python. Эта особенность не является изначально понятной и на первых порах мешает. Вообще, основным аргументом в пользу Ruby в качестве первого языка программирования является именно его интуитивная ясность и предсказуемость, а не многие другие его преимущества.

Ruby и профессионалы

Чем же хорош Ruby для профессионального программиста и системного администратора? Многое уже было сказано выше, но вот еще несколько интересных примеров и кратких комментариев.

По умолчанию строка, заключенная в обратные апострофы, заменяется результатом выполнения команды, в ней заданной. Можно, однако, и переопределить это поведение:

CGI-скрипты, формы, работа с > (cookies) — это только начало. Программы на Ruby могут быть внедрены прямо в HTML, что эквивалентно использованию таких средств, как ASP, JSP или PHP. При этом сохраняется вся мощь Ruby, а для повышения производительности можно использовать специальный модуль для Apache.

Ниже приведена программа, иллюстрирующая Tk расширение языка Ruby. Левая кнопка мыши позволяет рисовать прямые линии, а правая — создавать Postscript-файл с построенным изображением.

Отметим, наконец, что конфигурация и установка дистрибутива Ruby осуществляется с помощью скриптов, написанных на нем самом.


Выпускники МГИУ специальности 2204 этого и предыдущего годов (многие из которых являются сейчас аспирантами) могут обнаружить, что язык Ruby во многом похож на известный им по занятиям на первом курсе язык C-Talk. Этот язык, который разрабатывался в нашем университете группой программистов под руководством Игоря Вячеславовича Абрамова (см. [9-11]), был основан в значительной мере на тех же самых идеях, которые взяты в качестве основополагающих автором Ruby.

Осенью 1997 года студенты-программисты в нашем университете начали изучать язык Java. МГИУ был тогда единственным вузом в Москве, в котором первым языком программирования стал этот ныне общепризнанный язык.

Сейчас к связке языков Java и C++, двух основных языков современных профессиональных программистов, мы добавляем Ruby, с которого и начнется знакомство в новом учебном году первокурсников с миром программирования. Очень хочется верить в то, что и на этот раз наш выбор не окажется ошибочным.

HTML/CSS, JavaScript и Ruby/Rails. Инструменты на все случаи жизни

Когда у вас есть один вариант — им довольно просто воспользоваться. А как сделать правильный выбор, если вариантов много?
Когда-то давно, на заре развития эры информационных технологий компьютеры были сделаны из дерева, а мониторы из рамки с замороженной водой. Первые языки программирования как и сейчас использовались чтобы рассказать машинам о наших желаниях и мечтах, но вот представляли собой глубоко приближенный к архитектуре машинный код. Низкоуровневые команды вплоть до ввода нулей и единиц требовали от первых программистов по-настоящему титанических усилий для написания даже самой простой программы. С тех пор минуло несколько десятилетий и сейчас в нашем распоряжении огромное количество всевозможных технологий для решения самых разных задач от программирования Искусственного Интеллекта до Веб и Мобильных приложений. Это очень интересно!

И всё же, как сделать правильный выбор? Среди множества языков, парадигм и технологий найти те, которые позволяют решать задачи самого широкого спектра, интересны, активно развиваются и при этом гарантированно востребованы на рынке? Спектр технологий HTML/CSS/JS/Ruby/Rails отвечает на все эти вопросы решительное «Да!».

Сегодня HTML5 — язык гипертекстовой разметки на котором держится львиная доля всего, что можно увидеть в сети: от простых сайтов до сложнейших веб-приложений уровня Facebook, Twitter и GitHub. Совместно с CSS3 пользовательские интерфейсы приобретают поистине завораживающий вид, а JavaScript — язык, который позволяет наделить интерфейсы мощнейшим функционалом и удобством использования.

Подобно тому, как огню нужен воздух, пользовательским интерфейсам нужна серверная часть для обработки запросов и манипулирования данными. И здесь язык программирования Ruby и фреймворк Rails показывают себя на высоте. Изящность кода, широчайшие возможности и дружелюбное сообщество позволяют получать истинное удовольствие от написания программ. Вместе с тем, философский подход The Ruby Way успешно раскрывает идею о том, что программирование — это гораздо больше, чем просто ремесло.

Хотите увидеть, как эти технологии работают вместе на примере реального проекта? Узнать о том, как с их помощью создавать не только веб, но и мобильные приложения? Ощутить всю мощь самых современных инструментов ИТ индустрии? Я с радостью расскажу вам об этом на свободном вебинаре «Инструменты на все случаи жизни». С нетерпением жду вас на вебинаре!

Все возможности веб-разработки в самой полной профессии от GeekBrains — «Веб-разработчик».


The ruby markup model currently described in the HTML specification is limited in its support for a number of features, notably jukugo and double-sided ruby, as well as inline ruby. This specification addresses these issues by introducing new elements and changing the ruby processing model. Specific care has been taken to ensure that authoring remains as simple as possible.

This document was largely developed to address the shortcomings listed in Use Cases & Exploratory Approaches for Ruby Markup . [[ruby-use-cases]]

This specification is an extension specification to HTML.

Changes compared to the current ruby model

The following changes are made to HTML by this document:

  • ruby nested inside ruby now represents its children (in other words, it is no longer meaningful, which reflects implementations);
  • new rb and rtc elements have been introduced to support cases in which explicit bases and containers are needed (explicit based are relatively common in existing content);
  • the algorithm for processing ruby markup has been changed (note that if this extension is rejected, the original algorithm will still need to be modified because it is buggy).

Some further changes will be required to HTML if this document is merged in. Of those, some are for paraphernalia (element index and the such) while others are more involved (changes to parsing to auto-close some elements) and in some cases optional.

Changes to [[WEBVTT]] will be required in order to match this model. Also, rb needs to be removed from the obsolete elements.

Parsing changes

Add rb and rtc to the list of elements in generate implied end tags.

Add rb and rtc to the step A start tag whose tag name is one of: «rp», «rt» in The «in body» insertion mode. Within that step, if the start tag is «rt» then generate implied end tags excepting «rtc», otherwise just generate implied end tags.

Add rb and rtc to the elements that preclude a parse error in both An end tag whose tag name is «body» and An end tag whose tag name is «html» in The «in body» insertion mode.


The term is defined in the HTML specification. [[!HTML5]]

The interfaces and are defined in the DOM specification. [[!DOM]]

The element

The ruby element allows one or more spans of phrasing content to be marked with ruby annotations. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation or to include other annotations. In Japanese, this form of typography is also known as furigana. A more complete introduction to ruby can be found in the Use Cases & Exploratory Approaches for Ruby Markup document as well as in CSS Ruby Module Level 1 . [[ruby-use-cases]] [[css3-ruby]]

The content model of ruby elements consists of one or more of the following sequences:

  1. One or more phrasing content nodes or rb elements.
  2. One or more rt or rtc elements, each of which either immediately preceded or followed by an rp elements.

The ruby , rb , rtc , and rt elements can be used for a variety of kinds of annotations, including in particular (though by no means limited to) those described below. For more details on Japanese Ruby in particular, and how to render Ruby for Japanese, see Requirements for Japanese Text Layout . [[JLREQ]] The rp element can be used as fallback content when ruby rendering is not supported.

Mono-ruby for individual base characters

Annotations (the ruby text) are associated individually with each ideographic character (the base text). In Japanese this is typically hiragana or katakana characters used to provide readings of kanji characters.

When no rb element is used, the base is implied, as above. But you can also make it explicit. This can be useful notably for styling, or when consecutive bases are to be treated as a group, as in the jukugo ruby example further down.

In the following example, notice how each annotation corresponds to a single base character.

Ruby text interspersed in regular text provides structure akin to the following image:

This example can also be written as follows, using one ruby element with two segments of base text and two annotations (one for each) rather than two back-to-back ruby elements each with one base text segment and annotation (as in the markup above):

Group ruby is often used where phonetic annotations don’t map to discreet base characters, or for semantic glosses that span the whole base text. For example, the word «today» is written with the characters 今日, literally «this day». But it’s pronounced きょう (kyou), which can’t be broken down into a «this» part and a «day» part. In typical rendering, you can’t split text that is annotated with group ruby; it has to wrap as a single unit onto the next line. When a ruby text annotation maps to a base that is comprised of more than one character, then that base is grouped.

The following group ruby:

Can be marked up as follows:

Jukugo refers to a Japanese compound noun, i.e. a word made up of more than one kanji character. Jukugo ruby is a term that is used not to describe ruby annotations over jukugo text, but rather to describe ruby with a behaviour slightly different from mono or group ruby. Jukugo ruby is similar to mono ruby, in that there is a strong association between ruby text and individual base characters, but the ruby text is typically rendered as grouped together over multiple ideographs when they are on the same line.

The distinction is captured in this example:

Which can be marked up as follows:

In this example, each rt element is paired with its respective rb element, the difference with an interleaved rb / rt approach being that the sequences of both base text and ruby annotations are implicitly placed in common containers so that the grouping information is captured.

For more details on Jukugo Ruby rendering, see Appendix F in the Requirements for Japanese Text Layout and Use Case C: Jukugo ruby in the Use Cases & Exploratory Approaches for Ruby Markup . [[JLREQ]] [[ruby-use-cases]]

In some contexts, for instance when the font size or line height are too small for ruby to be readable, it is desirable to inline the ruby annotation such that it appears in parentheses after the text it annotates. This also provides a convenient fallback strategy for user agents that do not support rendering ruby annotations.

Inlining takes grouping into account. For example, Tokyo is written with two kanji characters, 東, which is pronounced とう, and 京, which is pronounced きょう. Each base character should be annotated individually, but the fallback should be 東京(とうきょう) not 東(とう)京(きょう). This can be marked up as follows:

Note that the above markup will enable the usage of parentheses when inlining for browsers that support ruby layout, but for those that don’t it will fail to provide parenthetical fallback. This is where the rp element is useful. It can be inserted into the above example to provide the appropriate fallback when ruby layout is not supported:

Text with both phonetic and semantic annotations (double-sided ruby)

Sometimes, ruby can be used to annotate a base twice.

In the following example, the Chinese word for San Francisco (旧金山, i.e. “old gold mountain”) is annotated both using pinyin to give the pronunciation, and with the original English.

Which is marked up as follows:

In this example, a single base run of three base characters is annotated with three pinyin ruby text segments in a first (implicit) container, and an rtc element is introduced in order to provide a second single ruby text annotation being the city’s English name.

We can also revisit our jukugo example above with 上手 («skill») to show how it can be annotation in both kana and romaji phonetics while at the same time maintaining the pairing to bases and annotation grouping information.

Which is marked up as follows:

Text that is a direct child of the rtc element implicitly produces a ruby text segment as if it were contained in an rt element. In this contrived example, this is shown with some symbols that are given names in English and French with annotations intended to appear on either side of the base symbol.

Similarly, text directly inside a ruby element implicitly produces a ruby base as if it were contained in an rb element, and rt children of ruby are implicitly contained in an rtc container. In effect, the above example is equivalent (in meaning, though not in the DOM it produces) to the following:

Within a ruby element, content is parcelled into a series of ruby segments. Each is described by:

  • Zero or more , each of which is a DOM range that may contain phrasing content or an rb element.
  • A base range, that is a DOM range including all the bases. This is the .
  • Zero or more ruby text containers which may correspond to explicit rtc elements, or to sequences of rt elements implicitly recognised as contained in an anonymous ruby text container.

Each is described by zero or more each of which is a DOM range that may contain phrasing content or an rt element, and an annotations range that is a range including all the annotations for that container. A ruby text container is also known (primarily in a CSS context) as a .

Furthermore, a ruby element contains . Ignored ruby content does not form part of the document’s semantics. It consists of some inter-element whitespace and rp elements, the latter of which are used for legacy user agents that do not support ruby at all.

The process of associates ruby annotations with ruby bases. Within each ruby segment, each ruby base in the ruby base container is paired with one ruby text annotation from the ruby text container, in order. If there are not enough ruby text annotations in a ruby annotation container, the last one is associated with any excess ruby bases. (If there are not any in the ruby annotation container, an anonymous empty one is assumed to exist.) If there are not enough ruby bases, any remaining ruby text annotations are assumed to be associated with empty, anonymous bases inserted at the end of the ruby base container.

Informally, the segmentation and categorisation algorithm below performs a simple set of tasks. First it processes adjacent rb elements, text nodes, and non-ruby elements into a list of bases. Then it processes any number of rtc elements or sequences of rt elements that are considered to automatically map to an anonymous ruby text container. Put together these data items form a ruby segment as detailed in the data model above. It will continue to produce such segments until it reaches the end of the content of a given ruby element. The complexity of the algorithm below compared to this informal description stems from the need to support an author-friendly syntax and being mindful of inter-element white space.

At any particular time, the element is the result that would be obtained from running the following algorithm:

  1. Let root be the ruby element for which the algorithm is being run.
  2. Let index be 0.
  3. Let ruby segments be an empty list.
  4. Let current bases be an empty list of DOM ranges.
  5. Let current bases range be null.
  6. Let current bases range start be null.
  7. Let current annotations be an empty list of DOM ranges.
  8. Let current annotations range be null.
  9. Let current annotations range start be null.
  10. Let current annotation containers be an empty list.
  11. Let current automatic base nodes be an empty list of DOM Nodes.
  12. Let current automatic base range start be null.
  13. If root has a ruby element ancestor, then abort these steps.
  14. Process a ruby child: If index is equal to or greater than the number of child nodes in root , then run the steps to commit a ruby segment, return ruby segments , and abort these steps.
  15. Let current child be the index th node in root .
  16. If current child is not a Text node and is not an Element node, then increment index by one and jump to the step labelled process a ruby child.
  17. If current child is an rp element, then increment index by one and jump to the step labelled process a ruby child. (Note that this has the effect of including this element in any range that we are currently processing. This is done intentionally so that misplaced rp can be processed correctly; semantically they are ignored all the same.)
  18. If current child is an rt element, then run these substeps:
    1. Run the steps to commit an automatic base.
    2. Run the steps to commit the base range.
    3. If current annotations is empty, set current annotations range start to the value of index .
    4. Create a new DOM range whose start is the boundary point ( root , index ) and whose end is the boundary point ( root , index plus one), and append it at the end of current annotations .
    5. Increment index by one and jump to the step labelled process a ruby child.
  19. If current child is an rtc element, then run these substeps:
    1. Run the steps to commit an automatic base.
    2. Run the steps to commit the base range.
    3. Run the steps to commit current annotations.
    4. Create a new ruby annotation container. It is described by the list of annotations returned by running the steps to process an rtc element and a DOM range whose start is the boundary point ( root , index ) and whose end is the boundary point ( root , index plus one). Append this new ruby annotation container at the end of current annotation containers .
    5. Increment index by one and jump to the step labelled process a ruby child.
  20. If current child is a Text node and is inter-element whitespace, then run these substeps:
    1. If current annotations is not empty, increment index by one and jump to the step labelled process a ruby child.
    2. Run the following substeps:
      1. Let lookahead index be set to the value of index .
      2. Peek ahead: Increment lookahead index by one.
      3. If lookahead index is equal to or greater than the number of child nodes in root , then abort these substeps.
      4. Let peek child be the lookahead index th node in root .
      5. If peek child is a Text node and is inter-element whitespace, then jump to the step labelled peek ahead.
      6. If peek child is an rt element, an rtc element, or an rp element, then set index to the value of lookahead index and jump to the step labelled process a ruby child.
  21. If current annotations is not empty or if current annotation containers is not empty, then run the steps to commit a ruby segment.
  22. If current child is an rb element, then run these substeps:
    1. Run the steps to commit an automatic base.
    2. If current bases is empty, then set current bases range start to the value of index .
    3. Create a new DOM range whose start is the boundary point ( root , index ) and whose end is the boundary point ( root , index plus one), and append it at the end of current bases .
    4. Increment index by one and jump to the step labelled process a ruby child.

  23. If current automatic base nodes is empty, set current automatic base range start to the value of index .
  24. Append current child at the end of current automatic base nodes .
  25. Increment index by one and jump to the step labelled process a ruby child.

When the steps above say to , it means to run the following steps at that point in the algorithm:

  1. Run the steps to commit an automatic base.
  2. If current bases , current annotations , and current annotation containers are all empty, abort these steps.
  3. Run the steps to commit the base range.
  4. Run the steps to commit current annotations.
  5. Create a new ruby segment. It is described by a list of bases set to current bases , a base DOM range set to current bases range , and a first and second ruby annotation containers that are respectively the first and second items of the current annotation containers list. Append this new ruby segment at the end of ruby segments .
  6. Let current bases be an empty list.
  7. Let current bases range be null.
  8. Let current bases range start be null.
  9. Let current annotation containers be an empty list.

When the steps above say to , it means to run the following steps at that point in the algorithm:

When the steps above say to , it means to run the following steps at that point in the algorithm:

  1. If current annotations is not empty and current annotations range is null let current annotations range be a DOM range whose start is the boundary point ( root , current annotations range start ) and whose end is the boundary point ( root , index ).
  2. If current annotations is not empty, create a new ruby annotation container. It is described by an annotations list set to current annotations and a range set to current annotations range . Append this new ruby annotation container at the end of current annotation containers .
  3. Let current annotations be an empty list of DOM ranges.
  4. Let current annotations range be null.
  5. Let current annotations range start be null.

When the steps above say to , it means to run the following steps at that point in the algorithm:

The element

The rb element marks the base text component of a ruby annotation. When it is the child of a ruby element, it doesn’t represent anything itself, but its parent ruby element uses it as part of determining what it represents .

An rb element that is not a child of a ruby element represents the same thing as its children.

The element

The rt element marks the ruby text component of a ruby annotation. When it is the child of a ruby element or of an rtc element that is itself the child of a ruby element, it doesn’t represent anything itself, but its ancestor ruby element uses it as part of determining what it represents .

An rt element that is not a child of a ruby element or of an rtc element that is itself the child of a ruby element represents the same thing as its children.

The element

The rtc element marks a ruby text container for ruby text components in a ruby annotation. When it is the child of a ruby element it doesn’t represent anything itself, but its parent ruby element uses it as part of determining what it represents .

An rtc element that is not a child of a ruby element represents the same thing as its children.

When an rtc element is processed as part of the segmentation and categorisation of content for a ruby element, the following algorithm defines how to :

When the steps above say to , it means to run the following steps at that point in the algorithm:

  1. If current automatic annotation nodes is empty, abort these steps.
  2. If current automatic annotation nodes contains nodes that are not Text nodes, or Text nodes that are not inter-element whitespace, then create a new DOM range whose start is the boundary point ( root , current automatic annotation range start ) and whose end is the boundary point ( root , index ), and append it at the end of annotations .
  3. Let current automatic annotation nodes be an empty list of DOM nodes.
  4. Let current automatic annotation range start be null.

The element

The rp element is used to provide fallback text to be shown by user agents that don’t support ruby annotations. One widespread convention is to provide parentheses around the ruby text component of a ruby annotation.

The contents of the rp elements are typically not displayed by user agents which do support ruby annotations

An rp element that is a child of a ruby element represents nothing. An rp element whose parent element is not a ruby element represents its children.

The example shown previously, in which each >漢字 is annotated with its phonetic reading, could be expanded to use rp so that in legacy user agents the readings are in parentheses (please note that white space has been introduced into this example in order to make it more readable):

In conforming user agents the rendering would be as above, but in user agents that do not support ruby, the rendering would be:

When there are multiple annotations for a segment, rp elements can also be placed between the annotations. Here is another copy of an earlier contrived example showing some symbols with names given in English and French using double-sided annotations, but this time with rp elements as well:

This would make the example render as follows in non-ruby-capable user agents:


Additions to the default style sheet are made by CSS Ruby Module Level 1 . [[css3-ruby]]


Much of this document is deeply indebted to Fantasai and Richard Ishida.

Илон Маск рекомендует:  Программирование на языке си
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL