Красивая вёрстка <figure>

Question

[Андрей Шайдуров]

Боюсь, что окажется повтором, или что ответ на поверхности, но никак не могу придумать решение. Хочется сделать красивые, как в учебниках, сноски изображений, ещё и в семантической вёрстке, и без Javascript.
Задача: организовать с помощью CSS

<figure>
  <img />
  <figcaption>
    Some inline text or <div>block elements</div>
  </figcaption>
</figure>

так, чтобы figcaption никогда не был шире, чем изображение. Изображение — max-width: 640px. Figure — float: left.

Отображение парсится RSS-ридером, поэтому изображения могут быть самых разных размеров и ratio.

Пример того, что надо исправить, можно глянуть на librapost.ru/rss-items/4e3a740733d21610b8004a02, там правда figure без float'а.

Answer 1

[Smileek]

figure {width:1%; display:table}

И ведь решается на чистом CSS! :)
jsfiddle.net/XML6b/

Comments

[Андрей Шайдуров]

огромное спасибо, вы — волшебник.

[Андрей Шайдуров]

жаль, к сожалению, кармы не хватает вам плюс поставить.

[Олег Торбасов]

А ничего более подходящего в CSS3 не появилось? Ведь это по существу трюк: во-первых, называем таблицей то, что таблицей не является, во-вторых, указываем размер, который заведомо не будет соблюдён.

[Smileek]

Это особенность рендеринга таблиц, мы ее здесь успешно применили. То есть у любой таблицы не будет соблюден размер, если в нее вставить картинку шире, чем колонка.
display:inline позволяет блочные элементы представить как инлайновые, хотя они таковыми не являются. Получается, тоже трюк, но разве есть какие-то минусы его применения?

Что касается CSS3, то ничего более подходящего не нашел, и мне кажется, что и не найдется. Потому что задача весьма нетривиальная — изменить размер родительского объекта на основе отрендеренного дочернего (без JS — а то было бы просто).
Ну и как тут без трюков? :)

[Олег Торбасов]

Дело в том, что таблицы не обязаны, строго говоря, иметь такую особенность рендеринга. Получается, что стиль для одного элемента оказывается завязан на произвольные особенности другого. И это нехорошо. (С инлайновыми/блочными элементами другое. Эта их изначальная инлайновость/блочность есть условность, браузерный произвол, а не неотъемлимая черта их природы, как мне кажется.)

А задача на самом деле весьма тривиальная и древняя. Что может быть естественнее, чем умещающаяся под картинкой подпись? То, что она до сих пор не имеет тривиального и естественного решения — это проблема CSS. …У меня есть смутные надежды на модули Flex и Grid.