Chapter 27 | Ruby? Say what now?
Continuing with text-level semantics, in this chapter we look at a couple of elements that are concerned with either annotating or controlling how the text for different languages and writing directions are rendered.
These elements need to be discussed as a group, as neither can be demonstrated in isolation. The
ruby element is used to represent small annotations. The most common use is to show the pronunciation of East Asian characters, but can be used to annotate other kinds of text as well. Each
ruby element consists of the base character and its associated annotation.
Let’s look at the above in a bit more detail. First, each base character and its associated annotation is wrapped by the
ruby element as previously mentioned. The
rp(HTML Ruby Fallback Parenthesis) element is used, as the name suggests, to provide fallback parenthesis for browsers that do not support ruby annotations using the
NOTE: According to the browser support data on MDN Web Docs, support for all three of these elements is very good but, it is still common to use the
So essentially, if a browser supports ruby annotations using the
ruby element, the parenthesis inside the
rp elements will not be rendered. If a browser does not support ruby annotations, the above would be rendered as follows:
rt(Ruby text) element is used to wrap the ruby text component of the ruby annotation and is most commonly rendered above the associated character(although you have some control over it via CSS).
NOTE: In the below example you will notice that I set the base font size to 200%. That is because
rubyis rendered at about half the size of the main text and so, with a common default body font size of 16px, the
rubytext would render at roughly 8px, making it very hard to read. Coincidentally, the name “ruby” originated from British typography where type with a height 5.5 points was used for interlinear annotations in printed documents.
As mentioned above, you could also use this to annotate other types of text, for example:
Live Codepen - Common and nt ot so common use of
While one could discuss these elements in isolation, demonstrating the difference is a bit clearer when discussed together. Let’s look at an example and then discuss the details.
If you look at the live example below you will notice the following about the five examples:
- In this instance, the Arabic word is rendered correctly as we specify
rtlbut, it also affects the overall sentence which renders incorrectly.
- Here we are forcing the browser to incorrectly render the name “John” and, it also affects the overall sentence rendering.
- Here everything seems to render correctly but, if you look closely you will notice that the Arabic name is rendered incorrectly.
- Here and in example five, the individual word, as well as the overall sentence, renders correctly.
Live Codesandbox - Example using The bdi and bdo elements
The main differences then between the
bdo elements are:
bdisets the value of its
dirattribute to “auto” allowing the browser to determine the appropriate direction and, it also isolates it from its surrounding content
bdoelement requires you to set the
dirattribute explicitly but, it does not isolate it from its surrounding content.
What this boils down to is that when the content can be either RTL or LTR and you have no way of knowing beforehand, wrap the content in the
bdi element. If you know or wish to override the default rendering of a piece of content, wrap it with the
bdo element and explicitly set the direction using the
While perhaps not used a lot, it is most definitely important to be aware of these elements as they can directly or indirectly affect the accessibility of content on multilingual sites or sites that contain user-generated content. Definitely worth understanding and having in your toolbelt. 🛠