Возможно ли сохранить вертикальный ритм, используя только CSS?
Я разрабатываю ориентированную на типографику WordPress тему [1], и у меня возникают проблемы с встроенными изображениями.
Я могу контролировать каждый элемент и регулировать его высоту строки, нижнее поле и т.д., чтобы сохранить вертикальный ритм. Но поскольку изображения, вставленные в редактор, могут иметь любую высоту, они явно нарушают весь следующий контент.
Таким образом, вопрос заключается в том, возможно ли использовать margin, padding, оба или другое решение, чтобы убедиться, что независимо от размера изображения оно будет соответствовать базовой линии.
Я знаю, что есть несколько альтернатив, например, чтобы все изображения поворачивались на кратную высоту строки, чтобы я мог сохранить ритм. Другой вариант будет использовать javascript, не идеальный, но если нет решения css, мне придется рассмотреть его.
[1] Как видите, это проблема, связанная с CSS, а не WordPress, поэтому я публикую этот вопрос здесь.
6 ответов
(отредактировано - новое и улучшенное решение)
Я не знаю, предоставляет ли WordPress какой-либо способ генерирования div-обёрток вокруг изображений, но если это так, то это должно сработать. Он достаточно надежен в отношении различных масштабов текста и размеров изображений, хотя вам может потребоваться отрегулировать длину строки сгенерированного содержимого с чередующимися пробелами и неразрывными пробелами в зависимости от того, насколько высоки или коротки ваши изображения.
Это работает так, что он использует отрицательное поле, чтобы сделать внешнюю обертку изображения достаточно шире, чем внутренняя обертка, чтобы один неразрывный пробел поместился на одной строке до того, как произойдет обтекание, а затем генерирует строку чередующиеся неразрывные и нормальные пробелы, которые заполняют одну строку за раз по правому краю, перед тем как пролиться на строку ниже. Наконец, отрицательное поле, равное одной высоте строки, нейтрализует частично заполненную линию пробелов под изображением.
<!DOCTYPE html>
<html>
<style>
.html {
line-height: 1.25em;
}
.p {
margin: 0;
padding: 0;
}
.section,
.imginner {
width: 20em;
}
.section {
float: left;
margin: 0.5em;
background-color: #eeeeff;
}
.fakeimage {
background-color: #ffeeee;
}
.imgouter {
margin-right: -0.5em;
background-color: #eeffee;
margin-bottom: -1.25em; /* minus 1 line-height */
}
.imgouter:after {
content:'\00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0'
}
.imginner {
float: left;
background-color: #ffffdd;
}
</style>
<head>
</head>
<body>
<div class='section'>
Some text text text text text text.
Some text text text text text text.
<div class='imgouter'>
<div class='imginner'>
<div class='fakeimage' style="width:145px; height:92px">
(image here)
</div>
</div>
</div>
Some text text text text text text.
Some text text text text text text.
Some text text text text text text.
</div>
<div class='section'>
Some text text text text text text.
Some text text text text text text.
Some text text text text text text.
Some text text text text text text.
Some text text text text text text.
Some text text text text text text.
Some text text text text text text.
Some text text text text text text.
Some text text text text text text.
Some text text text text text text.
Some text text text text text text.
Some text text text text text text.
Some text text text text text text.
Some text text text text text text.
</div>
</body>
</html>
Я не могу гарантировать, что все это будет работать, но это может стоить попробовать:
Если вы можете гарантировать, что высота всех изображений указана в emВы можете установить размер шрифта img элементы должны быть такими же, как line-height чтобы убедиться, что все правильно вставленные изображения имеют правильный размер:
html
{
font-size: 15px;
line-height: 18px;
}
img
{
font-size: 18px;
line-height: 18px;
}
В качестве альтернативы, вы можете попробовать плавающие изображения в абзацах, чтобы изображение было перенесено в правильном ритме.
<p><img ... /> Lorem ipsum dolor sit amet...</p>
И, наконец, чистый CSS-метод, который вам просто необходимо сумасшедшим реализовать.
- Рассчитайте межстрочный интервал, который вы используете
- Убедитесь, что он выходит на весь пиксель (иначе это никогда не сработает).
- Убедитесь, что все высоты указаны одинаково:
<img height="100"против<img height="100px" - Напишите непристойное количество правил CSS:
img[height$="1"]
{
margin-bottom: 9px;
}
img[height$="2"]
{
margin-bottom: 8px;
}
...etc...
Обратите внимание, что это отлично работает для 10 и других кратных 10 и 5, но это будет королевской болью для всего остального.
На мой взгляд, чистое решение CSS невозможно. Возьмите, например, стол. Ячейка таблицы по умолчанию имеет небольшой отступ, поэтому ее содержимое доступно для чтения. Вы можете попробовать сделать каждую ячейку таблицы точно правильной высоты, но это будет сложно. Кроме того, добавление, например, нижней границы somewere также добавит к высоте элемента, что означает, что вы должны считаться с ним. Мне нравится, как инструменты вертикального ритма Compass помогают поддерживать вертикальный ритм, но для встроенных изображений и, например, таблиц я обнаружил, что чистого CSS не хватает. По этой причине я написал простой плагин jquery, который может помочь с этим, найти его здесь: https://github.com/dagomar/rhythm.js
Единственный недостаток заключается в том, что для работы встроенных элементов потребуется смещение, пока я не понял, можно ли это автоматизировать. Смещение, которое вы можете найти, только протестировав его, я обнаружил, что смещение 6 (по умолчанию) лучше всего работает для базовых линий от 21 до 24 пикселей, но может быть, что размер шрифта оказывает влияние. Пока в качестве доказательства концепции я обнаружил, что она работает очень хорошо. Это работает также для адаптивных изображений (window.resize). Надеюсь это поможет.
@PaBLoX, я считаю, что достичь вертикального ритма вполне возможно, используя только CSS. Реальный вопрос заключается в том, "можете ли вы создать шаблон многократного использования вертикального ритма, используя только CSS?". Каждый проект индивидуален, использует разные семейства шрифтов и т. Д. Хотя предполагается, что вертикальный ритм основан на математике, управляемой входными данными, переменные меняются с каждым проектом. Вам может не понадобиться вертикальный ритм в стиле блога на сайте покупок...
В любом случае, прошло много времени с тех пор, как был задан этот вопрос, но если вы или кто-либо еще хотите увидеть пример (попытку) создания шаблона для вертикального ритма, вот репозиторий на github: https: // github. ком / jonschlinkert / вертикальный ритм
Это отправная точка. Я подозреваю, что проект в конечном итоге будет состоять из нескольких разных шаблонов для разных нужд.
Если вы хотите сделать это исключительно с помощью CSS, вы должны знать размер каждого изображения заранее. Например, в этой демонстрации:
http://f.cl.ly/items/0l2N0o0T011A0u2j012M/Screen%20shot%202011-02-13%20at%2019.46.16.png
У меня есть сетка 20 пикселей, а высота изображения 150 пикселей, поэтому я поместил изображение в контейнер с высотой 160 пикселей. Это требует дополнительной разметки:
<div class=figure>
<div class=image-wrap style="height:160px">
<img width=150 height=150>
</div>
<p class=caption>Figure 1
</div>
Возможно, такая разметка может быть сгенерирована плагином WordPress, который получает разметку изображения и минимальную высоту и выдает выровненную по сетке div обертка. (Я незнаком с WordPress.)
Альтернативой может быть использование JavaScript, который был рассмотрен в этом похожем вопросе.
Я бы предложил использовать CSS-фреймворк, такой как Foundation или Bootstrap и Compass + SCSS, чтобы помочь с этим. На самом деле я проделал некоторую работу по настройке Foundation с приличным набором правил вертикального ритма по умолчанию, который вы можете использовать прямо из коробки. У меня есть пост в блоге, в котором объясняется это, и есть ссылка на pull-запрос на Github.
http://lucisferre.net/2012/10/08/getting-into-vertical-rhythm/
При этом вы можете создать приличный базовый CSS для вашей типографии и других элементов страницы. Или вы можете просто применить эту технику к существующему CSS. Это немного утомительно, но не так сложно.