Maîtriser les annotations en rubis en HTML

Introduction

En typographie d'Asie de l'Est, le texte en rubis est une petite annotation de texte généralement placée au-dessus ou à droite d'un caractère. Ce texte fournit la prononciation ou la traduction du caractère. Le texte en rubis est un composant important de l'annotation en rubis en HTML. Dans ce laboratoire, vous allez apprendre à créer des annotations en rubis à l'aide de la balise HTML <rt>.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Configuration du document HTML

Tout d'abord, créons un nouveau document HTML dans le fichier index.html. Ajoutez le code suivant au fichier :

<!doctype html>
<html>
  <head>
    <title>Exemple d'annotation en rubis</title>
  </head>
  <body>
    <h1>Exemple d'annotation en rubis</h1>
  </body>
</html>

Cette structure de base configure le document que nous utiliserons pour créer notre exemple d'annotation en rubis.

Ajout de texte en rubis

Ensuite, nous allons ajouter du texte que nous voulons annoter avec du texte en rubis. Ajoutez le code suivant après la balise h1 :

<p>
  Voici du texte que nous voulons annoter avec du texte en rubis. En typographie
  d'Asie de l'Est, le texte en rubis est utilisé pour fournir la prononciation
  ou la traduction d'un caractère.
</p>

Création d'une annotation en rubis

Maintenant, créons une annotation en rubis pour un caractère dans le texte. Nous utiliserons la balise <ruby> pour encadrer le caractère et la balise <rt> pour fournir le texte en rubis. Ajoutez le code suivant après le paragraphe :

<p>
  Voici du texte que nous voulons annoter avec du texte en rubis. En typographie
  d'Asie de l'Est, le texte en rubis est utilisé pour fournir la prononciation
  ou la traduction d'un caractère.
</p>

<ruby> 漢 <rt>hàn</rt> </ruby>

Dans cet exemple, nous encadrons le caractère '漢' avec la balise <ruby>. Nous utilisons ensuite la balise <rt> pour fournir le texte en rubis 'hàn'.

Ajout de plus de caractères

Ajoutons quelques autres caractères à notre exemple. Remplacez le code de la balise <ruby> par le suivant :

<ruby> 漢 <rt>hàn</rt> </ruby>

<ruby> 字 <rt>zì</rt> </ruby>

<ruby> 表 <rt>biǎo</rt> </ruby>

Dans ce code, nous ajoutons deux autres caractères à notre exemple et les annotons avec leur texte en rubis respectif.

Test de l'annotation en rubis

Enregistrez le fichier index.html et ouvrez-le dans un navigateur web. Vous devriez voir la sortie suivante :

Dans cette sortie, vous pouvez voir les caractères annotés avec leur texte en rubis respectif.

Sommaire

Félicitations ! Vous avez réussi à créer des annotations en rubis à l'aide de la balise HTML <rt>. Le texte en rubis est un composant important des annotations en rubis en HTML et est utilisé en typographie d'Asie de l'Est pour fournir la prononciation ou la traduction d'un caractère.

Explication des annotations en rubis en HTML