Comment écrire une valeur de fraction en utilisant html?

Le code suivant sera rendu comme l'exemple de la question, et si le client ne prend pas en charge CSS, Il sera rendu en texte brut, toujours lisible en 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 milieu <span> ne sert que pour les clients qui ne rendent pas CSS - le texte est toujours lisible comme 1 12/256 - et c'est pourquoi vous devez placer un espace entre l'entier et la fraction.

Vous pouvez modifier la taille de la police, car l'élément résultant 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 un peu vers le bas.

Mais l'idée générale, telle que présentée ici, peut être suffisante pour l'utilisation de base.

.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>

, Vous pouvez utiliser <sup> et <sub> éléments en conjonction avec le fraction slash entité ⁄

<sup>1</sup>&frasl;<sub>2</sub> est ¹⁄₂

UPDATE : j'ai fait ce violon {[19] } qui montre une fraction de césure en HTML en utilisant une table.

   <table>
      <tbody>
        <tr>
          <td rowspan="2">1</td>
          <td style="border-bottom:solid 1px">1</td>
          </tr>
          <tr>            
            <td>2</td>
          </tr>
      </tbody>
   </table>

À L'Aide De MathML (Spécification, Wikipédia):

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

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

1 ½

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>

CodePen

En utilisant du html pur et avec la propriété margin de br, vous pouvez contourner

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

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

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

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