Български превод на "Figures & captions"

Настоящият документ е превод на статията "Figures & captions".

Оригиналната версия на документа се намира само на уебсайта на W3C http://www.w3.org/Style/Examples/007/figures.
Това НЕ е официален документ на W3C. Всички авторски права принадлежат на W3C.

Автор: Александър Дичев (всички преводи на автора). Новини в блога.
Преводът е направен на 15.08.2008. Последна актуализация на 17.12.2008.

Настоящият документ може да съдържа грешки или неточности в превода.
Ако желаете да предложите корекция или да сигнализирате за грешка, свържете се с автора.

Документът е преведен със съдействието на АБА уеб дизайн, Balkans и Велина Янкова.

Web Style Sheets
CSS съвети и трикове

(Тази страница използва CSS style sheets)

Добавяне на заглавия

Умаляване на картинки

Заглавието отгоре

XHTML

Фигури и заглавия

Eiffel tower

Scale model of the Eiffel tower in Parc Mini-France

HTML не притежава елемент, който да позволява показването на фигура със заглавие. Веднъж беше предложено (виж HTML3), но така и не бе включено в HTML4. Ето начин да се симулира такъв елемент за фигура:

<div class="figure">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Eiffel tower">
  <p>Scale model of the Eiffel tower 
    in Parc Mini-France
</div>

После в style sheet се използва класа "figure" за форматиране на фигурата по желания начин. Например, за float на фигурата в дясно, в място равно на 25% от ширината на околните параграфи, тези правила ще изпълнят трика:

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

Фактически, само първите две декларации (float и width) са важни, останалото е само за декорация.

Умаляване на изображението

Това е проблем, защото изображението може да е твърде голямо. В такъв случай, картинката е винаги 136 px широка и DIV-а е 25% околния текст. Така, че ако направите прозореца по-тесен, може изображението да препокрие DIV-а (опитайте го!).

Ако знаете ширината на всички изображения в документа, можете да домавите минимална ширина за DIV-а, така:

DIV.figure {
  min-width: 150px;
}

Друг начин е да умалите самата картинка. Това е направено с изображението в дясно. Както може би виждате ако направите прозореца по-тесен, JPEG-картинката не се умалява добре. Но ако изображението е графика в SVG формат, умаляването работи чудесно. Ето и използвания код:

<div class="figure">
  <p><img class="scaled" src="st-tropez.jpg"
    alt="St. Tropez">
  <p>Saint Tropez and its
    fort in the evening sun
</div>

St. Tropez

Saint Tropez and its fort in the evening sun

А това е style sheet-а:

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
img.scaled {
  width: 100%;
}

Единственото, което е добавено, е последното правило: то прави картинката широка, колкото вътрешността на DIV-а (площа вътре в рамката и падинга).

Поставяне на заглавието отгоре

Cap Ferrat

The Mediterranean Sea near Cap Ferrat

Заглавието може да се сложи дори отгоре, като се каже на браузъра, че фигурата трябва да е форматирана като таблица. Само с добавяне на няколко правила към style sheet-а от предната секция:

div.figure p {
  display: table-cell;
  width: 100%;
}
div.figure p + p {
  display: table-caption;
  caption-side: top;
}

Плюсът '+' указва на правилото да важи за P, който следва друг P. Това в конкретния случай означава, че важи за втория P от фигурата, този, който съдържа заглавието.

(Тази техника може да предизвика някои бъгове в по-стари браузтри, особено в комбинация с умаляване на изображението, както е направено тук.)

Фигури в XHTML

Настоящото (януари 2003) предложение за XHTML2 има елемент CAPTION, който може да се използва с OBJECT. Ако това предложение се приеме, повече няма да е необходимо използването на DIV и CLASS, но най-малко в XHTML2, може да напишете:

<object data="eiffel.jpg">
  <caption>Scale model of the
    Eiffel tower in Parc
    Mini-France</caption>
</object>

CSS Валиден CSS!Валиден HTML 4.0!

Bert Bos
създадено 17 Jan 2001;
последна промяна $Date: 2008/07/07 15:03:47 $ GMT