Blog: Alter World

Виртуальный мир является своеобразным Alter Ego мира реального…

CSS: Делаем подписи к картинкам

2 комментария 16 сентября 2005, 12:04 • CSS, UA, Дизайн

Восхотелось мне вчера в очередной раз странного – пожелал иметь на вебстраницах оформление статей, схожее с их полиграфическими аналогами, к примеру, журнальными. Естественно мне восхотелось поиметь толковое описание к картинкам (т.е. «классические» подписи под изображениями) и при этом желательно без использования костылей. Поставленную вчера перед самим собой задачу я решил, но... Впрочем, давайте по-порядку.

Идея

Идея весьма простая: надо каким-то образом содержимое атрибута title – который и выполняет роль пояснения или подписи – изображений помещать под изображения. При этом желательно обойтись средствами только CSS.

С применением JavaScript задача решается проще, но мне хотелось именно «чистого решения» задачи.

Решение

Вначале я попытался поиграть с позиционированием именно title-атрибута элемента img и у меня естественно ничего не вышло. Зато при этом обнаружил одну интересную странность в работе CSS-конструкций вида element [attribut]{ набор свойств }, о которой я расскажу в другой раз.

Этот «обускураживающий» факт меня не остановил и дал толчок к более внимательному ознакомлению со спецификацией CSS 2. В ней я с удивлением обнаружил, что «все уже придумано до нас» – © не помню чей. Есть такое замечательное свойство content, которое как раз и делает то, что мне нужно.

Итак, в теле web-страницы изображаем элементарное подключение картинки без каких-либо костылей и подпорок:
<img src="rover.jpg" width="280" height="209" title="Rover на поверхности Марса." class="desc" />

В CSS описываем поведение этой картинки:
img.desc {
display: block;
counter-increment: pic-num;
text-align: justify;
margin: 5px;
padding: 5px;
border: 1px solid #666;
background-color: #dcdcdc;
float: left;
}
img.desc:after {
content: "Рис. " counter(pic-num) ". " attr(title);
display: block;
font-size: 8pt;
font-family: Georgia;
}

В результате мы получили то, что вы видите на рисунке снизу. Непорядок!
Рис. 1.
Самое интересное, что если у изображения убрать атрибуты width и height, то картина существенно меняется.
Рис. 2.
Странно... А что будет, если описание будет больше ширины картинки?
Рис. 3.
Кхм... Добавляем к img.desc:after дополнительное свойство width: 280px; – ширину картинки – и все становится намного симпатичнее.
Рис. 4.
Вроде бы нужно кричать "ура, мы победили! ", но... вас ждет горькое разочарование – content-свойство поддерживается только браузером Opera. Получается, что все пользователи IE и Gecko-браузеров пролетают как фанерка над Парижем :(.

Делаем костыли

Для того, чтобы у всех зашедших подписи у картинок были необходимы костыли – к сожалению без них обойтись не получилось. В web-страничке изображаем костыль:
<div class="wrap"><img src="03rover3.gif" width="280" height="209" title="Rover на поверхности Марса. "/><span>Подпись картинки с костылями :( Теперь проверка на очень длинный комментарий-описание :)</span></div>

В CSS-файле «рисуем» такое:
.wrap {
float: left;
width: 280px;
margin: 5px;
padding: 15px 15px 0 15px;
background: #F5B404 url(top-left.gif) top left no-repeat;
}

.wrap span {
float: left;
display: block;
text-align: justify;
width: 100%;
font-size: 8pt;
font-family: Georgia;
padding-bottom: 15px;
padding-right: 15px;
margin-right: -15px;
background: transparent url(bottom-right.gif) bottom right no-repeat;
}

* html .wrap span {
padding-top: 5px;
}

И в результате получаем в IE6, FF, Opera & Safari такую картинку:
Рис. 5.

Достаточно симпатично получилось, хотя над внешним видом еще можно поработать...

Выводы

К сожалению подписи к картинкам возможно сделать только при помощи дополнительных манипуляций, т.к. поддержка штатных средств CSS для организации подписей в большинстве браузеров отсутствует.

Кстати, может кто предложит более красивое решение?

P.S. Копия опубликована в моем блоге «Заметки на полях...»

Ещё заметки на эту тему:

2 комментария

Вы можете подписаться на комментарии к этой статье через RSS или отправить к ней TrackBack.

  1. Тош • 6 апреля 2011 г. в 15:39

    Ну дак, весь смысл этого теряется, когда вы ставите обертке width: 280px.

    Все, универсальности нет, будет картинка размером 100 пикселей и все будет плохо.

    начиная читать статью, я думал будет крутой универсальный метод, а в итоге мы получили статью «Как сверстать картинки и фразу под эту конкретную картинку».

    Где то находил в сети универсальное решение, но счас найти не получается. Найду — кину сюда ссыль.

  2. Александр Вольф • 6 апреля 2011 г. в 16:15

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

Оставить свое мнение

XHTML: Вы можете использовать эти тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>