Traduction de "
RTL Styling 101 - Un guide complet sur la façon de styliser pour RTL en CSS " par Ahmad Shadid.
Plus de 292 millions de personnes dans le monde parlent l'arabe comme langue maternelle. Je leur appartiens, donc je développe parfois des sites qui devraient supporter les deux sens de l'écriture de texte: de gauche à droite (LTR - de gauche à droite) et de droite à gauche (de droite à gauche).
Introduction au style RTL
CSS utilise la direction LTR par défaut. Si vous vérifiez les styles de navigateur pour l'élément html, vous verrez que pour la propriété dir (ou "direction"), la valeur ltr est la valeur par défaut. Voici un exemple de base pour démontrer la différence entre le balisage LTR et RTL.
Faites attention au bloc RTL - contrairement à LTR, le texte qu'il contient est lu de droite à gauche. Dans cet exemple simple, le navigateur l'a affiché correctement. Pour changer la direction de la langue du document, vous devez ajouter l'attribut dir à l'élément racine.
<html dir="rtl">...</html>
Lorsque la valeur dir change, tous les éléments imbriqués devraient automatiquement basculer ensuite: les titres, les paragraphes, les liens, les images et les formulaires.
Il convient également de mentionner que l'attribut dir peut être défini sur «auto», ce qui changera automatiquement la direction de l'élément en fonction d'une analyse de son contenu. Selon la spécification HTML:
Les auteurs demandent instamment que cette valeur ne soit utilisée qu'en dernier recours, lorsque la direction du texte est vraiment inconnue et qu'il n'y a aucun moyen de la déterminer efficacement côté serveur.
En plus de définir l'attribut dir = rtl pour l'élément HTML, nous pouvons également ajouter direction: rtl comme style CSS.
.element { direction: rtl; }
Cependant, CSSWG (le groupe de travail CSS) recommande de définir la direction exactement comme un attribut pour l'élément racine HTML pour garantir que le balisage est correct, que CSS soit présent ou non.
Exemple de changement de direction du marquage
Regardons un exemple plus détaillé pour mieux comprendre comment changer la direction de marquage de LTR à RTL.
<article class="media"> <img class="media__photo" src="blueberry-cheesecake.jpg" alt=""> <div class="media__content"> <h2>Blueberry Cheesecake</h2> <p>...</p> <p><a href="#" class="link">View Recipe</a></p> </div> </article>
Au départ, j'ai utilisé le bon vieux flotteur pour justifier à gauche l'image dans le balisage LTR et, bien sûr, j'ai appliqué clearfix.
.media:after { content: ""; display: block; clear: both; } .media img { float: left; width: 200px; margin-right: 16px; }
Ensuite, nous ajoutons dir = “rtl” pour l'élément contenant le texte arabe. Le résultat suivant est obtenu:
Tous les éléments sont alignés sur le côté droit, à l'exception de l'image. Cela est dû au fait que la propriété image était définie sur float: left et margin-right: 16px. Pour résoudre ce problème, remplacez les styles suivants
.media[dir="rtl"] img { float: right; margin-right: 0; margin-left: 16px; }
Contenu anglais et arabe dans la présentation LTR
Que se passe-t-il si certains textes contiennent un mélange de mots anglais et arabes et que le balisage est dans le sens LTR? Le résultat est étrange
Le navigateur n'affichera pas correctement le titre. Les arabophones seront déroutants. Les mots de cette rubrique doivent être dans l'ordre indiqué dans l'image ci-dessous. Commençant juste à droite.
Pour éviter ce problème, définissez la direction de la langue appropriée dans la mesure du possible. Si l'élément est défini sur l'attribut dir = "rtl", il sera affiché comme prévu.
La situation peut devenir encore plus compliquée si le titre est long. Ci-dessous, je l'ai complété un peu et le résultat était inattendu. J'ai indiqué avec des nombres la séquence correcte. Encore une fois, en partant de la droite.
Lorsque l'attribut dir = "rtl" est défini pour l'élément, le titre devient correct. Autrement dit, la phrase semble grammaticalement correcte et les mots sont disposés dans le bon ordre.
Flexbox
Flexbox prend essentiellement en compte le mode d'écriture défini dans le document. Ce facteur est utilisé pour déterminer comment les blocs s'aligneront sur la page par défaut. Par exemple, sur un site anglais, ils iront de gauche à droite et en chinois de haut en bas. Pour l'anglais et l'arabe, la propriété de mode d'écriture par défaut est horizontal-tb.
Selon le
Mozilla Developer Network (MDN), une valeur horizontale-tb signifie ce qui suit:
Le contenu est positionné horizontalement de gauche à droite, verticalement de haut en bas. La ligne horizontale suivante est en dessous de la précédente.
Lorsque la direction de la page change en RTL, flexbox étend de manière appropriée le flux de ses éléments. C'est un énorme avantage! L'image ci-dessous montre la rotation de l'axe de la boîte flexible, selon la valeur de la propriété direction.
Dans l'exemple ci-dessous, j'ai créé trois éléments et les ai numérotés pour montrer la différence lors du changement de direction de la page.
<div class="element"> <div class="item"^_^gt lt^_^/div> <div class="item"^_^gt lt^_^/div> <div class="item"^_^gt lt^_^/div> </div>
.element { display: flex; flex-direction: row; }
Grille CSS
Comme flexbox, la grille css dépend du mode d'écriture du document, ce qui nous donne les mêmes avantages que lors de l'utilisation de flexbox.
Dans l'exemple ci-dessous, pour la direction LTR, la barre latérale doit être à gauche et principale à droite. Pour RTL, l'inverse est vrai. Lorsque nous utilisons CSS Grid, cette reconstruction sera effectuée automatiquement conformément à la direction définie sur cette page.
<div class="element"> <div class="side">Side</div> <div class="main">Main</div> </div>
.element { display: grid; grid-template-columns: 220px 1fr; grid-gap: 1rem; }
Principales erreurs lors du passage à la direction RTL
Les développeurs non arabes font des erreurs courantes qui sont immédiatement évidentes pour les locuteurs natifs.
1. Espacement des lettres
En anglais, il est courant d'utiliser la propriété d'espacement des lettres pour contrôler l'espacement des lettres dans un mot. Prenons l'exemple suivant avec un contenu en anglais. Cela semble tout à fait normal.
Cependant, si vous ajoutez le même espacement des lettres au texte arabe, cela aura l'air très étrange. Considérez l'exemple réel suivant.
Notez que dans le texte auquel la propriété d'espacement des lettres est appliquée, les lettres de chaque mot sont séparées les unes des autres. C'est faux. Les lettres arabes doivent avoir l'air connectées, et garder le même espacement des lettres qu'en anglais empêche cela. Assurez-vous que lorsque vous travaillez avec un site multilingue, n'oubliez pas de définir la propriété d'espacement des lettres: 0 au bon endroit.
2. Transparence du texte
Dans la conception de sites Web, le texte est souvent rendu translucide. Par exemple, pour marquer son importance secondaire. Cela fonctionne pour l'anglais. Cependant, si le contenu est en arabe, un problème peut survenir en raison de la façon étrange de rendre le texte.
Des endroits apparaissent dans lesquels la couleur du contour du personnage change en raison de leur chevauchement. Dans cet exemple, la propriété d'espacement des lettres n'a pas été définie, elle n'affecte donc pas le problème. La solution consiste à définir des couleurs sans translucidité (qui est généralement définie via RGBa ou opacité).
3. Différences de taille des mots dans différentes langues
Parfois, lorsqu'un site est traduit en arabe, la taille des éléments change en raison du fait que certains mots après la traduction deviennent plus grands ou plus petits. Prenons l'exemple suivant, dans lequel j'ai simulé la navigation du site Smashing Magazine.
Dans la version arabe, certains mots ont presque la même taille que leurs versions anglaises, certains sont exactement égaux et certains sont plus grands. Pour le rendre plus clair, voici une comparaison de chaque mot et de sa traduction arabe.
Vous vous demandez peut-être pourquoi je parle de la différence de taille des mots dans différentes langues, car c'est normal et attendu. Prenons l'exemple suivant de LinkedIn dans le monde réel.
Le bouton "Terminé" est traduit en arabe par "تم", c'est pourquoi il devient assez petit et semble généralement étrange. Surtout pour de tels cas, il serait préférable de définir la propriété min-width pour le bouton. Je l'ai ajouté via le panneau développeur pour montrer à quoi cela devrait ressembler:
Voici un exemple très similaire de Twitter:
Veuillez noter que les problèmes ci-dessus avec LinkedIn et Twitter ont été découverts au moment de la rédaction (13 décembre 2019).
4. Troncature du texte
Une fois, j'ai travaillé sur un projet multilingue et j'ai rencontré un problème lié à la troncature du texte dans la mauvaise direction. Prenons l'exemple suivant.
La troncature du texte anglais est incorrecte. Cela devrait se produire à la fin de l'élément, pas au début. Pour résoudre ce problème, vous devez définir l'attribut dir = "auto" pour cet élément, puis le navigateur analysera automatiquement le contenu et décidera de la valeur dir à appliquer.
<p dir="auto">أهلاً وسهلاً بكم في المقال الذي يتحدث عن تصميم صفحات الويب للغة العربية</p> <p dir="auto">Welcome to the article that explains how to design for RTL pages.</p>
5. Choisir une mauvaise police RTL
La présence d'une version RTL du site ne signifie pas que vous pouvez simplement vous limiter à spécifier la police système installée par l'utilisateur par défaut. Vous devez prendre cela au sérieux pour assurer une bonne lisibilité. Twitter est un exemple de sélection d'une police défaillante:
D'un point de vue arabophone, le mot «تغريد» est difficile à lire pour plusieurs raisons:
- police pas très bonne
- la graisse altère la lisibilité
- les points du mot sont très petits et trop proches des lettres
J'ai donné quelques exemples qui semblent beaucoup plus clairs:
6. Mélanger les nombres hindi et arabe
En arabe, il y a deux façons d'écrire des nombres:
- Hindi: ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩
- Arabe: 0 1 2 3 4 5 6 7 8 9
Les nombres utilisés en anglais sont hérités de l'arabe: «0, 1, 2, 3, 4, 5, 6, 7, 8, 9». Le texte contenant des nombres doit correspondre à une seule des deux options: hindi ou arabe.
Selon Wikipedia:
La raison pour laquelle en Europe et en Amérique les chiffres sont appelés "arabes" est parce qu'ils ont été introduits en Europe au 10ème siècle par des arabophones d'Afrique du Nord.
L'exemple suivant contient un mélange de chiffres hindi et arabe. Cette approche semble incohérente et un seul style devrait être utilisé à la place.
Moments qui peuvent ne pas fonctionner avec RTL
1. Hauteur de ligne (hauteur de ligne)
En règle générale, une police distincte est définie pour le balisage RTL. Dans ce cas, vérifiez à quoi ressemble le contenu sur une ou plusieurs lignes. Dans l'exemple suivant, il y a moins d'espace entre les lignes pour le texte arabe que pour l'anglais, même si elles ont la même valeur pour la propriété line-height.
Il est important de tenir compte de cela et de définir la valeur correcte pour la hauteur de ligne pour le texte arabe.
Twitter, par exemple, a un bouton avec du contenu recadré. Juste à cause de la mauvaise valeur de hauteur de ligne.
Notez que dans la première image, le diacritique arabe est rogné. Il s'appelle kasra et est très important pour la bonne lecture du mot. Dans l'image suivante, j'ai corrigé la hauteur de la ligne et maintenant les caractères sont affichés complètement, sans recadrage.
2. Liens soulignés
Avec les mots arabes, le soulignement standard des liens CSS semble mauvais. Cela est dû aux particularités de l'écriture de mots et de lettres en arabe et est illustré dans l'image suivante:
J'ai marqué les zones problématiques avec un cercle rouge. Le soulignement chevauche les points des lettres. En gros plan:
Les points marqués d'un cercle rouge se chevauchent avec un soulignement, ce qui rend la lecture difficile. La solution consiste à personnaliser le soulignement avec CSS.
2.1. Typographie (texte-décoration)
Il est possible de changer le style et la couleur du soulignement en utilisant les nouvelles propriétés text-decoration-style et text-decoration-color. Cependant, rien ne garantit que cela fonctionnera correctement avec toutes les familles et tailles de polices. Au moment de la rédaction de cet article, Firefox est le navigateur qui prend le mieux en charge ces fonctionnalités.
.link-2 { text-decoration-color: rgba(21, 132, 196, 0.2); text-decoration-style: normal; text-underline-offset: 4px; text-decoration-thickness: 2px; }
2.2 Ombre (box-shadow)
La prise en charge par le navigateur de la propriété box-shadow est bien meilleure que la décoration de texte. Vous pouvez vérifier la prise en charge de l'une des nouvelles propriétés de décoration de texte, et si le navigateur ne la prend pas en charge, appliquez une solution de secours à l'aide de la propriété box-shadow.
.link-3 { color: #000; text-decoration-color: rgba(21, 132, 196, 0.2); text-decoration-style: normal; text-underline-offset: 4px; text-decoration-thickness: 2px; box-shadow: inset 0 -5px 0 0 rgba(#1584c4, 0.2); } @supports (text-decoration-color: red){ .link-3 { box-shadow: none; } }
3. Coupure de ligne
Si vous utilisez la propriété word-break, vous devez vérifier l'exactitude de son fonctionnement. Jetez un œil à l'exemple suivant:
Les zones encerclées sont des mots arabes coupés par des sauts de ligne en raison de l'utilisation du saut de mot. Et en arabe, l'habillage de mot n'est pas utilisé, car les lettres de chaque mot doivent être connectées les unes aux autres.
4. Abréviations
En anglais, les abréviations sont souvent utilisées, par exemple, pour les jours de la semaine. Ainsi, «samedi» devient «samedi».
En arabe, cela n'est pas possible en principe, car les lettres du mot doivent être connectées.
Icônes bidirectionnelles
Les icônes symétriques n'ont pas besoin d'être inversées lors du basculement entre les dispositions LTR et RTL. Voici quelques exemples:
Dans le même temps, pour certaines icônes, il est important de changer la direction dans la version RTL du site afin qu'elles soient correctement comprises par l'utilisateur.
Retournement des éléments
En travaillant sur certains composants, j'ai besoin d'un moyen de les retourner rapidement. Dans Sketch, je copie le composant et le retourne avec la commande appropriée. La même fonctionnalité est disponible dans Adobe XD et Figma.
Pour voir ce que je veux dire, voici une animation montrant ce que je fais après avoir retourné le composant.
Caractéristiques de conception pour RTL
Dans cette section, j'examinerai les composants les plus courants et montrerai à quoi ils devraient ressembler en mode RTL.
Icônes des boutons
Il y a des situations où le bouton a une icône qui ouvre un menu d'actions supplémentaires. Dans ce cas, l'emplacement de l'icône doit être inversé dans la disposition RTL.
Champs de saisie
Certains champs de saisie de formulaire doivent rester alignés à gauche, même en mode RTL. Par exemple, saisissez les champs e-mail ou numéros de téléphone.
Chapelure
Les flèches entre les sections du fil d'Ariane doivent également être tournées.
Titre de la page
Le composant d'en-tête de page contient les sections de début et de fin. Les deux doivent être tournés en RTL
Des tables
Les tables doivent également être tournées.
Signets
Si l'icône se trouve à gauche du nom dans les signets en mode LTR, ce composant doit être développé en RTL.
Carte
Pour une carte horizontale, l'image et le texte doivent être échangés en RTL
Notifications contextuelles
Comme vous pouvez vous y attendre, les icônes «fermer» et «avertissement» doivent être échangées
Propriétés booléennes CSS
Selon MDN:
Propriétés et valeurs logiques CSS est un module qui représente des propriétés et des valeurs logiques qui permettent de contrôler la disposition à l'aide de directions et de dimensions logiques plutôt que physiques.
Prenons un exemple simple. Supposons que nous devons aligner une ligne de texte vers la droite. Ajoutez ce qui suit:
.page-header { text-align: right; }
Et pour RTL:
[dir="rtl"] .nav-item { text-align: left; }
Et s'il y avait un moyen d'ajouter une seule valeur pour la propriété text-align, ce qui changerait le côté d'alignement, étant donné la direction de la page? Les propriétés logiques du CSS viennent à la rescousse!
.page-header { text-align: end; }
Lorsque vous l'utilisez, le côté spécifié par la propriété text-align sera basé sur la direction de la page.
DémoPour mieux voir la différence entre le début et la fin, j'ai préparé le diagramme ci-dessous. La valeur de départ est équivalente à la valeur de gauche dans LRT et à la valeur de droite dans RTL. Même chose avec la fin, juste le contraire.
Maintenant que vous avez une idée générale de la façon dont cela fonctionne, regardons des exemples supplémentaires et des façons d'appliquer les propriétés logiques de CSS.
Rembourrage logique
Supposons que nous ayons un champ de saisie avec une icône de recherche à droite. Nous devons régler le rembourrage des deux côtés. Le rembourrage à droite sera légèrement plus grand pour éviter de superposer l'icône sur le texte.
.input--search { padding-inline-start: 1rem; padding-inline-end: 2.5rem; }
Marge logique
La marge à droite de l'icône doit être logique, nous utilisons donc margin-inline-end pour cela.
.page-header__avatar { margin-inline-end: 1rem; }
Cadres logiques (bordure)
Un cadre est souvent utilisé pour indiquer un élément de navigation actif. Dans l'exemple ci-dessus, un cadre est défini sur le côté gauche de chaque élément. Comment implémenter cela en utilisant des propriétés logiques?
.nav__item { border-inline-start: 3px solid transparent; } .nav__item.is-active { border-color: #1e9ada; }
Arrondi logique des coins (border-radius)
Dans l'image ci-dessus, l'arrière-plan de l'élément de navigation n'est arrondi que pour les coins supérieur droit et gauche. Cela peut être implémenté en utilisant des propriétés logiques:
.nav__item { border-start-end-radius: 30px; border-end-end-radius: 30px; background-color: transparent; } .nav__item.is-active { background-color: #ecf6fb; }
Propriétés logiques de la feuille de triche
En cas de doute sur le choix d'un analogue logique de la propriété qui définit le côté, vous pouvez jeter un œil dans la feuille de triche ci-dessous. Veuillez noter qu'il ne contient que les propriétés logiques qui peuvent être utiles lorsque vous travaillez avec les modes LTR et RTL. J'ai compilé cette feuille de triche basée sur un merveilleux
article d' Adrian Roselli.
https://codepen.io/shadeed/pen/2981e62691e67452d9f282a5351d7c79De plus, Adrian a créé une démo qui facilite la compréhension de la différence entre les propriétés logiques et directionnelles.
Prise en charge du navigateur
Le support du navigateur est assez bon pour les propriétés de remplissage, de marge et d'alignement du texte. Cependant, ce n'est toujours pas suffisant pour les propriétés border-radius. Vous trouverez ci-dessous un tableau de support du site
Puis-je utiliser :
Même si le support n'est pas encore parfait (et ne le sera jamais), je vous conseille de commencer à utiliser des propriétés logiques avec des solutions de repli dès maintenant. Par exemple
.input--search { padding-left: 1rem; padding-right: 2.5rem; padding-inline-start: 1rem; padding-inline-end: 2.5rem; }
En outre, vous pouvez utiliser le
plug- in
PostCSS Logical , qui ajoute une solution de secours pour chaque propriété logique utilisée.
Conventions de dénomination CSS
Évitez de donner aux classes CSS des noms attachés à leurs éléments. Utilisez des noms qui peuvent être extraits en composants réutilisables. Prenons l'exemple suivant:
<div class="c-section"> <p><a href="#" class="see-link">See more</a></p> </div> <div class="c-section"> <p><a href="#" class="see-link">Learn more</a></p> </div>
Les liens sont les mêmes dans les deux blocs, mais leurs noms sont différents. Dans le deuxième bloc, la classe see-link n'a pas de sens. Un bon nom pourrait être c-link. Le préfixe c– remplace les composants, j'ai adopté cette méthode à partir du cadre ITCSS.
Maintenant que vous comprenez l'idée, nous pouvons également l'appliquer au style RTL. L'exemple ci-dessous montre une section avec deux enfants
Au lieu de donner aux éléments des noms comme .c-page-header__left et .c-page-header__right, je les appelle .c-page-header__start et .c-page-header__end. Ceci est plus orienté vers l'avenir et n'implique pas que le site est créé uniquement en mode LTR ou RTL.
Outils d'automatisation
Il existe d'excellents outils pour faciliter le travail avec le balisage LTR et RTL.
1. Bi-App-Sass
Bi-App-Sass d' Anas Nakava vous permet d'écrire une version des styles qui se compile en deux feuilles de style différentes: une pour le balisage LRT et une pour le balisage RTL.
Cet outil peut être utile pour les grands projets. Par conséquent, il peut y avoir plusieurs feuilles de style pour chaque direction d'écriture.
Prenons l'exemple suivant: .elem { display: flex; @include margin-left(10px); @include border-right(2px solid #000); }
Le code CSS résultant peut être le suivant.Fichier App-ltr.css: .elem { display: flex; margin-left: 10px; border-right: 2px solid #000; }
Fichier App-rtl.css: .elem { display: flex; margin-right: 10px; border-left: 2px solid #000; }
Notez cependant que le dernier commit dans le référentiel sur GitHub remonte à quatre ans (novembre 2015).2. RTLCSS
RTLCSS par Mohamed Jonas est un cadre destiné à convertir les feuilles de style LTR dans RTL.La différence entre cet outil est qu'il s'applique à une version déjà assemblée du fichier CSS. Par exemple, si vous avez plus de 50 composants Sass dans votre projet, RTLCSS est utile pour analyser un fichier CSS compilé et créer une version RTL à partir de celui-ci.Exemples pratiques
En-tête du site
J'ai spécifiquement fait une mise en page pour montrer quelle approche j'utilise pour implémenter la version RTL du balisage.
Commençons par les composants de l'en-tête. Afin d'implémenter correctement cela dans le code, j'ai schématisé sa structure générale. Veuillez noter que j'ai divisé l'en-tête dans la section principale et la sous-section. Ajout de classes de début et de fin pour les éléments enfants.
.header__main, .header__sub { display: flex; justify-content: space-between; }
Étant donné que le fonctionnement de CSS Flexbox prend en compte la direction spécifiée sur la page, comme expliqué précédemment dans ce guide, il se développera automatiquement lorsque le balisage RTL est utilisé.
Le point suivant est la ligne de démarcation entre le logo et la navigation. Au début, j'ai pensé à utiliser border-right. Cela fonctionne, mais pas parfait. Il est préférable d'utiliser un pseudo-élément, car il se déroulera après la direction de la page.
.c-brand:after { content: ""; display: inline-block; vertical-align: middle; width: 3px; height: 38px; border-radius: 5px; background: #e4e4e4; margin-inline-start: 1.25rem; }
Voici le résultat actuel:
Ensuite, je vais travailler avec le composant de section (celui qui est dans la sous-section d'en-tête et contient les noms et les compteurs). Vous trouverez ci-dessous une présentation de l'apparence de ce composant dans LTR.
À première vue, cela peut sembler simple, mais cela nécessite en fait de spécifier plusieurs propriétés de remplissage et de marge. Voici un schéma illustrant cela:
.topics-heading { margin-inline-end: 1.5rem; } .topics-list { margin-inline-end: 1rem; } .c-topic { padding-inline-start: 0.5rem; } .c-topic:not(:last-child) { margin-inline-end: 10px; } .c-topic__counter { margin-inline-start: 1rem; }
Comme vous pouvez le voir, j'utilise des propriétés booléennes CSS au lieu des valeurs gauche et droite.La prochaine étape est le lien «Tout voir». Faites attention à la flèche à la fin. Elle devrait avoir le comportement suivant:- En vol stationnaire, la couleur de la flèche doit changer
- En survol, l'animation doit être appliquée à la flèche
J'ai décidé d'utiliser le SVG intégré pour cette tâche. Lorsque j'ai mis la flèche à traduire, j'ai pensé à RTL. Il n'y a pas de propriétés logiques adaptées à cette situation et je dois envisager une autre solution. L'option avec une marge variable est apparue. .c-link svg { margin-inline-start: 4px; transition: 0.15s ease-in; } .c-link:hover svg { margin-inline-start: 8px; }
Bien que l'animation des marges n'affecte pas très bien les performances, cela fonctionne toujours. Une autre solution consiste à déterminer la direction de la page et à indiquer, sur cette base, la direction correspondante pour le décalage .c-link:hover svg { transform: translateX(6px); } .c-header[dir="rtl"] .c-link svg { transform: scaleX(-1); } .c-header[dir="rtl"] .c-link:hover svg { transform: scaleX(-1) translateX(6px); }
Notez que pour la direction de la page RTL, j'ai ajouté scaleX (-1) pour développer l'icône horizontalement. Vous pouvez également utiliser la rotation (180 degrés), mais l'option de mise à l'échelle me semble plus simple.
Vient ensuite le champ de recherche. Les exigences sont les suivantes:- L'icône de recherche doit apparaître à la fin du champ.
- L'emplacement de l'icône de recherche doit être dynamique
.c-input--search { background-image: url("data:image/svg+xml..."); background-position: right 6px center; } .c-header[dir="rtl"] .c-input--search { background-image: url("data:image/svg+xml..."); background-position: right 6px center; }
En outre, lorsque l'utilisateur tape le texte dans ce champ, le texte ne doit pas chevaucher l'icône. Pour éviter cela, ajoutez un rembourrage des deux côtés du champ.
Le résultat est le balisage suivant pour les modes LTR et RTL:
Le suivant est le menu mobile. Pour le désigner, j'utiliserai une icône de hamburger. L'emplacement de l'icône changera en fonction de la direction (LTR ou RTL). Il en va de même pour la direction de l'animation de déplacement.
Vous pouvez voir la démo sur CodePenGratitude
Un merci spécial à ma femme Kholoud pour son soutien continu et la lecture multiple du manuel. Merci également à Adebiyi Adedotun Lukman et Šime Vidas pour leurs retours incroyables.