PapyJP a écrit :
même si cette situation a l'air tellement simple qu'elle devrait être traitable en pur CSS.
Bonjour,
J'ai des doutes à ce propos. Même si le Css permet au conteneur de s'adapter au contenu, il ne permet pas, à ma connaissance, d'être aussi précis. En effet, les conteneurs s'adaptent bêtement en s'ajustant sur la place occupée par le contenu mais sans tenir compte réellement de l'encombrement de ceux-ci. Il paraît impossible de pouvoir définir des points de rupture qui permettraient de modifier le comportement des conteneurs en fonction de la taille métrique de leur contenu.
On peut modifier l'adaptation d'un texte en fonction de la zone d'affichage par exemple qui elle a des valeurs calculées par le navigateur et prises en compte avant la phase de
painting.
Au contraire,l'encombrement d'une phrase n'est pas calculée avant affichage donc on ne peut agir sur le comportement de son conteneur.
A titre d'exemple : A l'affichage de ma page, le moteur de rendu sait pertinemment que la zone d'affichage est de 100vw x 100 vh. Il est capable de m'indiquer cette taille au pixel près et ce avant même d'avoir chargé du Css.
Au moment où le navigateur charge le Css, le html est déjà chargé et les éléments sont affichés les uns à la suite des autres sans réel calcul mais en répondant tout de même aux propriétés primaires qui lui ont été inculquées.
Lorsque le Css est appliqué, les propriétés sont apposées une à une aux éléments : taille de police, modèles de boites etc etc Quand celui-ci en arrive aux propriétés concernant les tailles de boite, il n'a aucun moyen de calculer la taille finale du contenu pour la prendre en considération dans la taille du conteneur. Les dimensions ne seront connues qu'après coup soit après l'application complète du Css.
A mon sens, la problématique n'est pas solvable par le Css uniquement.
Je ne vois que 2 possibilités, chacune avec leurs avantages et leurs inconvénients.
[1] Par l'utilisation d'un langage client. C'est la méthode que vous utilisez actuellement. Soit appliqué en surcouche un programme JS qui calculera après coup la taille du contenu et fera opérer l'ajustement du conteneur.
L'avantage est la précision que cette méthode offre car l'espace occupé par le texte est calculé sur le rendu final.
L'inconvénient est qu'il fasse intervenir un code côté client qui ajoute une exécution supplémentaire sur la page et donc augmente le temps d'exécution du code, charge un peu plus le CPU et tout ce qui va avec.
[2] Par l'utilisation d'un langage serveur. On peut imaginer calculer le nombre de caractère en amont et apposer une classe Css qui dépendra de celui-ci.
L'avantage : Annihiler les inconvénients de la méthode [1].
Inconvénient : Nous perdons la précision implacable de la méthode [1] si tant est qu'elle puisse être indispensable.
Perso j'aurais plutôt tendance à opter pour cette méthode ; vous connaissez mes affinités avec JS. Mais cette méthode oblige à considérer alors qu'un caractère est égal à 1 rem (même si en pratique ce n'est pas tout à fait vrai dans la mesure où "O" est plus large que "i" à moins d'utiliser une police monospace). Or si dans votre Css, le contenu est défini à une valeur différente, ça peut vite devenir impossible à maintenir et galère à faire évoluer.
Qu'en pensez-vous ?
Modifié par Greg_Lumiere (04 May 2017 - 10:22)
