Share
Dans cette astuce, je vais vous montrer comment afficher du texte sur une page Web de haut en bas, au lieu de gauche à droite (ou de droite à gauche). Il y a deux approches, l'une étant meilleure que l'autre, alors jetons un coup d'œil et jetons un coup d'œil!
Si vous connaissez CSS, vous pourriez instinctivement penser que transformer serait la meilleure façon d’aborder ce problème, mais laissez-moi vous montrer pourquoi ce n’est pas idéal. Nous allons commencer avec un contenu (quelques titres et un paragraphe), puis nous appliquerons un transformer, avec un transformer-origine de sorte qu'il tourne à partir du bon point, puis un décalage pour le garder à l'écran:
Cette approche fonctionne en termes de rotation du texte, mais le flux de documents n'est pas affecté, de sorte que h2 dans notre cas se trouve maintenant sur le contenu en dessous. Pourtant, cela nous donne un résultat abstrait assez cool.
Notre seconde approche gardera le flux de documents de manière à ce qu’il reste fidèle aux dimensions de la h2, quelle que soit la direction du texte. Nous allons utiliser la propriété write-mode, comme ceci:
h2 mode d'écriture: vertical-rl;
Dans ce cas, nous lui avons donné une valeur de vertical-rl, qui applique une direction d'affichage de la verticale et une direction du texte de droite à gauche. Regarde:
Beaucoup mieux. Vous remarquerez également que le curseur change aussi, ce qui ne se produit pas avec la transformation CSS.
Vous avez peut-être remarqué que nous avons utilisé une valeur de rl (de droite à gauche) alors que nous sommes habitués à lire les caractères latins de gauche à droite. Mais c’est parce que nous avons changé le Direction d'écoulement en bloc. si nous donnons notre h2 une valeur de hauteur définie, vous verrez le texte se dérouler et vous vous rendrez compte que dans ce cas, nous avons besoin des lignes à lire de la droite de la page à gauche:
Cela nous oblige à définir quels bits de tout cet alignement doivent circuler et dans quelles directions. Les scripts basés en latin défilent de haut en bas (c’est le Direction d'écoulement en bloc). Leur texte se lit de gauche à droite (c’est le Direction d'écoulement en ligne). Et leurs personnages ont une ligne de base en bas tout en pointant vers le haut (c’est le Direction du personnage). Comme ça:
D'autres scripts, tels que l'arabe, le Han (comme le chinois et le japonais) et le mongol, peuvent afficher du texte en utilisant ces trois flux dans n'importe quelle combinaison de directions..
La spécification Mode d'écriture a été conçue pour prendre en charge tous les scripts et systèmes d'écriture du monde. Nous avons mentionné les systèmes basés sur la Mongolie, par exemple, tous les systèmes sont affichés verticalement, mais les flux sont orientés de gauche à droite..
Les autres valeurs en mode écriture, que vous pouvez utiliser aujourd'hui, incluent:
Accentsconagua
vertical-lr où le texte est vertical mais commence à la gauche du conteneur et tourne à droite.horizontale-tb où le texte reste horizontal, mais coule de haut en bas. Ceci (vous l'aurez remarqué) est un comportement par défaut.Voici encore une chose à regarder: un poème chinois, en utilisant vertical-rl mode d'écriture. Son contenu est flottant à droite, de sorte que vous commencez à droite de la page et lisez à gauche. Mais vous remarquerez peut-être que les personnages sont toujours orientés debout. Les caractères latins seraient orientés différemment avec ces mêmes règles. C'est délibéré:
"La norme Unicode attribue une propriété à chaque caractère et les navigateurs peuvent l'utiliser pour déterminer l'orientation par défaut d'un caractère donné." - W3C
Vous pouvez personnaliser l’orientation des caractères à l’aide des touches orientation de texte propriété.
Le mode d’écriture CSS bénéficie d’une excellente prise en charge du navigateur au moment de la rédaction, même si certains aspects sont encore en développement. Tout ce que vous me voyez faire dans ce tutoriel peut être utilisé en production dès maintenant.
Que ce soit pour des résultats pratiques ou esthétiques, voyons ce que vous avez fait dans les commentaires.!
