`<shinbun-photo>`

Photo or figure with an optional caption. Spans all columns inside an article; as a direct child of the page it can be placed with `span`, `y`, `x`, `w`. In vertical writing the image height is the column length, so `ratio` sets the width relative to it.

Example

写真の説明（写真は架空）

写真は記事の全段にまたがる。

<shinbun-paper dan="4" chars="8" font-size="0.8rem">
  <shinbun-page>
    <shinbun-article span="4">
      <shinbun-photo ratio="4 / 3">
        <img alt="" />
        <figcaption>写真の説明（写真は架空）</figcaption>
      </shinbun-photo>
      <p>写真は記事の全段にまたがる。</p>
    </shinbun-article>
  </shinbun-page>
</shinbun-paper>

Attributes

Name	Type	Description
`ratio`	`string`	Aspect ratio (width / height), e.g. `10 / 11`
`span`	`number`	Number of columns when placed in the page (1-15)
`y`	`number`	Start column when placed in the page (1-15)
`x`	`number`	Start position on the line axis when placed in the page (1-60)
`w`	`number`	Lines occupied when placed in the page (1-60)

Properties

None

Methods

None

Slots

Name	Description
`(default)`	img and figcaption

CSS custom properties

Name	Description
`--sb-photo-bg`	Background color before the image loads
`--sb-photo-ratio`	Aspect ratio (also set by `ratio`)