Defilement texte dans un trapeze
Fermémont_dani Messages postés 229 Date d'inscription mardi 6 juin 2017 Statut Membre Dernière intervention 10 février 2024 - 17 juil. 2022 à 19:53
- Defilement texte dans un trapeze
- Mettre un texte en majuscule - Guide
- Comment retranscrire un entretien audio en texte - Guide
- Retrouver un texte caché dans une image ✓ - Forum Graphisme
- Excel cellule couleur si condition texte - Guide
- Barre de défilement - Guide
2 réponses
Salut,
le plus simple est probablement d'adapter la hauteur à la taille du texte.
Je ne pense pas que JavaScript ou la programmation soit essentiel ici, il suffit de changer la hauteur de 500px par quelque chose qui prends en compte la taille du texte, "em" par exemple:
https://www.codeur.com/tuto/css/unite-de-mesure-taille-px-em-rem/
Ce qui peut se faire par la programmation c'est éventuellement de calculer la hauteur de chaque page pour adapter la taille de police et le nombre de lignes(donc nombres d'em) mais comme ce n'est pas précisé ici cela ne me semble pas utile.
A noter que ce genre de mise en page ne sont pas évidentes ni facilement lisibles.
Si vous voulez quelque chose de joli et facilement adaptable il est plus commun de jouer sur les marges même si cela devient un peu plus un travail d’orfèvre:
première ligne: on décale la marge à gauche et à droite pour indiquer la pointe,
seconde ligne on décale un peu moins les marges pour élargir la pyramide(ou la forme que l'on veut du texte), etc...
Un truc du genre:
<p style="margin:0 3em;width:100%;">1ere ligne</p> <p style="margin:0 2.5em;width:100%;">2nd ligne</p> <p style="margin:0 2em;width:100%;">3eme ligne</p> ...
Aussi possibilité d'utiliser du SVG incluant un texte pour avoir d'autres possibilités de textes
https://developer.mozilla.org/fr/docs/Web/SVG/Element/text
Ou même avec CANVAS(dessin en 2D via la balise CANVAS) avec des pochoirs et/ou le même travail de décalage ligne par ligne.
Ces deux dernières solutions ont l’inconvénient de ne plus avoir un texte accessible car il devient une image.
L'inconvénient d'avoir un texte dans une forme un peu biscornu outre la complexité à le faire c'est la perte de lisibilité et la difficulté voire impossibilité à adapter, donc c'est à éviter dans la plupart des cas(je parle d'un paragraphe entier de texte et non d'une phrase ou d'un titre ou des lettrines ou une combinaison avec une image de fond feront le boulot sans trop s'embêter).
ps: laissez tomber le DOCTYPE strict, utilisez le DOCTYPE HTML5 beaucoup plus simple à écrire, permissif et adapté aux normes actuelles(le doctype strict date d'avant les années 2000, le transitional le début 2000 et était transitoire):
https://tutowebdesign.com/doctype-html5.php
17 juil. 2022 à 19:53
Merci pour toutes tes options.
il me semble que CANVAS peut etre une bonne option.
J'ai donc préparé un canvas qui s'affiche bien.
le problème est lorsque je veux mettre la hauteur a hauteur de pantalla.
J'ai essayer 100% mais sans résultat masi si met la valeur en pixel ca fonctionne
Voici le code
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style>
#c1{
background-color: yellow;
}
</style>
</head>
<body>
<script> alert("La resolución de pantalla que tienes en este momento es de: " + screen.width + " x " + screen.height) </script>
<canvas id="c1" width="
<script type="text/javascript">
var largeur = screen.width;
document.write(largeur);
</script>" //si je met ici la largeur en pixel c est ok
height="
<script type="text/javascript">
var hauteur = screen.height;
document.write(hauteur);
</script>"//si je met ici la hauteur en pixel c est ok
></canvas>
<script>
var ht = screen.height;
var lg = screen.width;
let canvas = document.getElementById('c1');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0, 0); //en haut a gauche gauche / haut
ctx.lineTo(0, ht);//en bas a droite gauche / haut
ctx.lineTo(125, ht); //en bas a droite gauche / haut
ctx.fillStyle = '#d916a2'; //violet
ctx.fill();
canvas.width = canvas.parentNode.offsetWidth;
canvas.height = canvas.parentNode.offsetHeight;
</script>
</body>
</html>
Ou est mon erreur et quelle est-elle?
