Alignement vertical d'une fraction

**eleydet** · 25/08/2022, 11h03

Bonjour,

Je tente d'écrire des fractions avec le code ci-dessous. Les deux premières fractions s'affichent correctement, mais pas la troisième. Elle ne s'aligne pas verticalement sur la barre horizontale du bas. Auriez-vous une solution pour remédier à ce problème d'alignement vertical?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <style>
  .frac {
    vertical-align: middle;
    display: inline-block;
    text-align: center;
  }
  .num {
    display: block;
    padding: 0px 4px 4px 4px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-image: url("data:image/svg+xml;utf8,<svg width='900' height='2' xmlns='http://www.w3.org/2000/svg'><path d='M 0 0.4 H 900 V 1.6 H 0'/></svg>");
  }
  .den {
    display: block;
    padding: 2px 4px 0px 4px;
  }
  </style>
</head>
 
<body>
  <p>y = <span class="frac"><span class="num">a</span><span class="den">b</span></span></p>
  <p>y = <span class="frac"><span class="num"><span class="frac"><span class="num">a</span><span class="den">b</span></span></span><span class="den"><span class="frac"><span class="num">c</span><span class="den">d</span></span></span></span></p>
  <p>y = <span class="frac"><span class="num"><span class="frac"><span class="num">a</span><span class="den">b</span></span></span><span class="den">c</span></span></p>
</body>
 
</html>

**ProgElecT** · 25/08/2022, 16h32

Salut

Peut être une question de navigateur utilisé, chez moi sous FireFox cela fonctionne apparemment correctement.
Nom : AlignementVerical.jpg
Affichages : 469
Taille : 8,6 Ko

Nom : AlignementVerical.jpg
Affichages : 469
Taille : 8,6 Ko

**mathieu** · 25/08/2022, 16h38

ProgElecT, j'ai la même chose avec firefox.
mais si, j'ai bien compris le message de eleydet, il voudrait le "=" en face de la barre qui est entre le "b" et le "c".

**eleydet** · 26/08/2022, 11h45

Mathieu a bien compris. J'ai augmenté la longueur de la barre horizontale pour mieux voir l'effet recherché. Par tâtonnement, j'ai pu l'obtenir approximativement de trois manières différentes, mais...
- J'ai testé avec Firefox seulement, j'ignore ce que cela donne avec les autres navigateurs.
- L'alignement du "=" avec la barre horizontale reste imparfait.
- Je ne comprends pas encore pourquoi j'obtiens ces résultats.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <style>
  .frac {
    //vertical-align: -1em;
    //vertical-align: -90%;
    vertical-align: -17px;
    display: inline-block;
    text-align: center;
  }
  .num {
    display: block;
    padding: 0px 7px 4px 7px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-image: url("data:image/svg+xml;utf8,<svg width='900' height='2' xmlns='http://www.w3.org/2000/svg'><path d='M 0 0.4 H 900 V 1.6 H 0'/></svg>");
  }
  .den {
    display: block;
    padding: 2px 7px 0px 7px;
  }
  </style>
</head>
 
<body>
  <p>y = <span class="frac"><span class="num">a</span><span class="den">b</span></span></p>
  <p>y = <span class="frac"><span class="num"><span class="frac"><span class="num">a</span><span class="den">b</span></span></span><span class="den"><span class="frac"><span class="num">c</span><span class="den">d</span></span></span></span></p>
  <p>y = <span class="frac"><span class="num"><span class="frac"><span class="num">a</span><span class="den">b</span></span></span><span class="den">c</span></span></p>
  <p>y = <span class="frac"><span class="num">a</span><span class="den"><span class="frac"><span class="num">b</span><span class="den">c</span></span></span></span></p>
</body>
 
</html>

**mathieu** · 26/08/2022, 12h06

le résultat n'est pas précis parce que vous essayez de vous approchez du résultat et donc vous n'arriverez pas à trouver une correction en pixel qui fonctionne avec tous les moteurs de rendu.
une solution serait de mettre le numérateur, la barre et le dénominateur dans 3 conteneurs et vous pouvez essayer de les aligner avec le modèle "grid" :
https://developer.mozilla.org/fr/doc...SS_Grid_Layout

une autre solution serait d'utiliser du latex.
vous pouvez ensuite convertir le latex en image :
https://latex2image.joeraut.com/
ou alors essayez cette bibliothèque qui fait le rendu de latex en javascript :
https://www.mathjax.org/

**eleydet** · 28/08/2022, 12h26

Trouvant les bibliothèques telles que MathJax ou Katex trop volumineuses, j'ai toujours écrit mes formules mathématiques en m'aidant du CSS. Le mois dernier, j'ai voulu uniformiser ma pratique, ce qui donne:

http://progmath.free.fr/minmathjs/index.html

MinMathJS semble très bien fonctionner pour les formules mathématiques basiques. Pour les formules plus complexes, il y a parfois des ajustements à effectuer, qu'il serait intéressant d'automatiser...

Lorsque le CSS ne permet pas de résoudre le problème, on se tourne vers le JavaScript? Dans le code ci-dessous, je calcule le décalage vertical par tâtonnement. J'ai du mal à trouver la bonne manière de le calculer.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <style>
  .frac {
    vertical-align: middle;
    display: inline-block;
    text-align: center;
  }
  .num {
    display: block;
    padding: 0px 7px 4px 7px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-image: url("data:image/svg+xml;utf8,<svg width='900' height='2' xmlns='http://www.w3.org/2000/svg'><path d='M 0 0.4 H 900 V 1.6 H 0'/></svg>");
  }
  .den {
    display: block;
    padding: 2px 7px 0px 7px;
  }
  </style>
</head>
 
<body>
  <p>y = <span class="frac"><span class="num">a</span><span class="den">b</span></span></p>
  <p>y = <span class="frac"><span class="num"><span class="frac"><span class="num">a</span><span class="den">b</span></span></span><span class="den"><span class="frac"><span class="num">c</span><span class="den">d</span></span></span></span></p>
  <p>y = <span class="frac"><span class="num"><span class="frac"><span class="num">a</span><span class="den">b</span></span></span><span class="den">c</span></span></p>
  <p>y = <span class="frac"><span class="num">a</span><span class="den"><span class="frac"><span class="num">b</span><span class="den">c</span></span></span></span></p>
</body>
 
<script>
var frac=document.querySelectorAll('.frac');
var den=document.querySelectorAll('.den');
 
H_den=getComputedStyle(den[5], null).height;
H_den=H_den.substring(0, H_den.length-2)/1.7;
frac[4].style["vertical-align"]="-"+H_den+"px";
 
H_den=getComputedStyle(den[6], null).height;
H_den=H_den.substring(0, H_den.length-2)/1.7;
frac[6].style["vertical-align"]="-"+H_den+"px";
</script>
 
</html>

Alignement vertical d'une fraction

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager