Formatage "division" possible ?

Version imprimable

17/07/2021, 17h10
Couin

Formatage "division" possible ?

Couin Couiiiinnn !

Petite question , est-il possible de faire un affichage au format division en html/css ?

Je m'explique, j'ai une page avec un table de catégories musicales et pour chaque catégorie j'affiche le nombre de musique "enabled" sur le nombre de musique de cette catégorie.

En gros, la forme est de type :

Code:

$category ($nb_cat_song_enabled/$nb_cat_songs)

Ce qui donne par exemple :

Citation:

Dance 90 (3503/3596)

C'est moche et ca prend beaucoup de place (car sur une meme ligne du tableau, il y a 4 catégories et du coup ca fait des renvoies à la lignes tout moche car données trop longues pour la taille du champs à l'écran).

Existe-t-il un moyen de faire un truc du genre :

Citation:

3503
———
3596

(Bien sur le trait de division serait juste en dessous de la valeur, là j'ai dessiné avec des — , et l'écriture plus petites poru que la hauteur total soit sensiblement égale à la hauteur du nom de catégorie).

Un code du genre :

Code:

<div class='division'>$nb_cat_song_enabled/$nb_cat_songs</div>

Et la class met la division en forme.

J'ai bien tenté un tableau dans la cellule, le résultat serait pas mal mais je n'arrive pas du tout à aligner verticalement le mini-tableau dans la cellule (du coup la division est plus basse que le nom).

Merkouiiiinnn :D
Couin
17/07/2021, 19h47
mathieu

pour afficher des formules, le plus joli que j'ai vu pour faire ça est le Latex.
après il y a plusieurs façon de faire le rendu, vous pouvez essayer ça : https://www.mathjax.org/#samples
18/07/2021, 02h03
Couin

2 pièce(s) jointe(s)

Hello,

Merci pour cette réponse :)

Pour Latex, je suis arrivé sur cette page https://tex.stackexchange.com/questi...line/1654#1654
Malheureusement, le truc m'a défoncé la tête encore plus que le problème de départ :calim2:

Sur cet exemple , la division est renvoyée à la ligne...

Je voudrais simplement faire ça :
Pièce jointe 601821

Mais je n'ai réussi qu'à faire ça (le petit tableau pour la division est en 2 lignes d'une cellule chacune) :
Pièce jointe 601822
18/07/2021, 06h24
mathieu

vous pouvez mettre la parenthèse entière dans la formule et la fraction sera alignée comme ça :
https://jsbin.com/mexasociwe/1/edit?html,output
18/07/2021, 15h59
Couin

1 pièce(s) jointe(s)

Hello,

Super, merci on est très proche du résultat, il faut juste que je regarde plus en détail la doc de mathjax pour lui faire prendre une autre font que les chiffres à l'ancienne lol

Pièce jointe 601836

Bonjour,

une solution full CSS :

Code:

<div class="division">(Dance 90 <span>3503<hr />3596</span>)</div>

Code:

1
2
3
.division { display:flex; flex-direction:row; flex-wrap:nowrap; }
.division span { display:flex; flex-direction:column; align-items:center; font-size:70%; }
.division span hr{ width:30px; margin:0; padding:0; height:1px; border:0; background:#000; }

23/07/2021, 09h32
NoSmoking

Bonjour,

Citation:

Envoyé par jreaux62

une solution full CSS :

Code:

<div class="division">(Dance 90 <span>3503<hr />3596</span>)</div>

oui mais le code HTML est non valide, élément de type block<hr> dans élément de type inline<span>.

Alors, remplacer le <hr> par <ins></ins> et ça fait la farce.

Code:

<div class="division">(Dance 90 <span>3503<ins></ins>3596</span>)</div>
Code:

1 2 3 .division { display:flex; flex-direction:row; flex-wrap:nowrap; } .division span { display:flex; flex-direction:column; align-items:center; font-size:70%; margin-left:5px; } .division span ins { width:100%; margin:0; padding:0; height:1px; border:0; background:#000; }

23/07/2021, 17h13
Couin

1 pièce(s) jointe(s)

COUIN !

Merci pour la solution css, du coup, avec un peu d'adaptation du code, plus besoin de chercher pour la font vu que ca affiche bien.
Pièce jointe 602151

Par contre, en mettant

Code:

<ins style="background:orange;width:<? echo $divisionwidth; ?>px; "></ins>

à la place de

Code:

<hr style="background:orange;width:<? echo $divisionwidth; ?>px; " />

La barre de fraction n’apparaît pas. Pour le moment je laisse donc hr .
23/07/2021, 18h32
jreaux62

il faut aussi modifier le CSS :

Code:

.division span ins { .... }

Et tant qu'à (bien) faire, y ajouter le background à la couleur que tu veux (au lieu de l'ajouter inline) :

Code:

.division span ins { width:100%; margin:0; padding:0; height:1px; border:0; background:orange; }

N.B. Pas sûr que ton $divisionwidth soit nécessaire.
J'ai testé avec width:100%;, et ça me semblait bon.
24/07/2021, 00h06
Couin

Impeccable, ca marche nickel !

Merci à tous et bon ouiken :D

Citation:

Envoyé par Couin

il faut juste que je regarde plus en détail la doc de mathjax pour lui faire prendre une autre font que les chiffres à l'ancienne lol

il te faut surcharger le CSS par défaut de mathjax, quelque chose comme :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 .myclass mjx-container[jax="CHTML"][display="true"] { display: inline-block; text-align: center; margin: 1em 0; } .myclass mjx-container[jax="CHTML"][display="true"] mjx-math { padding: 0; font-size: .5em; font-family: monospace; /* la font que tu veux */ } .myclass .MJX-TEX { font-family: inherit; }
cela devrait le faire avec une ligne HTML comme :

Code:

<div class="myclass">Oldies 90 (Sub3 $$4587\over10596$$)</div>

Pour revenir sur une écriture possible sans mathjax, j'avais par le passé, et je l'ai retrouvé, utilisé ceci pour les fractions :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 .fraction { display: inline-flex; position: relative; flex-direction: column; text-align: center; font-size: .75em; color: red; transform: translate(0, -25%); } .fraction sub { border-top: 1px solid currentColor; font: inherit; }
en écrivant les fractions ainsi :

Code:

<p>(Dance 90 <span class="fraction">4587<sub>10596</sub></span>)