Dans le cadre de mes études je dois réaliser un site internet dans lequel un texte (variable) serait amener à s’adapter automatiquement au contour extérieur, d’un hexadécimal (je m’explique, l?hexadécimal serait fixe mais pas le texte qui lui arriverait dynamiquement avec javascript sur l’extérieur de l?hexadécimal et devrait donc s’adapter à son contour) .
J’ai entendu dire que c’était possible avec un cumul de css et de javascript, pourriez vous m’aider , ou en avez vous entendu parler ?
Je ne vois pas trop comment faire sinon à part avec des margin, padding etc … seulement ça va pour un seul texte, pas plusieurs à arrivé variable :S
J’ai du mal à saisir ton besoin ?
En gros, pour résumer, tu as un paragraphe contenant un texte de taille variable et tu ne sais pas quelle taille (dépendant du reste du layout, à priori fixe) lui donner ?
Si c’est ce que ping.yang te montre, ça se fait avec du SVG (text + text along path) maintenant, j’ai plutôt l’impression à ta demande, que tu veux juste faire ce qu’on peut ou pouvait faire dans Word à une époque, ie: placer une image et définir les points où le texte pouvait passer (et si tu faisais un hexagone, le texte suivait ce contour).
Je ne crois effectivement que ce ne soit pas possible en CSS simplement. Tu dois peut-être t’en sortir en faisant toi même le dessin avec la balise : developer.mozilla.org…
En gros, tu as les moyens de dessiner ton texte, et de faire un intersect avec ta forme géométrique (ton hexagone), et afficher le texte par bloc (en séparant par chaque blanc) :
Je pense que c’est possible en javascript, plus qu’en CSS. Après, si c’est réellement possible sans passer par canvas (tu verras, c’est génial de dessiner toi même le texte, tu vas vite ne plus vouloir le faire ;)), ça m’intéresse bien que tu laisses la solution ici si tu la trouves.
En fait ce que tu veut, c’est couper un texte qui s’adapte autour d’une forme c’est assez simple. A la base il faut donc découper le texte par le nombre de face de l’objet ainsi que la longueur de chaque face, et de récupérer l’angle de chaque face pour l’appliquer au texte.
Par exemple pour un carré de face de 200 pixels, il faudra couper le texte en 4 de 200 pixels à chaque fois, et l’orienter de +90 degré sur chaque face.
Après du css pas forcément besoins, tout peut être faire en javascript. Pour forcément que le javascript fera du css par contre.
