Formatage du texte bi-directionnel avec BDI

Introduction

Le texte bi-directionnel (bidi) est un style de formatage dans lequel le texte est écrit à la fois de gauche à droite et de droite à gauche. Il est très utile lorsque vous écrivez du contenu en plusieurs langues et également lorsque l'utilisateur entre des informations dans des langues autres que la langue par défaut de votre page web. Dans de tels cas, l'utilisation de la balise <bdi> peut vous être très bénéfique et améliorer l'expérience utilisateur.

Dans ce laboratoire, vous allez apprendre à utiliser la balise <bdi> pour isoler le texte bi-directionnel en HTML. À la fin de ce laboratoire, vous serez capable de créer un contenu web qui est à la fois convivial et favorise le multilinguisme.

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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/LayoutandSectioningGroup -.-> html/access_cons("Accessibility Considerations") html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/adv_access("Accessibility for Advanced Elements") subgraph Lab Skills html/basic_elems -.-> lab-70710{{"Formatage du texte bi-directionnel avec BDI"}} html/head_elems -.-> lab-70710{{"Formatage du texte bi-directionnel avec BDI"}} html/text_dir -.-> lab-70710{{"Formatage du texte bi-directionnel avec BDI"}} html/doc_flow -.-> lab-70710{{"Formatage du texte bi-directionnel avec BDI"}} html/access_cons -.-> lab-70710{{"Formatage du texte bi-directionnel avec BDI"}} html/forms -.-> lab-70710{{"Formatage du texte bi-directionnel avec BDI"}} html/form_access -.-> lab-70710{{"Formatage du texte bi-directionnel avec BDI"}} html/inter_elems -.-> lab-70710{{"Formatage du texte bi-directionnel avec BDI"}} html/adv_access -.-> lab-70710{{"Formatage du texte bi-directionnel avec BDI"}} end

Configure la structure de fichier HTML

Configurons la structure de fichier de base pour notre fichier HTML. Ouvrez votre éditeur de texte préféré, créez un nouveau fichier et enregistrez-le sous le nom index.html.

<!doctype html>
<html>
  <head>
    <title>Texte bi-directionnel avec HTML</title>
  </head>
  <body></body>
</html>

Créez un formulaire pour la saisie utilisateur

Ensuite, nous allons créer un formulaire pour collecter les commentaires des utilisateurs, qui peuvent être écrits dans n'importe quelle langue. Ce formulaire sera ajouté à la balise body que vous avez créée dans l'étape précédente. Pour ce faire, ajoutez le code suivant à votre fichier index.html :

<body>
  <h1>Formulaire de commentaires utilisateurs</h1>

  <form>
    <label for="user-feedback">Entrez vos commentaires ici :</label>
    <br />
    <textarea name="user-feedback" id="user-feedback" rows="5"></textarea>
    <br />
    <button type="submit">Soumettre les commentaires</button>
  </form>
</body>

Le code ci-dessus crée un formulaire simple contenant une étiquette pour les commentaires, une zone de saisie pour les commentaires et un bouton de soumission.

Ajoutez la balise `<bdi>` au texte bi-directionnel

Pour vous assurer que tout langage bi-directionnel que les utilisateurs entrent dans les commentaires est correctement affiché sur la page web, nous devons l'entourer de la balise <bdi>. Le bloc de code ci-dessous montre comment utiliser la balise <bdi>.

<body>
  <h1>Formulaire de commentaires utilisateurs</h1>

  <form>
    <label for="user-feedback">Entrez vos commentaires ici :</label>
    <br />
    <textarea name="user-feedback" id="user-feedback" rows="5"></textarea>
    <br />
    <button type="submit">Soumettre les commentaires</button>

    <div>
      <p>Commentaires de l'utilisateur :</p>

      <!-- Ajout de la balise <bdi> -->

      <p><bdi id="feedback-display"></bdi></p>
    </div>
  </form>
</body>

// Script pour afficher les commentaires de l'utilisateur
<script>
  const feedbackDisplay = document.getElementById("feedback-display");
  const feedbackInput = document.getElementById("user-feedback");

  // Gérer la soumission du formulaire
  document.querySelector("form").addEventListener("submit", (event) => {
    event.preventDefault();
    feedbackDisplay.innerHTML = feedbackInput.value;
  });
</script>

Le code ci-dessus contient un bloc de code qui affiche les commentaires de l'utilisateur entourés de la balise <bdi> ci-dessus en tant que sortie.

Soignez-vous de bien vous assurer que votre texte bi-directionnel est désormais correctement isolé par la balise <bdi>! Testons maintenant votre formulaire. Ouvrez le fichier index.html dans n'importe quel navigateur web et entrez quelques commentaires. Ces commentaires peuvent contenir des lettres, des ponctuations et des mots de nombreuses langues. Lorsque vous soumettez le formulaire, vous constaterez que les commentaires sont affichés dans la zone de sortie.

Améliorez l'accessibilité avec ARIA

Pour améliorer l'accessibilité de votre page web, vous pouvez ajouter des attributs ARIA. ARIA signifie Accessible Rich Internet Applications. Les attributs ARIA prennent en charge l'accessibilité pour les utilisateurs souffrant de diverses handicaps tels que la cécité, la surdité et une mobilité limitée.

<label for="user-feedback" aria-label="Entrez vos commentaires"></label>

En utilisant l'attribut aria-label, nous pouvons attacher une étiquette textuelle à n'importe quel élément HTML afin de le rendre plus accessible. Dans le bloc de code ci-dessus, nous avons attaché une aria-label à la balise <label>.

Récapitulatif

Dans ce laboratoire, vous avez appris à utiliser la balise <bdi> pour isoler le texte bi-directionnel en HTML. Voici les principaux points à retenir de ce laboratoire :

Le Texte Bi-Directionnel (bidi) aide à formater le texte écrit dans plusieurs langues.
La balise <bdi> est utilisée sur une plage de texte qui doit être isolée de son environnement pour la mise en forme du texte bi-directionnel.
La balise <bdi> est utile pour diverses langues, y compris l'arabe et l'hébreu.
Pour afficher correctement le texte bi-directionnel, d'abord, l'entourez de la balise <bdi>, puis utilisez la CSS pour le styliser.
Les attributs ARIA peuvent être ajoutés pour améliorer l'accessibilité des pages web.