Я хочу записать значение фракции, например, изображение ниже:
Как записать значение фракции с помощью html без использования изображения?
ПРИМЕЧАНИЕ. Мне не нужен этот шаблон 1 1/2, но строго так же, как рис.
Я хочу записать значение фракции, например, изображение ниже:
Как записать значение фракции с помощью html без использования изображения?
ПРИМЕЧАНИЕ. Мне не нужен этот шаблон 1 1/2, но строго так же, как рис.
Попробуйте следующее:
1<sup>1</sup>⁄<sub>2</sub>
Это отображается как:
1 1 & frasl; <суб > 2суб >
Следующий код будет отображаться как пример в вопросе, и если клиент не поддерживает CSS, он будет отображаться как обычный текст, все еще читаемый как дробная часть:
<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;
}
Средний <span>
служит только для клиентов, которые не отображают CSS - текст по-прежнему доступен для чтения как 1 12/256
- и поэтому вы должны поместить пробел между целым числом и фракцией.
Возможно, вы захотите изменить размер шрифта, потому что результирующий элемент может быть немного выше других символов в строке, или вы можете использовать относительное положение, чтобы немного сдвинуть его вниз.
Но общей идеи, представленной здесь, может быть достаточно для основного использования.
.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>
Вы можете использовать элементы <sup>
и <sub>
в сочетании с сущностью косой черты ⁄
<sup>1</sup>⁄<sub>2</sub>
есть 1 & frasl; 2
ОБНОВЛЕНИЕ. Я сделал эту скрипту, в которой показана дефисная доля в HTML с использованием таблицы.
<table>
<tbody>
<tr>
<td rowspan="2">1</td>
<td style="border-bottom:solid 1px">1</td>
</tr>
<tr>
<td>2</td>
</tr>
</tbody>
</table>
Использование MathML
(Спецификация, Wikipedia):
<math>
<mrow>
<mn>1</mn>
<mfrac>
<mi>1</mi>
<mi>2</mi>
</mfrac>
</mrow>
</math>
Проверьте следующее:
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>
Используя чистый html и свойство margin из br, вы можете работать
br {
content: "";
margin: -1%;
display: block;
}
<big>1</big><sup> <u><big>1</big></u></sup><br/> <sup> <big>2</big></sup>
Я думаю, что для этого есть более простой способ. Используйте следующий HTML-код.
1 ½