Knacss et taille de font adaptable

Question

flipflip

1 Jul 2020 à 13:55

Bonjour à tous,

J'ai ce code :

<div class="grid-1 padding-1 margin-bottom-1 align-center bggrey-1">
  <h2 class="h6-like txtgrey2 u-uppercase txtcenter u-txt-ellipsis">
    <strong>Un titre un peu long dont il faudrait que la taille s'adapte</strong>
  </h2>
</div>

Mon problème est qu'il déborde du div, normal vous me direz puisque j'ai utilisé la class u-txt-ellipsis qui ajoute un nowrap. Je l'ai fais volontairement car je ne veux pas que mon texte passe sur deux lignes. Je souhaite que le contenue de h2 s'adapte à l'espace disponible.

Est-ce faisable ?

Knacss v7.1.3
Modifié par flipflip (01 Jul 2020 - 13:56)

Yordi

Modérateur

1 Jul 2020 à 14:16

Hello,
Le plugin le plus connu (il me semble est) est FitText Smiley smile

Raphael

Administrateur

1 Jul 2020 à 14:26

Hello,

Si FitText ne te convient pas et/ou si tu ne veux pas avoir recours à JS pour cela, il existe peut-être une alternative en CSS : l'unité de taille "vw".

En exprimant ta taille de police en vw, elle sera relative à la taille de la fenêtre du navigateur :


h2 {
  font-size: 4vw;

Je ne dis pas que c'est la meilleure solution, mais elle vaut le coup d'être testée.

Si elle te convient, je te donne tout de suite une variante bien plus "accessible" sur petits écrans puisqu'elle impose une taille minimale (ici de 1em) :


h2 {
  font-size: calc(1em + 4vw);

Bonne journée Smiley smile

flipflip

1 Jul 2020 à 14:28

Merci Yordi, je vais tester même si l'idée d'ajouter "encore" du jquery n'était pas ma priorité.

En attendant j'ai trouvé ça https://css-tricks.com/simplified-fluid-typography/ et je trouve étonnant que cela ne soit pas intégré, enfin les viewports unit, dans knacss.

flipflip

1 Jul 2020 à 14:40

Merci Raphaël, nos réponses se sont croisées.

Je pense que je vais étudier ta piste.

flipflip

1 Jul 2020 à 15:28

Après implantation sa donne ça :

.h6-like {
  font-size: min(max(1.4rem, 1vw), 1.6rem);
}

Cela règle partiellement mon problème car j'ai toujours mon texte qui passe sur 2 lignes mais je pense que c'est un problème de conception de ma grille.

voilà le code :


<section>
  <div class="grid-4-small-1">
    <article class="grid-1 border" id="post-92">
      <div class="grid-1">
        <div class="grid-1 padding-1 margin-bottom-1 align-center bggrey-1"><h2 class="h6-like txtgrey2 u-uppercase txtcenter"><strong>titre 1 ligne</strong></h2></div>
        <div class="margin-bottom-1 center"><img src="une image de 345px de haut" alt="" title=""></div>
        <div class="large-visible medium-hidden small-hidden tiny-hidden has-gutter">
          <div class="autogrid has-gutter margin-bottom-1">
            <div class="bggrey-1 txtcenter padding-1"><a class="txtgrey2" href="#" title="Voir plus de photos">Photos</a></div>
          </div>
        </div>
      </div>
    </article>
    <article class="grid-1 border" id="post-93">
      <div class="grid-1">
        <div class="grid-1 padding-1 margin-bottom-1 align-center bggrey-1"><h2 class="h6-like txtgrey2 u-uppercase txtcenter"><strong>Un titre un peu long sur 2 lignes et c'est la galère</strong></h2></div>
        <div class="margin-bottom-1 center"><img src="une image de 345px de haut" alt="" title=""></div>
        <div class="large-visible medium-hidden small-hidden tiny-hidden has-gutter">
          <div class="autogrid has-gutter margin-bottom-1">
            <div class="bggrey-1 txtcenter padding-1"><a class="txtgrey2" href="#" title="Voir plus de photos">Photos</a></div>
          </div>
        </div>
      </div>
    </article>
    <article class="grid-1 border" id="post-94">
      <div class="grid-1">
        <div class="grid-1 padding-1 margin-bottom-1 align-center bggrey-1"><h2 class="h6-like txtgrey2 u-uppercase txtcenter"><strong>titre 1 ligne</strong></h2></div>
        <div class="margin-bottom-1 center"><img src="une image de 345px de haut" alt="" title=""></div>
        <div class="large-visible medium-hidden small-hidden tiny-hidden has-gutter">
          <div class="autogrid has-gutter margin-bottom-1">
            <div class="bggrey-1 txtcenter padding-1"><a class="txtgrey2" href="#" title="Voir plus de photos">Photos</a></div>
          </div>
        </div>
      </div>
    </article>
    <article class="grid-1 border" id="post-95">
      <div class="grid-1">
        <div class="grid-1 padding-1 margin-bottom-1 align-center bggrey-1"><h2 class="h6-like txtgrey2 u-uppercase txtcenter"><strong>titre 1 ligne</strong></h2></div>
        <div class="margin-bottom-1 center"><img src="une image de 345px de haut" alt="" title=""></div>
        <div class="large-visible medium-hidden small-hidden tiny-hidden has-gutter">
          <div class="autogrid has-gutter margin-bottom-1">
            <div class="bggrey-1 txtcenter padding-1"><a class="txtgrey2" href="#" title="Voir plus de photos">Photos</a></div>
          </div>
        </div>
      </div>
    </article>
    <article class="grid-1 border" id="post-96">
      <div class="grid-1">
        <div class="grid-1 padding-1 margin-bottom-1 align-center bggrey-1"><h2 class="h6-like txtgrey2 u-uppercase txtcenter"><strong>Un titre un peu long sur 2 lignes et c'est la galère</strong></h2></div>
        <div class="margin-bottom-1 center"><img src="une image de 345px de haut" alt="" title=""></div>
        <div class="large-visible medium-hidden small-hidden tiny-hidden has-gutter">
          <div class="autogrid has-gutter margin-bottom-1">
            <div class="bggrey-1 txtcenter padding-1"><a class="txtgrey2" href="#" title="Voir plus de photos">Photos</a></div>
          </div>
        </div>
      </div>
    </article>
    <article class="grid-1 border" id="post-97">
      <div class="grid-1">
        <div class="grid-1 padding-1 margin-bottom-1 align-center bggrey-1"><h2 class="h6-like txtgrey2 u-uppercase txtcenter"><strong>titre 1 ligne</strong></h2></div>
        <div class="margin-bottom-1 center"><img src="une image de 345px de haut" alt="" title=""></div>
        <div class="large-visible medium-hidden small-hidden tiny-hidden has-gutter">
          <div class="autogrid has-gutter margin-bottom-1">
            <div class="bggrey-1 txtcenter padding-1"><a class="txtgrey2" href="#" title="Voir plus de photos">Photos</a></div>
          </div>
        </div>
      </div>
    </article>
  </div>        
</section>

Le bloc <article> doivent tous avoir la même hauteur, lorsqu'un titre (h6-like) passe sur 2 lignes, sont bloc devient le plug haut donc la grille adapte les autres à ce dernier sauf qu'à l'intérieur de ces bloc ça devient le bazar puisque les titres n'ont plus la même hauteur et plus aucuns boutons "photos" n'ont la même position.

upload/1593610034-57230-capturedancrandu2020-07-0115-.png

upload/1593610034-57230-capturedancrandu2020-07-0115-.png

Je vois pas trop comment résoudre mon problème sachant que je ne connais pas à l'avance le nombre de lignes nécessaire pour afficher tout le titre.
Modifié par flipflip (01 Jul 2020 - 15:28)

Olivier C

2 Jul 2020 à 21:03

flipflip a écrit :
En attendant j'ai trouvé ça https://css-tricks.com/simplified-fluid-typography/ et je trouve étonnant que cela ne soit pas intégré, enfin les viewports unit, dans knacss.

Merci pour le partage.

Yordi

Modérateur

2 Jul 2020 à 22:18

Hello,
Si on prend le problème à la base, ton problème est que c’est moche visuellement d’avoir parfois une ligne et parfois deux ? Perso en terme de lisibilité, je préfère 1000x avoir tout de la même taille en 1 ligne ou 2 ou même trois mais pas avoir un truc grand, petit, rikiki, moyen.
Et puis si c’est pour les décalages, il existe des solutions Smiley smile

Sujet clos

CSS et mise en forme, CSS3

Knacss et taille de font adaptable