28044 sujets

CSS et mise en forme, CSS3

Bonjour,

Mon codepen présente le petit problème.

Rétrécissez la fenêtre afin que le texte fasse au moins deux lignes.

Je veux entre chaque ligne une marge blanche de mettons 4px.

Et je ne vois pas trop comment faire simplement...
Modifié par boteha_2 (26 Jul 2023 - 22:17)
Bpnjour Olivier C,

J'ai mis à jour le codepen, cela marche très bien.

Sur un plan théorique j'ai un peu de mal à comprendre.

J'ai transformé les unités de padding en em.
padding: 0.2em 0.6em

La hauteur de l'élément h5 est donc de 1.4em : 1 + (2 x 0.2)
Et le line-height de 1.8em crée une marge blanche de 0.2em en haut et en bas, donc 0.4em entre deux lignes.

Je pensais que le padding était ajouté au line-height, donc une ligne de 1.8em + 0.4em de padding, donc un élément de 2.2em de haut.
Mais ce n'est pas ce qui se passe.

Intéressant.

ENCORE merci de ton aide.
Modifié par boteha_2 (27 Jul 2023 - 20:20)
Bonjour,

Je complique un peu la question.

Quand mon texte passe sur deux lignes :
1) Il n'y a pas de marge interne à droite de la première ligne.
2) Il n'y a pas de marge interne à gauche de la deuxième ligne.

C'est un comportement normal avec le code actuel à voir dans le codepen.

Si je veux obtenir ces deux marges quel changement de html ou de css puis-je faire ?

J'espère que ma question est bien posée.
Modifié par boteha_2 (02 Aug 2023 - 20:32)
Modérateur
Salut,

le display inline.... De base, enlève-le. Si tu veux vraiment un inline sans ses contraintes, alors opte pour un inline-block
Modifié par niuxe (02 Aug 2023 - 23:00)
Bonjour niuxe,

display: inline-block

D'accord mais on perd l'espace blanc entre les deux lignes.

Voir le codepen.

J'ai l'impression que l'on ne peut pas sortit sans l'ajout d'un parent.

Ou peut-être avec une FlexBox.
Modérateur
Salut,

Si j'ai bien saisi ce que tu cherches à faire[^1], tu vas devoir tricher [^2]:


<div>
  <h5>Sécurité, confidentialité, Règlement général sur la protection des données (RGPD) / 11</h5>
</div>




div{
  max-width: 400px;
}

h5 {background: repeating-linear-gradient(#7A8B9A, #7A8B9A 24px, transparent 25px, transparent 29px); font-weight: normal; color: #FFF; padding: 0.2em 0.6em; line-height: 24px}


[^1] la div sert à simuler une petite résolution
[^2] j'ai mis des valeurs en px. Je pense qu'on peut l'éviter ou sinon, il faudrait le calculer.
Modifié par niuxe (04 Aug 2023 - 12:40)
Bonjour niuxe,

Merci de ton suivi.

J'ai intégré ton code à mon codepen mais comme tu peux voir ce n'est pas tout à fait l'effet recherché.

J'ai dû mal exprimer mes contraintes.

Le background doit épouser la longueur du texte, dynamiquement.
Chaque ligne doit avoir une petite marge à gauche et à droite, quel que soit le nombre de lignes.

Cela semble facile mais je n'ai pas de solution...
Modérateur
boteha_2 a écrit :
Bonjour niuxe,

Merci de ton suivi.

J'ai intégré ton code à mon codepen mais comme tu peux voir ce n'est pas tout à fait l'effet recherché.

J'ai dû mal exprimer mes contraintes.

Le background doit épouser la longueur du texte, dynamiquement.
Chaque ligne doit avoir une petite marge à gauche et à droite, quel que soit le nombre de lignes.

Cela semble facile mais je n'ai pas de solution...


Salut,

je n'avais pas vu ta réponse. Je ne comprends pas ce que tu essaies de faire. Peux tu faire une image du rendu que tu veux faire ?
Bonjour niuxe,

Merci de ton suivi.

J'essaye de bien t'expliquer à partir du codepen.

Prends la ligne en h5.

Si sur une ligne : il y a bien un espace gauche de 0.6em et un espace droit de 0.6em (grâce au padding).
Si tu rétrécis la fenêtre pour passer sur deux lignes :
1) Le fond gris continue à épouser la longueur du texte, ce qui est l'effet voulu.
2) Par contre il n'y a pas d'espace à droite de la première ligne, ni à gauche de la deuxième ligne.

Et je me demande par quelle magie on pourrait créer ces espaces.

C'est sûr que le problème n'existe pas si on enlève le fond gris ou s'il était possible de lui donner une largeur déterminée et indépendante de son contenu.

Dans le h3 j'ai pensé à une solution usine-à-gaz où chaque mot serait un élément html.
i::before, i::after {content: " "; font-size: 0.2em}

Mais bizarrement il n'y a pas d'espace en début ni en fin de ligne (indépendamment du fait que cette solution est assez horrible).

J'espère avoir bien expliqué la question...
Modifié par boteha_2 (08 Aug 2023 - 19:17)
Modérateur
J'ai compris ce que tu essaies de faire. Lorsque le texte est contraint d'aller à la ligne, tu souhaites qu'il y ait le même alignement en début de ligne et à la fin un visuel non disgracieux. Il faut qu'il y ait un wrap sur chaque mot. Ce qui veut dire que pour certains mots/entités, tu seras obligé de respecter les règles de typographie en ajoutant une espace insécable avant et/ou après.

exemple :

<p>Fait il beau aujourd'hui&nbsp;?&nbsp;Oui, il fait beau</p> 

En css pur, je ne vois pas de solution. En effet, tu es obligé de travailler sur chaque mot.
La seule solution que je vois, c'est celle-là (obligé que le js vienne nous aider pour automatiser ce rendu):

<div class="simulation-responsive">
  <h2><mark>Sécurité, confidentialité, Règlement général sur la protection des données RGPD)&nbsp;/&nbsp;11</mark></h2>
</div>


scss

.simulation-responsive{
  max-width: 400px;
}

h2{
  display: flex;
  flex-wrap:wrap;
  span, mark{
    background-color: red;
    color:white;
    padding: 0.2em .4em; 
  }
}


js :

let $h2 = document.querySelector('h2')
$h2.innerHTML = $h2.textContent.split(' ').map(w => `<span>${w}</span>`).join('')


Comme nous le constatons tous les deux, c'est beurk. Mais le résultat est assez convaincant. À noter que tu ne peux pas trop jouer sur le padding-left et padding-right.
Modifié par niuxe (09 Aug 2023 - 19:46)
Bonjour niuxe,

Merci de ton suivi.

J'ai intégré ton code au codepen avec des changements mineurs.

Cela fonctionne, bravo, mais en effet quelle horreur de devoir passer par JS (même si aujourd'hui les navigateurs sont très rapides, etc.).

Dans mon approche où chaque mot est un élément html avec ses pseudo-éléments before et after, fond VERT, comprends-tu pourquoi je n'ai pas d'espace en début et en fin de ligne ?
Modifié par boteha_2 (09 Aug 2023 - 20:24)
Modérateur
boteha_2 a écrit :

Dans mon approche où chaque mot est un élément html avec ses pseudo-éléments before et after, fond VERT, comprends-tu pourquoi je n'ai pas d'espace en début et en fin de ligne ?

<i> est par défaut en display:inline; en faisant :
h3 > i {font-style: normal; padding: 0 0.18em;display:inline-block}
alors les pseudos sont bien générés.
Bonjour gcyrillus,

J'ai intégré inline-block au codepen et cela fonctionne.

Je ne sais pas ce que vous en pensez mais cette solution me semble plus légère que celle du javascript.
Elle demande moins de ressources au navigateur.

Au passage je note que la largeur d'un espace blanc est en gros de 0.36em.
Bonjour,

Pour résumer deux solutions sont proposées.

Une par JS
Une autre par le html.

Comme le nombre de phrases à traiter était limité j'ai opté pour le html, environ 30 minutes pour ajouter les balises nécessaires et le CSS.

Aucune de ces solutions ne permet de créer des espaces gauche et droite différents de 1/2 espace blanc.

Je coche Résolu.

Encore merci pour l'aide.