Div со строками разной высоты в HTML5
Я переписываю веб-страницу с HTML4 Transitional на HTML5 и хочу, чтобы после переписывания она выглядела так же. Однако я не могу создать элемент div, содержащий несколько строк текста, чтобы высота каждой строки автоматически регулировалась в соответствии с наибольшим размером шрифта текста в этой строке.
Для иллюстрации: одно и то же содержимое с переходным (1) и современным строгим (2) доктипами:
<iframe width = "100" src='data:text/html,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.box {
width: 20em;
border: 1px solid black;
margin: 5px;
}
.text-big {
font-size: 12px;
}
.text-small {
font-size: 9px;
}
</style>
</head>
<body>
<div id = "div-1" class = "box">
<span class = "text-big">Aaaa</span>
<span class = "text-small">Bbbb bbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbbb bbbbbbbbbbb bbbbbbbbb bbbbbbbbbb bbbbbbbbbbb bbbbbbbb bbb</span>
</div>
<div id = "div-2" class = "box">
<span class = "text-small">Bbbb bbbb bbb bbbb</span>
<span class = "text-big">Aaaaaa aaaaaaaaa aaaaaa aaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaa aaaaaaaaa aaaaaaaaaa aaaaaaaa aaaaaaaa aaaaaaa</span>
</div>
</body>
</html>
'></iframe>
<iframe width = "100" src='data:text/html,
<!DOCTYPE HTML>
<html>
<head>
<style>
.box {
width: 20em;
border: 1px solid black;
margin: 5px;
}
.text-big {
font-size: 12px;
}
.text-small {
font-size: 9px;
}
</style>
</head>
<body>
<div id = "div-1" class = "box">
<span class = "text-big">Aaaa</span>
<span class = "text-small">Bbbb bbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbbb bbbbbbbbbbb bbbbbbbbb bbbbbbbbbb bbbbbbbbbbb bbbbbbbb bbb</span>
</div>
<div id = "div-2" class = "box">
<span class = "text-small">Bbbb bbbb bbb bbbb</span>
<span class = "text-big">Aaaaaa aaaaaaaaa aaaaaa aaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaa aaaaaaaaa aaaaaaaaaa aaaaaaaa aaaaaaaa aaaaaaa</span>
</div>
</body>
</html>
'></iframe>Когда на указанном выше веб-сайте был HTML4 DOCTYPE, он отображался веб-браузером (Firefox) в режиме с ограниченными возможностями, и в результате высота каждой строки текста была скорректирована до максимального размера шрифта текста в эта строка:
.
Однако, когда на веб-сайте есть DOCTYPE HTML5 (поэтому он отображается в режиме без особенностей), в каждой <div> все строки текста имеют одинаковую высоту независимо от размера шрифта текста, который они содержат:
.
Я пробовал различные варианты CSS (line-height:, font-size:, display: и т. д.) для <div> и <span>, а также перенос текста в дополнительные <p>, <div> и т. д., но в HTML5 все строки <div> по-прежнему имеют одинаковую высоту. Я хочу, чтобы веб-сайт выглядел так, как это было в HTML4: строка, содержащая только мелкий текст, должна иметь небольшую высоту, а строка, содержащая как мелкий, так и большой текст или только большой текст, должна иметь большую высоту.
Тексты сильно различаются. Иногда есть короткий большой текст и длинный маленький текст (как в 1-м <div> примере), иногда есть короткий маленький текст и длинный большой текст (как во 2-м <div> примера) и так далее. поэтому я не могу вручную разделить текст на строки и индивидуально установить высоту строк.
Честно говоря: «Я хочу, чтобы после переписывания оно выглядело так же». нереалистично и указывает на то, что дизайн можно обновить.
Ответы 1
Борьба с режимом причуд может показаться бесполезной, и очевидно, что если есть какой-либо другой вариант, нам следует придерживаться режима, соответствующего стандартам, но, как и во всем, не должно быть невозможно имитировать основные причуды в стандартном режиме. Это будет потенциально сложно и/или утомительно.
Честно говоря, я не знаю всех особенностей режима причуд, но это все-таки не может быть темной магией. Ваша проблема напомнила мне один грязный трюк, который был довольно распространен в далеком прошлом, который использовался для устранения нежелательных интервалов, делая font-size: 0 на обертках, что фактически уменьшало межстрочный и межсловный интервал внутри строковых блоков, что часто было желательно при выполнении «inline макет".
Поскольку ваш образец (к счастью) не содержит никакого текстового контента непосредственно внутри оболочки .box, а весь текстовый контент находится в span, это может сработать — по крайней мере, так кажется с моей точки зрения. После некоторых возни кажется, что добавление
.box {
width: 20rem; /* or calc() with former inherited font-size */
font-size: 0; /* nuke whitespace */
word-spacing: 4px; /* remedy spacing between spans with extra spacing */
}
.box * {
word-spacing: 0; /* no extra spacing here */
line-height: 1.18; /* "works on my machine" */
}
«вариант HTML5» в некоторой степени помогает. Использовал этот исследовательский тестовый шарик с уменьшенным тестовым примером:
function setContent(str) {
for( const f of document.querySelectorAll('[data-prefix]') ) {
f.src = f.getAttribute('data-prefix') + str +
document.getElementById('x0').value +
document.getElementById(f.getAttribute('data-extra')).value
}
}
t.oninput()iframe,
textarea {
width: 300px;
height: 165px;
border: none;
}<!doctype html>
<table border>
<tr>
<th>Shared code
<th>Quirk
<th>HTML5
<tr>
<td>
<textarea id = "t" oninput = "setContent(value)">
<body>
<div>
<span>aaaa aaaa aaaa aaaa</span>
<b>ha!</b>
<span>aaaa aaaa aaaa aaaa</span>
</div>
</textarea>
<td>
<iframe data-extra = "x1"
data-prefix='data:text/html,<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">'
></iframe>
<td>
<iframe data-extra = "x2"
data-prefix='data:text/html,<!DOCTYPE HTML>'
></iframe>
<tr>
<td>
<textarea id = "x0" oninput = "t.oninput()">
<!-- For both -->
<style>
div { border: solid; width: 60px; }
div span { font-size: 10px; }
div b {font-size: 20px; }
</style>
<style>
</style>
</textarea>
<td>
<textarea id = "x1" oninput = "t.oninput()">
<!-- For Quirk -->
<style>
</style>
</textarea>
<td>
<textarea id = "x2" oninput = "t.oninput()">
<!-- For HTML5 -->
<style>
div {
font-size: 0;
word-spacing: 4px;
}
div * {
word-spacing: 0;
line-height: 1.18;
}
</style>
</textarea>
</table>Уменьшение размера шрифта оболочки .box, даже если она не содержит непосредственно текстового содержимого, помогает! На самом деле, в моем случае оказывается, что достаточно уменьшить размер шрифта до размера самого маленького контента (т. е. 10 пикселей в вашем примере) — это выглядит практически так же, но не требует манипуляций word-spacing и позволяет мне использовать относительный шрифт размеры в пределах .box.
Это просто не то, для чего настроен HTML/CSS.