Working with language elements

Working with language elements

The ruby, rt, and rp elements

Ruby characters are notations placed above or to the right of characters in logographic languages (such as Chinese or Japanese), and that aid the reader in correctly pronouncing characters. The ruby element denotes a span of text that contains a ruby.

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    I like apples and oranges. The
    <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the Florida
    citrus industry.
    <p>
      <q cite="http://en.wikipedia.org/wiki/Apple"
        >The <dfn title="apple">apple</dfn> is the pomaceous fruit of the apple
        tree, species Malus domestica in the rose family.</q
      >
    </p>
    <p>
      Oranges are often made into<ruby>
        OJ <rp>(</rp><rt>Orange Juice</rt><rp>)</rp></ruby
      >
    </p>
  </body>
</html>

The bdo element

The bdo element specifies an explicit text direction for its content, overriding the automatic directionality that would usually be applied.

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    I like apples and oranges. The
    <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the Florida
    citrus industry.
    <p>This is left-to-right: <bdo dir="ltr">I like oranges</bdo></p>
    <p>This is right-to-left: <bdo dir="rtl">I like oranges</bdo></p>
  </body>
</html>

The bdi element

The bdi element denotes a span of text that is isolated from other content for the purposes of text directionality.

<html>
  <head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  </head>
  <body>
    I like apples and oranges. Here are some users and the fruit they purchased
    this week:
    <p><bdi>Adam</bdi>: 3 applies and 2 oranges</p>
    <p><bdi> ميرك وبأ </bdi> : 2 apples</p>
    <p><bdi>Joe</bdi>: 6 apples</p>
  </body>
</html>