Подрисуночная подпись. Как поставить описание к изображению

06 января 2014  20375  книги, html, CSS, верстка

 

Как правило, иллюстрации (изображения) должны иметь подписи. Подпись, или подрисуночная подпись, — текст под иллюстрацией, который определяет ее тематическое содержание, поясняет изображение или сообщает об источнике. Словесная надпись делает изображение понятным. Наглядность его возрастает.

В наиболее полном виде в состав подписи входят:

  • 1) условное обозначение иллюстрации — слово Рис.;
  • 2) номер иллюстрации: Рис. 5;
  • 3) словесное определение темы иллюстрации;
  • 4) легенда — сведения о месте хранения оригинала иллюстрации, его худож. и техн. особенностях, дате создания и т. д.;
  • 5) экспликация — расшифровка условных обозначений на иллюстрации.

Состав подписи может быть сокращен или дополнен: характер сокращений и дополнений зависит от вида и особенностей иллюстраций.

Иллюстрации нумеруют прежде всего для того, чтобы на них удобно было кратко ссылаться в тексте. Если на иллюстрацию не требуется ссылаться в основном тексте, как, например, на портрет автора перед его произведением, или на портрет лица, которому посвящено издание, или на любые иллюстрации в литературно-художественном издании, нумеровать их нет никакой нужды, и подпись состоит в этом случае только из словесного определения темы иллюстрации.

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

Перед порядковым номером изображения знак номера (№) не ставится.

После порядкового номера иллюстрации, если он вместе с условным названием иллюстрации или без этого названия выключен отдельной строкой, знак препинания (точку) не ставят.
Например, Рис. 1

Если основная подпись следует непосредственно за порядковым номером, продолжая начатую им строку, то порядковый номер завершается точкой.
Например, Рис. 2. Описание изображения

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

После основной подписи, если далее следует экспликация, принято ставить двоеточие.

Подпись всегда начинают с прописной буквы, независимо от того, какой элемент идет первым, экспликацию — со строчной буквы.

Подписи к иллюстрациям рекомендуется набирать шрифтом меньшего кегля по сравнению со шрифтом основного текста.

Условное обозначение и номер выделяются шрифтом.


Использованы материалы книги:
«Справочник издателя и автора: Редакционно-издательское оформление издания». Авторы: Аркадий Мильчин, Людмила Чельцова.

Оформление и верстка подрисуночной подписи

Если ширина изображения равна ширине блока основного текста, добавить подпись можно с помощью обычного абзаца (<p></p>). Однако, этот способ не работает, как только изображение имеет небольшой размер и его необходимо расположить по краю веб-страницы.

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

Вариант № 1. Подходит при условиях: а) одно изображение; б) несколько изображений одной ширины; в) длина подрисуночной подписи меньше ширины изображения.

#images_description
{
   display: block;
   float: left;
   margin: 0 1em 2em 0;
   padding: 0;
   position: relative;
}
#images_description img
{
   border: medium none;
   display: block;
   margin: 0 0 1em;
   padding: 0;
}
.description 
{
   font-size:15px; /* размер шрифта меньше основного */
   line-height: 1.3;
   margin: 0;
   padding: 0;
   position: inherit;
   text-align: left;
}

Размещение изображения и подрисуночной подписи на странице.

<div id="images_description">
   <img src="путь к изображению" width="" height=""
alt="описание изображения" />
   <span class="description">Подрисуночная подпись</span>
</div>

Если ширина блока с изображением не задается, то она будет определяться автоматически, исходя из размера изображения. Если подрисуночная подпись будет длинной — блок растянется. Исправляется это добавлением к стилям блока свойства width с фиксированным значением, равным ширине изображения.

Вариант № 2. Условия: а) одно/несколько изображений различной ширины; б) подрисуночная подпись длиннее ширины изображения.

Можно воспользоваться свойством display: table-cell по совету Артема Поликарпова.

#images_description
{
   display: block;
   float: left;
   margin: 0 1em 2em 0;
   padding: 0;
   position: relative;
}
.images_description
{
   display: table-cell;
   width: 1px;
   padding: 0;
}
 .images_description .description
{
   display: block;
   font-size: 15px;
   line-height: 1.3;
   margin: 0;
   padding: 0;
}

Размещение изображения и подрисуночной подписи на странице.

<div id="images_description">
   <div class="images_description">
      <img src="путь к изображению" alt="описание изображения" />
      <span class="description">Подрисуночная подпись, которая переносится
на другую строчку</span>
   </div>
</div>

Пример использования

 

Комментарии для сайта Cackle
наверх