Les différentes directions de lecture du texte : ltr & rtl

Les différentes langues ont des sens d'écriture différents.
La plupart des langues s'écrivent de gauche à droite, en anglais : left-to-right, en abrégé : ltr.
Dans certaines langues, le texte s'écrit de droite à gauche, en anglais : right-to-left, en abrégé : rtl. L'hébreu et l'arabe sont des exemples de « langues rtl ».

Lorsque la langue d'un site Web est modifiée à l'aide d'un outil tel que Conword, les développeurs Web sont souvent confrontés au défi suivant : un site Web est conçu pour un sens de lecture donné, mais doit être affiché dans un autre sens.

Conwords Gestion des directions de déplacement et HTML

La langue actuellement sélectionnée, et donc également le sens de lecture actuellement sélectionné, sont enregistrés par Conword dans le code HTML comme suit. Exemple en espagnol :

<html lang="es" xml:lang="es" dir="ltr"></html>

Sur le site long et xml:lang L'attribut de la balise HTML contient le code de langue sélectionné (dans ce cas « es » pour Ilpañol = espagnol). Dans le toi L'attribut permet de définir le sens d'écriture du texte. Pour l'espagnol, il s'agit d'une écriture de gauche à droite (left-to-right : « ltr »).

Si l'on choisit par exemple l'arabe comme langue, la balise HTML reçoit l'information que le sens d'écriture doit désormais être de droite à gauche (right-to-left : « rtl »).

<html lang="ar" xml:lang="ar" dir="rtl"></html>

Les navigateurs modernes interprètent le toi Attribut et modifiez en conséquence le sens de lecture de l'ensemble du site web.

Problèmes typiques liés au sens de déplacement rtl

Certains clients signalent des erreurs qui apparaissent lors du passage à rtl. Cela est dû au fait que différents codes CSS ou Javascript n'ont pas été conçus pour d'autres sens de lecture. Par exemple, des commandes telles que « padding-left » sont utilisées à la place de « padding-inline-start ». Les espacements et les positions qui se réfèrent à « droite » ou « gauche » plutôt qu'à « début » ou « fin » ne sont pas réinterprétés par le navigateur lors du changement de sens de lecture, mais restent à droite ou à gauche.

Conseil : lorsque les développeurs web utilisent des frameworks tels que Bootstrap, ces problèmes sont déjà résolus et il est relativement facile de changer le sens de défilement. (C'est ainsi que la ville de Cologne a par exemple traité cette question.)

Problèmes avec les numéros de téléphone

Un autre problème concerne la représentation des numéros de téléphone. L'IA a du mal à reconnaître quelle partie des numéros de téléphone correspond à l'indicatif, car il n'existe pas de représentation standardisée des numéros de téléphone. Par exemple, le numéro de téléphone « 0123 / 45678 » peut également apparaître sous les formes suivantes :

  • 0123 / 45678
  • 0123/45678
  • 012345678
  • 0123 – 45678
  • 0123-45678
  • 0123 45678
  • 0123 456 78
  • 0123 – 45 67 – 8
  • +49 123 / 45678
  • +4912345678
  • etc.

Pour exclure des numéros de téléphone (ou d'autres chiffres) de la direction d'exécution, il est possible d'utiliser le toi L'attribut peut également être placé sur différents blocs. Conword ne peut pas le faire automatiquement, car les contextes des différentes pages Web sont beaucoup trop différents. La section suivante propose une solution Javascript à ce problème.

Vos possibilités pour différents sens de marche

Il existe essentiellement trois possibilités pour gérer les sens de marche :

  1. Développement du site web avec des adaptations CSS
  2. Désactivation complète du sens de marche
  3. Désactivation partielle du sens de marche

1. Développement du site web avec des adaptations CSS

La solution la plus propre consiste à adapter le CSS afin que les deux sens de lecture soient pris en charge. Malheureusement, les ressources nécessaires pour mettre en œuvre (rapidement) les modifications requises ne sont pas toujours disponibles. C'est pourquoi, chez Conword, nous avons créé la possibilité d'empêcher le changement de sens de lecture.

2. Désactivation complète du sens de marche

Pour savoir comment désactiver complètement le sens de marche, consultez la Documentation développeur sous « Setup Options » . En gros, avant d'intégrer Conword, vous devez créer une variable de configuration Javascript qui est utilisée pour disable_rtl_attribute la valeur vrai remarque :

<script>
	var conword_config={
        disable_rtl_attribute:true
    };
</script>

Ou en une ligne :

<script>var conword_config={disable_rtl_attribute:true};</script>

Si la variable de configuration est enregistrée de cette manière, le comportement de Conword décrit ci-dessus change et le toi L'attribut n'est plus défini.

Notre recommandation : Si votre site web rencontre des problèmes avec la rtl Si l'affichage est correct, désactivez provisoirement le changement de sens de défilement. Vous pouvez désormais mettre Conword en ligne et apporter les modifications CSS en parallèle. Une fois toutes les modifications effectuées, réactivez le changement de sens de défilement.

3. Désactivation partielle du sens de marche

Pour résoudre le problème décrit ci-dessus concernant les numéros de téléphone, il peut être judicieux d'exclure les numéros de téléphone de la direction d'exécution. Vous pouvez adapter cela dans le modèle de votre site web en dir=« ltr » sur la balise HTML ou l'ajuster ultérieurement à l'aide de Javascript.

Exemple de code :

document.addEventListener("DOMContentLoaded", function() {
    var liens_téléphoniques = document.querySelectorAll('a.numéro_de_téléphone');
    for(var i = 0; i < liens_téléphoniques.length; i++){
        liens_téléphoniques[i].setAttribute('dir','ltr');
    }
});

Vous avez des questions ?

Si vous avez des questions à ce sujet, Nous vous conseillons volontiers.

Essayer Conword

Klaus Gah

Stratégie et ventes

« Mon objectif n'est pas de vendre des logiciels ou des services, mais de contribuer activement à créer un monde où il fait bon vivre.
Et avec Conword, je peux y contribuer de tout mon cœur. »

Prendre rendez-vous