Share
Plus tôt ce matin, je devais créer du texte vertical pour un projet sur lequel je travaillais. Après avoir essayé quelques idées, je suis allé sur Twitter pour connaître le type de réflexions de nos partisans sur le sujet. Il y a eu beaucoup de bonnes réponses et idées que nous allons aborder aujourd'hui!
* Remarque - veuillez vous référer à la "Méthode 6" ci-dessous pour plus de détails sur l'utilisation correcte.Abonnez-vous à notre page YouTube pour voir tous les tutoriels vidéo!
Préfère regarder cette vidéo sur Screenr?
Accentsconagua
Ainsi, un moyen possible (bien que non recommandé) d’obtenir un texte vertical consiste à ajouter
N
E
T
T
U
T
S
Ne pas utiliser cette méthode. C'est boiteux et bâclé.
Avec cette méthode, nous enveloppons chaque lettre dans une plage, puis définissons sa afficher à bloc au sein de notre CSS.
Texte vertical N E T T U T S
Le problème avec cette solution - mis à part cette augmentation inquiétante - est qu’il s’agit d’un processus manuel. Si le texte est généré dynamiquement à partir d'un système de gestion de contenu, vous n'avez aucune chance. Ne pas utiliser cette méthode.
Mon instinct initial était d’ajouter dynamiquement le envergure balises avec JavaScript. De cette façon, nous contournons les problèmes mentionnés dans la méthode deux.
JS Bin NETTUTS
Cette méthode est définitivement une amélioration. Ci-dessus, nous Divisé le texte dans un tableau, puis envelopper chaque lettre dans un envergure. Bien que nous puissions utiliser quelque chose comme un pour déclaration, ou $ .map Pour filtrer le tableau, une solution bien meilleure et plus rapide consiste à joindre et à enrouler manuellement le texte en même temps..
Bien que mieux, cette solution n'est pas recommandée.
Sortons de JavaScript si nous le pouvons. Que se passe-t-il si nous appliquons une largeur à l'élément conteneur et forçons le texte à être renvoyé à la ligne? Ça pourrait marcher.
JS Bin NETTUTS
Dans ce scénario, nous appliquons une largeur très étroite à la h1 tag, puis faire son taille de police égal à cette valeur exacte. Enfin, en mettant mot enveloppé égal à mot de rupture, nous pouvons forcer chaque lettre sur sa propre ligne. toutefois, word-wrap: mot de rupture fait partie de la spécification CSS3 et n'est pas compatible avec tous les navigateurs.
En excluant les anciens navigateurs, cela résout apparemment notre problème… mais pas entièrement. La démo ci-dessus semble fonctionner, mais il est trop risqué de jouer avec les valeurs en pixels. Essayons quelque chose d'aussi simple que de transformer les majuscules en minuscules.
Beurk avec cette méthode, nous devons faire très attention aux valeurs spécifiques que nous définissons. Non recommandé.
l'espacement des lettres Par précaution et pour étendre la méthode quatre, pourquoi ne pas appliquer assez grand l'espacement des lettres pour contourner ce problème?
JS Bin Nettuts
Cela semble résoudre le problème, mais, encore une fois, nous utilisons un peu de CSS3 ici.
ems Alternativement, il existe une solution one-liner. Rappelez-vous quand nous avons appris que l'application débordement caché à un élément parent le ferait-il miraculeusement contenir ses flottants? Cette méthode est un peu comme ça! La clé est d'utiliser ems et placez un espace entre chaque lettre.
JS Bin N t t u t s
Plutôt chouette, non? Et, de cette façon, vous pouvez appliquer la taille de police de votre choix. Parce que nous utilisons ems - qui est égal à la hauteur x de la police choisie - nous avons alors beaucoup plus de flexibilité.
Mais, encore une fois, parfois plus d’une lettre finit sur une ligne. Vous devez être en sécurité; Voilà pourquoi j'ai appliqué arbitrairement grand l'espacement des lettres pour s'assurer qu'il n'y a jamais plus d'une lettre sur une ligne.
À ma connaissance, il s'agit de la meilleure solution compatible avec la plupart des navigateurs.
Espace blanc Un dernier moyen pour obtenir cet effet est de tirer parti de la espace blanc propriété.
J E F F R E Y
En mettant espace blanc à pré, qui ordonne au texte de se comporter comme s'il était dans un pré étiquette. En tant que tel, il respecte l'espacement que vous avez ajouté..
Ne devrait-il pas y avoir une règle CSS3 pour accomplir cette tâche? Et si je pouvais définir quelque chose comme: affichage de la police: block-letter; qui ordonnerait à chaque lettre d'être rendue sous forme de bloc?
Qu'est-ce que tu penses? Avez-vous d'autres alternatives que nous devrions envisager? Beaucoup de gens ont suggéré d'utiliser la rotation de texte pour accomplir la tâche, mais il est important de se rappeler que cela fait aussi pivoter le texte de 90 degrés, ce qui n'est pas ce que nous essayons de faire..
