Il arrive dans certains cas, comme moi ce matin, où l’on veuille écrire un texte vertical pour les besoins d’un site internet ou une application web. Il n’y a pas de solution miracle mais après quelques recherches, voici les solutions que j’ai trouvé.
Solution 1 : Utiliser le tag <br>
La plus simple solution, mais qui n’est en aucun cas pratique ni recommandable, à utiliser uniquement en cas de force majeur en attendant d’adapter une autre solution.
<h1> D <br>O <br>O <br> T<br >E<br> C<br>H </h1>
Solution 2 : Utiliser Javascript
Il s’agit de décomposer le texte lettre par lettre et de l’entourer par une span à la quelle on applique un style CSS pour l’afficher en tant que « block »
<!DOCTYPE html>
<html>
<head>
<title>Texte vertical</title>
<style>
h1 span { display: block; }
</style>
</head>
<body>
<h1> DOOTECH </h1>
<script>
var h1 = document.getElementsByTagName('h1')[0];
h1.innerHTML = '<span>' + h1.innerHTML.split('').join('</span><span>') + '</span>';
</script>
</body>
</html>
Solution 3 : Utiliser Em dans le CSS
Dans ce cas précis, on « joue » avec le CSS en affectant une petite largeur (1em) à la balise h1 et en forçant le texte à retourner à la ligne avec letter-spacing: 50px; Il faut aussi ajouter un espace entre chaque lettre (on peut le faire avec javascript).
<!DOCTYPE html>
<html>
<head>
<title>Texte vertical</title>
<style>
h1 { width: 1em; letter-spacing: 50px; font-size: 45px; }
h2 { width: 1em; letter-spacing: 50px; font-size: 45px; }
</style>
</head>
<body>
<h1> D O O T E C H </h1>
<h2> DOOTECH </h2>
<script>
var h2 = document.getElementsByTagName('h2')[0];
h2.innerHTML = h2.innerHTML.split('').join(' ');
</script>
</body>
</html>