para - ¿Cómo escribir el valor de fracción usando html?

fracciones decimales ejercicios resueltos

Question

Quiero escribir el valor de fracción como la imagen siguiente:

¿Cómo escribo el valor de fracción usando html sin usar imagen?

NOTA: No quiero este patrón de 1 1/2 pero estrictamente igual que la imagen de arriba

Answer 1

Creo que hay una manera más fácil de hacer esto. Use el siguiente HTML.

1 ½

El resultado es 1 ½

Answer 2

El siguiente código se representará igual que el ejemplo en la pregunta, y si el cliente no admite CSS, se representará como texto sin formato, aún legible como una fracción:

<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;
}

El <span> sirve solo para los clientes que no procesan CSS, el texto todavía es legible como 1 12/256 y por eso debe colocar un espacio entre el entero y la fracción.

Es posible que desee cambiar el tamaño de la fuente, porque el elemento resultante puede ser un poco más alto que los otros caracteres en la línea, o puede utilizar una posición relativa para desplazarlo un poco hacia abajo.

Pero la idea general, tal como se presenta aquí, puede ser suficiente para el uso básico.

Answer 3

Mira lo siguiente:

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

Answer 4

Pruebe lo siguiente:

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

Esto se muestra como:

1 _1/2

Answer 5

Puede usar elementos <sup> y <sub> junto con la entidad de fracción de barra ⁄

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

ACTUALIZACIÓN : hice este violín que muestra una fracción con guiones en HTML usando una tabla.

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

Answer 6

Usando MathML ( Specification , Wikipedia ):

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

Answer 7

Usando html puro y con margen de propiedad de br, puedes evitarlo

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

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

Answer 8

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

Answer 9

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

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