Comment afficher les fractions construites "classiques" avec une ligne horizontale en CSS / JavaScript?

Si vous êtes heureux d'utiliser JQuery et que vous souhaitez minimiser la majoration que vous devez ajouter, vous pouvez utiliser ce qui suit:

CSS

.fraction, .top, .bottom { padding: 0 5px; } .fraction { display: inline-block; text-align: center; } .bottom{ border-top: 1px solid #000; display: block; } 

HTML

 <span class="fraction">1/2</span> <span class="fraction">3/4</span> <span class="fraction">1/32</span> <span class="fraction">77/102</span> 

JQuery

 $('.fraction').each(function(key, value) { $this = $(this) var split = $this.html().split("/") if( split.length == 2 ){ $this.html(' <span class="top">'+split[0]+'</span> <span class="bottom">'+split[1]+'</span> ') } }); 

Exemple de travail: http://jsfiddle.net/xW7d8/

Utilisez ceci

 <sup>6</sup>/<sub>7</sub>​ 

DEMO

Pour ligne droite

HTML

 <div class="top">2</div><div class="bottom">6</div>​ 

CSS

 .top{border-bottom:solid black 1px; display:inline-block; float:left} .bottom{ display:inline-block; clear:left; float:left} 

DEMO 2

CSS:

 .fraction { display: inline-block; position: relative; vertical-align: middle; letter-spacing: 0.001em; text-align: center; font-size: 12px; } .fraction > span { display: block; padding: 0.1em; } .fraction span.fdn {border-top: thin solid black;} .fraction span.bar {display: none;} 

HTML:

 Foobar <div class="fraction"> <span class="fup">4</span> <span class="bar">/</span> <span class="fdn">5</span> </div> Foobar 

Changez la taille de la police de l'image pour que vous l'atteigniez à une taille souhaitée

Exemple

Vous devez utiliser les alternatives contextuelles disponibles dans la police. Le soutien pour cela n'est pas génial maintenant, mais il se produira partout tôt ou tard.

Si vous aviez les fractions classe sur le numéro, vous utiliserez:

 .fractions { -moz-font-feature-settings: "frac=1"; -ms-font-feature-settings: "frac" 1; } 

Annoyingly Gecko utilise l'information brute qui passerait à la police, mais la version ms devrait devenir standard.

Voici une démo. http://ie.microsoft.com/testdrive/Graphics/opentype/opentype-fontbureau/index.html#fractions

À l'heure actuelle, c'est seulement à Gecko et Trident, mais Webkit va certainement se rattraper.

Vous voudrez peut-être regarder quelque chose comme MathJax qui utilise Javascript.

Si vous utilisez uniquement des fractions de base, vous pouvez utiliser les caractères Unicode (ou entités HTML équivalentes):
¼ ½ ¾ ⅓ ⅔ ⅛ ⅜ ⅝ ⅞

Pour un CSS pur, l'utilisation de la barre horizontale peut être «traditionnelle», mais la plupart des personnes utilisent aujourd'hui la diagonale, même lorsqu'on écrit des fractions sur du papier. Voici ce que j'utilise:

 .fraction > sup, .fraction > sub { font-size: .66em; } .fraction > sup { vertical-align: .4em; } .fraction > sub { vertical-align: -.2em; } 

Avec ce HTML:

 <span class="fraction"> <sup>1</sup>⁄<sub>8</sub> </span> 

Flexbox permet maintenant des options supplémentaires

 .fraction { display: inline-flex; flex-direction: column; padding: 1em; align-items: center; } .numerator { border-bottom: 2px solid grey; } 

 <span class="fraction"> <span class="numerator">3</span> <span class="denominator">4</span> </span> <span class="fraction"> <span class="numerator">12</span> <span class="denominator">7</span> </span> 

Je trouve que la meilleure combinaison est d'utiliser une taille 0.5em avec la barre oblique fractionnaire unicode ( ⁄ "/"). Le numérateur doit être vertical-align:super . Et si vous pouvez doué de supprimer le support pour IE7 et ci-dessous, vous pouvez utiliser :before classe psuedo pour simplifier la balisage.

 .num { font-size: 0.5em; vertical-align: super; } .den { font-size: 0.5em; } .den:before { content: '\2044'; font-size: 2em; } 

et

 <span class="num">19</span><span class="den">45</span> 

( Demo )

Vous pouvez également utiliser l'approche unicode directe pour rendre ¹⁹/₄₅:

 ¹⁹⁄₄₅ 

(Voir l' article wikipedia .)

Cela ne convertit pas automatiquement «1/2» en une fraction. Mais si vous avez plus de contrôle sur les modèles, vous pouvez faire ce qui suit. Comme personne n'a proposé d'utiliser une table, voici:

HTML:

 <table class="fraction"> <tr> <td class="top">Top of Fraction</td> </tr> <tr> <td class="bottom">Bottom of Fraction</td> </tr> </table> 

CSS:

 table.fraction { display: inline-block; text-align: center; margin-left: 1em; td { line-height: 2em; } td.top { border-bottom: 1px solid darkgray; } td.bottom { } } 

Résultat:

Je ne vois personnellement pas de JavaScript dans ce cas.

Consultez ce qui suit:

 span.frac { display: inline-block; text-align: center; vertical-align: middle; } span.frac > sup, span.frac > sub { display: block; font: inherit; padding: 0 0.3em; } span.frac > sup {border-bottom: 0.08em solid;} span.frac > span {display: none;} 

 <p>7&nbsp;<span class="frac"><sup>42</sup><span>&frasl;</span><sub>73</sub></span>.</p>