Categories
HTML Tutorials

Working with language elements

Understanding the Web
How to create a website
Parts of an HTML page
Structure of an HTML Document
Creating and viewing a WEB PAGE
Text formatting in HTML
Organising information using lists
Structure content with tables
Data collection with forms
Navigation with links
Displaying images

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>

I like apples and oranges. The FDOC regulates the Florida citrus industry.

The apple is the pomaceous fruit of the apple tree, species Malus domestica in the rose family.

Oranges are often made intoOJOrange Juice

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>

I like apples and oranges. The FDOC regulates the Florida citrus industry.

This is left-to-right: I like oranges

This is right-to-left: I like oranges

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>

I like apples and oranges. Here are some users and the fruit they purchased this week:

Adam: 3 applies and 2 oranges

ميرك وبأ : 2 apples

Joe: 6 apples