Возможно ли сохранить вертикальный ритм, используя только CSS? - PullRequest
Новая
       42

Возможно ли сохранить вертикальный ритм, используя только CSS?

8 голосов
/ 14 февраля 2011

Я занимаюсь разработкой типографской темы WordPress [1], и у меня возникают проблемы с встроенными изображениями.

Я могу контролировать каждый элемент и регулировать его высоту строки, нижнее поле и т. Д., чтобы сохранить вертикальный ритм.Но поскольку изображения, вставленные в редактор, могут иметь любую высоту, они, очевидно, нарушают весь следующий контент.

Таким образом, вопрос в том, возможно ли использовать margin, padding, оба или другое решение, чтобы убедиться, что это не зависит отразмер изображения будет соответствовать базовой линии.

Я знаю, что есть несколько альтернатив, например, чтобы все изображения поворачивались на кратную высоту строки, чтобы я мог сохранить ритм.Другой вариант - использовать javascript, не идеальный вариант, но если решения для CSS нет, я должен его рассмотреть.

[1] Как видите, это проблема, связанная с CSS, а не проблема WordPress.Вот почему я размещаю этот вопрос здесь.

Ответы [ 6 ]

8 голосов
/ 14 февраля 2011

(отредактировано - новое и улучшенное решение)

Я не знаю, предоставляет ли 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>
1 голос
/ 23 февраля 2013

На мой взгляд, чистое решение CSS невозможно. Возьмите, например, стол. Ячейка таблицы по умолчанию имеет небольшие отступы, поэтому ее содержимое доступно для чтения. Вы можете попробовать сделать каждую ячейку таблицы точно правильной высоты, но это будет сложно. Кроме того, добавление, например, нижней границы somewere также добавит к высоте элемента, что означает, что вы должны считаться с ним. Мне нравится, как инструменты вертикального ритма Compass помогают поддерживать вертикальный ритм, но для встроенных изображений и, например, таблиц я обнаружил, что чистого CSS не хватает. По этой причине я написал простой плагин jquery, который может помочь с этим, найти его здесь: https://github.com/dagomar/rhythm.js

Единственным недостатком является то, что для работы встроенных элементов потребуется смещение, я пока не выяснил, можно ли это автоматизировать. Смещение, которое вы можете найти, только протестировав его, я обнаружил, что смещение 6 (по умолчанию) работает лучше всего для базовых линий от 21 до 24 пикселей, но может быть, что размер шрифта влияет Пока в качестве доказательства концепции я обнаружил, что она работает очень хорошо. Это работает также для адаптивных изображений (window.resize). Надеюсь, это поможет.

1 голос
/ 20 октября 2012

@ PaBLoX, я считаю, что достичь вертикального ритма вполне возможно, используя только CSS.На самом деле вопрос в том, «можете ли вы создать шаблон многократного использования вертикального ритма, используя только CSS?».Каждый проект индивидуален, использует разные семейства шрифтов и т. Д. Хотя предполагается, что вертикальный ритм основан на математике, управляемой входными данными, переменные меняются с каждым проектом.Возможно, вам не понадобится вертикальный ритм в стиле блога на сайте покупок ...

В любом случае прошло много времени с тех пор, как был задан этот вопрос, но хотите ли вы или кто-то еще увидеть примерпопытка) создать шаблон для вертикального ритма, вот репозиторий на github: https://github.com/jonschlinkert/vertical-rhythm

Это отправная точка.Я подозреваю, что проект в конечном итоге будет состоять из нескольких разных шаблонов для разных нужд.

1 голос
/ 15 февраля 2011

Я не могу гарантировать, что все это будет работать, но, возможно, стоит попробовать:

Если вы можете гарантировать, что высота всех изображений указана в 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-метод, который вам просто необходимо сумасшедшим реализовать:

  1. Рассчитайте расстояние между строками, которое вы используете
  2. Убедитесь, что он получается с целым пикселем (иначе это никогда не сработает).
  3. Убедитесь, что все высоты указаны одинаково: <img height="100" против <img height="100px"
  4. Напишите непристойное количество правил CSS: 
img[height$="1"]
{
  margin-bottom: 9px;
}
img[height$="2"]
{
  margin-bottom: 8px;
}
...etc...

Обратите внимание, что это отлично работает для 10 и других кратных 10 и 5, но это будет королевской болью для всего остального.

1 голос
/ 14 февраля 2011

Если вы хотите сделать это исключительно с помощью CSS, то вам необходимо заранее знать размер каждого изображения.Например, в это демо :

снимок экрана http://f.cl.ly/items/0l2N0o0T011A0u2j012M/Screen%20shot%202011-02-13%20at%2019.46.16.png

У меня есть сетка 20 пикселей, а высота изображения 150 пикселей, поэтому я обернул изображениев контейнере высотой 160px.Для этого требуется дополнительная разметка: 

<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, который был рассмотрен в в этом похожем вопросе .

0 голосов
/ 09 октября 2012

Я бы предложил использовать CSS-фреймворк, такой как Foundation или Bootstrap и Compass + SCSS, чтобы помочь с этим. Я на самом деле проделал некоторую работу по настройке Foundation с приличным набором правил вертикального ритма по умолчанию, который вы можете использовать прямо из коробки. У меня есть запись в блоге, в которой объясняется это, и есть ссылка на pull-запрос на Github.

http://lucisferre.net/2012/10/08/getting-into-vertical-rhythm/

С этим вы можете создать приличный базовый CSS для вашей типографии и других элементов страницы. Или вы можете просто применить эту технику к вашему CSS. Это немного утомительно, но не так сложно.

...