Testeur de Modes d'Écriture
Testez le rendu du texte avec différents modes d'écriture, directions et orientations de texte CSS. Choisissez parmi horizontal-tb, vertical-rl et vertical-lr, basculez entre les directions LTR et RTL, et définissez l'orientation du texte pour les mises en page verticales. Saisissez votre propre texte ou utilisez un exemple, ajustez la taille de police et consultez un aperçu en direct avec une sortie CSS copiable. Totalement privé, 100% gratuit et sans inscription.
Test how text renders in different CSS writing modes, directions, and text orientations. Preview horizontal, vertical-RTL, and vertical-LTR layouts with custom text and font sizes.
Preview
.writing-mode-demo {
writing-mode: horizontal-tb;
direction: ltr;
font-size: 18px;
}Pourquoi utiliser notre testeur de modes d'écriture ?
- Testez tous les modes d'écriture côte à côte : comparez instantanément les modes d'écriture CSS horizontal-tb, vertical-rl et vertical-lr. La vue comparative affiche les trois modes simultanément, vous voyez donc exactement le rendu de votre texte dans chaque mise en page sans basculer sans cesse.
- Prise en charge des directions LTR et RTL : testez le texte en direction de gauche à droite (LTR) et de droite à gauche (RTL). Basculez entre les directions d'un simple clic pour voir comment votre contenu s'écoule pour différents publics linguistiques, y compris les scripts arabe, hébreu et persan.
- Traitement 100% privé dans le navigateur : tous les aperçus de modes d'écriture sont rendus entièrement dans votre navigateur en CSS natif. Votre texte n'est jamais envoyé à un serveur, jamais stocké et jamais transmis où que ce soit. Votre contenu reste totalement privé.
- Gratuit à vie, sans inscription : testez un nombre illimité de combinaisons de modes d'écriture sans frais. Pas de niveau premium, pas de limite d'utilisation, pas de frais cachés. Utilisez le testeur de modes d'écriture pour des projets personnels ou commerciaux sans créer de compte.
Cas d'usage courants du testeur de modes d'écriture
- Conception de sites web multilingues : concevez des mises en page compatibles avec les systèmes d'écriture horizontaux et verticaux. Testez le rendu de votre contenu japonais, chinois ou coréen en mode vertical-rl à côté de votre contenu anglais en mode horizontal-tb pour des designs web réellement internationaux.
- Développement de mises en page RTL : développez et testez des interfaces de droite à gauche (RTL) pour les sites en arabe et en hébreu. Basculez rapidement entre les directions LTR et RTL pour vérifier que votre mise en page reflète correctement la navigation, l'alignement du texte et l'ordre de lecture.
- Tests de composants d'interface pour le texte vertical : testez l'apparence de composants d'interface comme les boutons, étiquettes, menus de navigation et titres de barres latérales lorsqu'ils sont rendus avec des modes d'écriture verticaux. Assurez un espacement, un alignement et une lisibilité corrects avant le déploiement en production.
- Édition numérique et livres électroniques : prévisualisez le rendu des publications numériques et des livres électroniques dans des modes d'écriture verticaux. Testez un contenu multi-scripts mêlant japonais, chinois et anglais pour garantir une orientation du texte et un flux de lecture corrects selon les mises en page.
- Recherche et éducation typographiques : apprenez et enseignez les différences entre les modes d'écriture, les orientations de texte et les valeurs de direction CSS. Consultez des exemples visuels en temps réel de l'effet de chaque propriété sur la mise en page du texte, ce qui en fait un outil idéal pour l'enseignement du CSS et les ateliers de typographie.
- Génération de code CSS pour la production : générez des extraits CSS propres et prêts pour la production pour vos implémentations de modes d'écriture. Une fois la combinaison parfaite trouvée, copiez les propriétés CSS directement dans vos feuilles de style d'un simple clic.
Que sont les modes d'écriture CSS ?
Les modes d'écriture CSS définissent la direction dans laquelle le texte s'écoule sur une page web. La propriété CSS writing-mode contrôle si le texte s'écoule horizontalement (de gauche à droite) ou verticalement (de haut en bas). Combinés aux propriétés direction et text-orientation, les modes d'écriture permettent une prise en charge complète des divers systèmes d'écriture du monde - de l'anglais et de l'arabe au japonais et au mongol - au sein d'une même mise en page web.
Comment fonctionne notre testeur de modes d'écriture
- Sélectionnez un mode d'écriture : choisissez parmi les trois valeurs CSS de writing-mode - horizontal-tb (mise en page horizontale par défaut), vertical-rl (vertical de droite à gauche, traditionnel est-asiatique) ou vertical-lr (vertical de gauche à droite, écriture moderne ou mongole).
- Configurez la direction et l'orientation : définissez la direction du texte sur LTR ou RTL et, pour les modes verticaux, choisissez l'orientation du texte - mixed (par défaut), upright (tous les caractères restent verticaux) ou sideways (tous les caractères pivotés).
- Prévisualisez et copiez : saisissez votre propre texte ou utilisez un exemple, ajustez la taille de police et consultez l'aperçu en direct. Le bloc de sortie CSS affiche l'ensemble complet des propriétés prêt à être copié dans vos feuilles de style.
Propriétés CSS clés expliquées
- writing-mode : la propriété principale qui définit la direction du flux de blocs. horizontal-tb est la valeur par défaut pour la plupart des langues. vertical-rl fait s'écouler le texte de haut en bas avec des lignes de droite à gauche. vertical-lr le fait s'écouler de haut en bas avec des lignes de gauche à droite.
- direction : contrôle la direction de base en ligne (ltr ou rtl). En modes verticaux, direction affecte l'ordre des lignes plutôt que celui des caractères. Essentiel pour la prise en charge de l'arabe et de l'hébreu.
- text-orientation : ne s'applique qu'aux modes d'écriture verticaux. mixed (par défaut) fait pivoter de 90° les caractères latins et cyrilliques tout en gardant les caractères CJK debout. upright maintient tous les caractères dans leur orientation normale. sideways fait pivoter tous les caractères de 90°.
Confidentialité, sécurité et disponibilité
Tous les aperçus de modes d'écriture sont rendus entièrement dans votre navigateur en CSS natif. Votre texte ne quitte jamais votre appareil : il n'est envoyé à aucun serveur, ni stocké, ni transmis. Le testeur de modes d'écriture est entièrement gratuit, sans inscription, sans limite d'utilisation et sans fonctionnalités premium. Testez un nombre illimité de combinaisons de modes d'écriture pour des projets personnels ou commerciaux.
Foire aux questions
Un testeur de modes d'écriture CSS est un outil basé sur le navigateur qui vous permet de prévisualiser le rendu du texte avec différents modes d'écriture, directions et orientations de texte CSS. Notre testeur de modes d'écriture prend en charge les trois valeurs de writing-mode (horizontal-tb, vertical-rl, vertical-lr), la direction LTR et RTL, et les valeurs de text-orientation (mixed, upright, sideways) avec aperçu en direct et sortie CSS copiable.
Sélectionnez un mode d'écriture parmi les trois options (horizontal-tb, vertical-rl, vertical-lr), choisissez une direction (LTR ou RTL) et, pour les modes verticaux, sélectionnez une orientation de texte (mixed, upright, sideways). Saisissez votre propre texte ou cliquez sur un bouton d'exemple, ajustez la taille de police et l'aperçu en direct se met à jour instantanément. Activez la Vue comparative pour voir les trois modes côte à côte.
Le japonais traditionnel, le chinois (traditionnel) et le coréen sont les principales langues qui utilisent des modes d'écriture verticaux (vertical-rl). En mise en page verticale, le texte s'écoule de haut en bas et les lignes avancent de droite à gauche. La typographie est-asiatique moderne mélange souvent écriture horizontale et verticale, et les modes d'écriture CSS gèrent les deux sans problème avec un seul changement de propriété.
Oui. Tous les aperçus de modes d'écriture sont rendus entièrement dans votre navigateur en CSS natif. Votre texte n'est jamais téléchargé sur un serveur, jamais stocké et jamais transmis. Le testeur de modes d'écriture traite tout localement sur votre appareil pour une confidentialité et une sécurité des données totales.
text-orientation: mixed (valeur par défaut) fait pivoter de 90° dans le sens horaire les caractères latins et cyrilliques tout en gardant les caractères CJK debout dans leur orientation de lecture normale. text-orientation: upright force tous les caractères à s'afficher dans leur orientation verticale normale sans rotation, ce qui peut rendre le texte latin plus difficile à lire mais préserve l'aspect naturel des caractères CJK.
Oui. La sortie CSS utilise des propriétés standard et bien prises en charge : writing-mode, direction et text-orientation. Tous les navigateurs modernes prennent en charge ces propriétés. Copiez simplement l'extrait CSS ou le style en ligne et collez-le directement dans vos feuilles de style pour une utilisation immédiate en production.
Oui. Le Testeur de Modes d'Écriture est 100% gratuit, sans inscription, sans fonctionnalités premium et sans limite d'utilisation. Testez un nombre illimité de combinaisons de modes d'écriture sans restriction ni frais cachés. Aucune publicité ne bloque l'interface.
La Vue comparative affiche les trois modes d'écriture - horizontal-tb, vertical-rl et vertical-lr - dans une mise en page à trois colonnes. Chaque colonne montre le libellé de la propriété CSS et une description du mode. Il est ainsi facile de comparer le rendu du même texte dans chaque mise en page, ce qui vous aide à choisir le meilleur mode d'écriture pour votre contenu.