para - ¿Cómo escribir el valor de fracción usando html?
fracciones decimales ejercicios resueltos (9)
Creo que hay una manera más fácil de hacer esto. Use el siguiente HTML.
1 ½
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
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.
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 <span class="frac"><sup>42</sup><span>⁄</span><sub>73</sub></span>.</p>
Pruebe lo siguiente:
1<sup>1</sup>⁄<sub>2</sub>
Esto se muestra como:
1 1/2
Puede usar elementos <sup> y <sub> junto con la entidad de fracción de barra ⁄
<sup>1</sup>⁄<sub>2</sub> es <sup>1</sup>⁄<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>
Usando MathML ( Specification , Wikipedia ):
<math>
<mrow>
<mn>1</mn>
<mfrac>
<mi>1</mi>
<mi>2</mi>
</mfrac>
</mrow>
</math>
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/> <sup> <big>2</big></sup>
.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>
br {
content: "";
margin: -1%;
display: block;
}
<big>1</big><sup> <u><big>1</big></u></sup><br/> <sup> <big>2</big></sup>