shinbun-components

Lay out Japanese newspaper pages with HTML tags alone. The Web Components version of shinbun-css, with no runtime dependencies.

Usage

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kamimen/shinbun-components@0.1.1/dist/shinbun-components.min.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@kamimen/shinbun-components@0.1.1/dist/shinbun-components.min.js"></script>

<shinbun-paper dan="6" chars="10" auto-tcy>
  <shinbun-page>
    <shinbun-article span="6" lead>
      <shinbun-headline size="l">Headline</shinbun-headline>
      <p>Body text.</p>
    </shinbun-article>
  </shinbun-page>
</shinbun-paper>

0.1.1 in the URL is the package version. Pinning it keeps the page unchanged after later releases.

Install from npm

npm install @kamimen/shinbun-components

import "@kamimen/shinbun-components/define"; // registers every element
import "@kamimen/shinbun-components/css";

Elements

Every element also accepts the utility attributes gothic and nowrap.

• shinbun-ad

  Advertisement slot. Combine sizes with spaces, e.g. `kind="kijishita zen5"`.

• shinbun-article

  Article. Occupies `span` columns; body text flows across them, headlines and photos span all of them.

• shinbun-box

  Box for explanations and key points. A direct `h3` is the title.

• shinbun-byline

  Byline: the author credit at the end of an article.

• shinbun-dateline

  Dateline: the place and date an article was filed from.

• shinbun-emphasis

  Emphasis dots (sesame) over the text.

• shinbun-folio

  Folio: the line outside the page area with the section name and date.

• shinbun-headline

  Headline. Spans all columns of its article. Exposed as `role="heading"`.

• shinbun-horizontal

  Sets a run of text horizontally inside vertical writing.

• shinbun-kicker

  Kicker: the small line above a headline. Spans all columns inside an article.

• shinbun-lead

  Lead paragraph (summary) of an article.

• shinbun-masthead

  Horizontal band at the top of a horizontal-writing paper: title and side notes.

• shinbun-nameplate

  Nameplate (title block) placed in the page grid. A direct `h1` is the title,

• shinbun-page

  Page grid. Lays out articles and photos in columns.

• shinbun-paper

  Outer frame of a page: writing mode, theme and the page grid settings.

• shinbun-paragraph

  Body paragraph for use where a plain `p` is not wanted. Indented by one character; `flush` removes the indent.

• shinbun-photo

  Photo or figure with an optional caption. Spans all columns inside an article;

• shinbun-rule

  Rule line.

• shinbun-sideways

  Sets Latin text rotated 90 degrees in vertical writing.

• shinbun-sleeve

  Sleeve headline: the secondary headline beside the main one. Spans all columns inside an article.

• shinbun-sub

  Subhead inside an article. Spans all columns.

• shinbun-table

  Wrapper for a real `table`. The wrapper keeps native table semantics: the inner `table` gets the

• shinbun-tcy

  Tate-chu-yoko: sets a short run of digits or letters horizontally in one character cell.

• shinbun-yoko

  Horizontal headline set in a vertical paper. Place it in the page grid with `span`, `y`, `x`, `w`.

Examples

• front.html
• full-page.html
• horizontal.html
• starter.html

API manifest

Editors and tools can use custom-elements.json (Custom Elements Manifest).