web-dev-qa-db-fra.com

Comment écrire une valeur de fraction en utilisant HTML?

Je veux écrire une valeur de fraction telle que celle ci-dessous:

enter image description here

Comment écrire une valeur de fraction en utilisant HTML sans utiliser d'image?

NOTE: Je ne veux pas ce motif 1 1/2 mais strictement comme sur la photo

htmlnumbersfractions
41
user774411

Essayez ce qui suit:

1<sup>1</sup>&frasl;<sub>2</sub>

Cela s'affiche comme:

11/2

59
thomson_matt

.frac {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    letter-spacing: 0.001em;
    text-align: center;
}
.frac > span {
    display: block;
    padding: 0.1em;
}
.frac span.bottom {
    border-top: thin solid black;
}
.frac span.symbol {
    display: none;
} 
1 <div class="frac">
    <span>1</span>
    <span class="symbol">/</span>
    <span class="bottom">2</span>
    
</div>

13
lokesh

Le code suivant sera rendu comme l’exemple de la question. Si le client ne prend pas en charge les CSS, il sera restitué sous forme de texte brut, toujours lisible sous forme de fraction:

<p>1 <span class="frac"><sup>12</sup><span>/</span><sub>256</sub></span>.</p>

span.frac {
  display: inline-block;
  font-size: 50%;
  text-align: center;
}
span.frac > sup {
  display: block;
  border-bottom: 1px solid;
  font: inherit;
}
span.frac > span {
  display: none;
}
span.frac > sub {
  display: block;
  font: inherit;
}

Le <span> du milieu ne sert que pour les clients qui ne rendent pas de CSS - le texte est toujours lisible en tant que 1 12/256 - et c'est pourquoi vous devez placer un espace entre l'entier et la fraction.

Vous souhaiterez peut-être modifier la taille de la police, car l'élément obtenu peut être un peu plus grand que les autres caractères de la ligne, ou vous pouvez utiliser une position relative pour le déplacer légèrement vers le bas.

Mais l’idée générale, telle que présentée ici, peut suffire à l’utilisation de base.

11
Arsen7

Vous pouvez utiliser les éléments <sup> et <sub> conjointement avec l'entité entité slash de fraction&frasl;. 

<sup>1</sup>&frasl;<sub>2</sub> est 1/2

UPDATE: J'ai créé ce violon qui affiche une fraction trait d'union en HTML à l'aide d'un tableau.

   <table>
      <tbody>
        <tr>
          <td rowspan="2">1</td>
          <td style="border-bottom:solid 1px">1</td>
          </tr>
          <tr>            
            <td>2</td>
          </tr>
      </tbody>
   </table>
5
Xavi López

Je pense qu'il y a un moyen plus facile de faire cela. Utilisez le code HTML suivant.

1 &frac12;
Le résultat est 1 ½

3
adithyan sp

Utiliser MathML ( Spécification , Wikipedia ):

<math>
 <mrow>
  <mn>1</mn>
  <mfrac>
   <mi>1</mi>
   <mi>2</mi>
  </mfrac>
 </mrow>
</math>

2
0b10011

Découvrez les éléments suivants:

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>

CodePen

1
Giorgi Gzirishvili
br {   
    content: "";
    margin: -1%;
    display: block;
 }

<big>1</big><sup> <u><big>1</big></u></sup><br/>&nbsp;&nbsp;<sup> <big>2</big></sup>
0
user7930187

En utilisant du HTML pur et avec la propriété margin de br, vous pouvez contourner le problème.

br {   
    content: "";
    margin: -1%;
    display: block;
 }
<big>1</big><sup> <u><big>1</big></u></sup><br/>&nbsp;&nbsp;<sup> <big>2</big></sup>

0
Arun Sharma