28172 sujets

CSS et mise en forme, CSS3

[Résolu] Sorte de tableau dans un paragraphe

Bonjour,

A partir de la structure sémantique suivante
<p><span class="terme">xy'</span><span class="explication">produit de la diagonale "aller"</span> - <span class="terme">yx'</span><span class="explication">produit de la diagonale "retour"</span></p>

comment obtenir ceci ?
upload/1621496879-72178-expressionavecexplicationsen-.png
sachant qu'il peut y avoir plusieurs termes dans une expression.

Merci d'avance de votre aide
Modifié par Beka (20 May 2021 - 10:08)
Pourquoi mettre dans un <p> quelque chose qui est manifestement une liste d’éléments? Sémantiquement ce n’est pas la chose à faire, il doit y avoir une raison impérative pour en arriver là
Pour le reste, il me semble qu’on pourrait "presque" le faire en css, sauf le tiret entre les deux éléments qui n’étant pas dans une balise ne doit pas pouvoir être stylé séparément. Mais il y a des gens plus compétants que moi sur le forum qui sauront peut être comment faire ça
« Pourquoi mettre dans un <p> quelque chose qui est manifestement une liste d’éléments? il doit y avoir une raison impérative pour en arriver là »

Merci de ta réponse PapyJP.

La raison impérative est que sémantiquement il s'agit d'une expression mathématique dans laquelle chaque terme est expliqué séparément.
C'est pour pouvoir disposer d'une solution alternative à la syntaxe d'AsciiMath 
ubrace(expression)_("explication")

qui permet de placer une accolade horizontale
upload/1621503251-72178-asciimathexempledubrace-20-05.png
qui ne donne pas un rendu satisfaisant, et qui ne permet pas de possibilité de personnalisation.

PS : Je suis impressionné par tes connaissances en mathématiques musicales, auxquelles je ne comprends que tchi. Smiley smile
Salut

Moi je dirais que tes "groupes" de <span>, c'est à dire terme + explication, doivent se trouver dans un centenaire spécifique qui permettrait de faire le placement.

quelques choses comme ça :

https://codepen.io/JUSEN/pen/GRWrJOa
Modifié par JENCAL (20 May 2021 - 11:48)
Merciii Jencal !

Pour rendre la sémantique plus concrète, j'ai préféré scinder l'expression en trois paragraphes plutôt qu'en trois <div>
<p class="terme_explication"><span class="terme">~xy'~</span><span class="explication">produit de la diagonale "aller"</span></p>
	<p class="terme_explication separation">~-~</p>
	<p class="terme_explication"><span class="terme">~yx'~</span><span class="explication">produit de la diagonale "retour"</span></p>

(les ~ séparent les parties AsciiMath du texte)

p.terme_explication {
	float: left;
	width: 120px;
	text-align: center;
}

span.explication {
	
	display: block;
	margin-top: 7.5px;
	font-size: 8.5pt;
}

p.separation {
	width: 0px;
}

(Si je ne mets pas de largeur pour p.separation, les blocs sont trop séparés. Why ??)

Voilà ce que cela donne :
upload/1621507678-72178-termesetexplicationsenhtml-cs.png
Modifié par Beka (20 May 2021 - 12:52)
Modérateur
PapyJP a écrit :

Pour le reste, il me semble qu’on pourrait "presque" le faire en css, sauf le tiret entre les deux élément ...


Oui, grid est un bon candidat, pour ce cas.

flex et grid vont par défaut créer des boites autour des portions de textes adjacent a des balises HTML , du coup le tiret devient une boite sans que l'on puisse le ciblé avec un sélecteur précis , mais on peut réorganiser avec order ou grid-row/grid-column les balises autours.

En règle générale, il faut éviter ce genre de situation (placer du texte dans une boite flex ou grid) , mais elle peut-être utiliser lorsque le contenu est connu et redondant au travers d'une classe spécifique.

exemple avec grid où l'on peut placer les balise dans un endroit de la grille : https://codepen.io/gc-nomade/pen/XWMpePz (peut-être okay ici car le contenu est facilement placé dans la grille)
et
pour la démo uniquement flex en jouant avec, width, wrap et order (en négatif pour le placer devant le texte , le texte étant en lui en order:0, puis 0 ou >0 pour placer les balises suivant le texte) https://codepen.io/gc-nomade/pen/OJpWxxe (pas okay car résultat trop aléatoire et surtout pas dédié a une grille 2d).
Cdt,
Modifié par gcyrillus (20 May 2021 - 21:52)
Whaou !
Merci gcyrillus !!

Je suis encore (très) loin de comprendre et maîtriser ces concepts, mais ta solution avec grid est vraiment élégante, car elle permet de conserver la sémantique html la plus naturelle (et la plus réduite).

J'ai passé une partie de la journée à remplacer les ubrace d'AsciiMath par la solution à trois <p> (plus un <div> englobant le tout) initiée par Jencal.
Je crois que je vais passer une partie de la journée de demain à remplacer ces structures par celle que j'ai initialement demandée.
(Heureusement, je ne cumule pas encore un nombre important de pages, et d'endroits où j'utilise ce procédé pédagogique.)

Comment je fais lorsque j'ai plusieurs couples terme-explication successifs :
terme1-explication1 + terme2-explication2 + ... + terme_n-explication_n ?
Merci beaucoup, beaucoup, gcyrillus !!!

Tu me fais sacrément avancer dans mon projet car une bonne part de ma pédagogie écrite consiste précisément à expliquer chaque terme d'une expression (par exemple, des dérivées un peu complexes de fonctions imbriquées).

Il me reste à apprendre et à maîtriser les concepts techniques que tu utilises.
Sujet clos
Aller à