Documentation

How to use typesettings.css

Get Started

Add data-typesettings attribute to the direct child element of the <body>:

<body>
  <div data-typesettings>
    …
  </div>
</body>

Page Structure

Inside the div[data-typesettings] element, you can divide up the page into main article content and navigation.

<div data-typesettings>
  <nav>
    …
  </nav>
  <main>
    <article>
      …
    </article>
  </main>
</div>

Accessibility

Create a skip link for the page by using an <a> element as the direct child of the <body>. Use the same text in the href attribute as the id for the content container.

<body>
  <a href="#content">
    Skip to content
  </a>
  <div data-typesettings>
    <nav>
      …
    </nav>
    <main>
      <article id="content">
        …
      </article>
    </main>
  </div>
</body>

📣: Accessibility is important and everyone should write better code to support it. Please reference the WCAG for writing proper markup.

Internationalization

Typesettings.css has basic internationalization support for all elements.

Quotation Marks

Proper quotation marks for English, Japanese, and Chinese (Traditional) are built-in for the <q> element. Appropriate lang attribute is required for each language.

Primary quotation marks and secondary quotation marks.
引号，标示引用、着重、特别用意的符号。
引用符（いんようふ）は、約物の一つ。

<body lang="zh-Hant">
  <q>
    引号，标示引用、着重、<q>特别用意</q>的符号。
  </q>
</body>

📣: Want more languages supported? Submit a request here »

Right to Left

Right to left writing mode is supported in all elements. To create a page that reads right to left, add the dir="rtl" attribute to the <html> element.

<html dir="rtl">
  …
</html>

Vertical Writing Mode

Vertical writing mode for Japanese and Chinese (Traditional) is also supported, see Customize page to find out how to turn on the unique feature.

A sticky top navigation menu can be added to a page by using a <nav> element as a direct child of the div[data-typesettings] element.

Demo

Code Snippet

<div data-typesettings>
  <nav>
    <ul>
      <li><h1><a href="[url]">Title</a></h1></li>
      <li><a href="[url]">Link 1</a></li>
      <li><a href="[url]">Link 2</a></li>
      <li><a href="[url]">Primary Action</a></li>
    </ul>
  </nav>
</div>

📣: If a <nav> element is not a direct child of the div[data-typesettings] element, it will not be sticky.

Main Article Content

Within the <article> element, you can construct your article using a combination of special elements and common elements.

If you want to enable a banner, create a <header> element with the attribute role="banner". Banner bleeds out of the article content’s max-width and colors are inverted.

Demo

Code Snippet

<header role="banner">
  …
</header>

Drop Cap

You can activate drop cap by using a <p> element inside the banner. This only applies to the first <p> element.

Demo

Code Snippet

<header role="banner">
  <p>…</p>
</header>

📣: Drop Cap is only available above 400px viewport.

Abbreviation

You can create a tooltip for words that are abbreviations by using the <abbr> element.

Demo

Code Snippet

<abbr aria-label="User Experience">
  UX
</abbr>

📣: Make sure to use the aria-label attribute, not the title attribute.

Summary Heading

By combining the <details>, <summary>, and <h2> ~ <h6> elements, you can create summary heading that toggles additional information. The heading must be the actual summary of the detailed text.

Demo

H2 summary heading text

This is the full details. Every man lives in two realms: the internal and the external. The internal is that realm of spiritual ends expressed in art, literature, morals, and religion. The external is that complex of devices, techniques, mechanisms, and instrumentalities by means of which we live.

H3 summary heading text

H4 summary heading text

H5 summary heading text

H6 summary heading text

Code Snippet

<details>
  <summary>
    <h6>…</h6>
  </summary>
  <p>…</p>
</details>

📣: <h1> is not recommended for this because it is only meant for page heading.

Common Elements

Common elements can be used as is with no conditions attached.

Demo

Text: bold, italic, linked, code, kbd, small.

Paragraphs. The ultimate measure of a man is not where he stands in moments of comfort and convenience, but where he stands at times of challenge and controversy.

The function of education is to teach one to think intensively and to think critically. Intelligence plus character—that is the goal of true education.

In the end, we will remember not the words of our enemies, but the silence of our friends.

Summary sums up the details

Details elaborate on the summary.

First level unordered item
First level unordered item
1. Second level ordered item
  - Third level unordered item
  - Third level unordered item
2. Second level ordered item
First level unordered item

First level ordered item
First level ordered item
- Second level unordered item
  1. Third level ordered item
  2. Third level ordered item
- Second level unordered item
First level ordered item

Definition list: A list of text and description.
Morgawr: A sea serpent.
Owlman: A giant owl-like creature.

pre {
  padding: .5em 1em; color: black; border-left: 5px solid; background-color: white;
}

Pull Quote. Darkness cannot drive out darkness; only light can do that. Hate cannot drive out hate; only love can do that.

The time is always right to do what is right.

Article heading text

Article subheading text

H2 heading text

H3 heading text

H4 heading text

H5 heading text

H6 heading text

Image description — Figure caption (image)

Col1	Col2	Col3
Row1	Row1	Row1
Row2	Row2	Row2

Figure caption (table)

Form

You can create a form by using a combination of <form>, <fieldset>, <label>, <input> and <button> elements. Form can be used anywhere within the div[data-typesettings] element.

Demo

Code Snippet

<form action="submit">
  <fieldset>
    <legend>This is a fieldset</legend>
    <ol>
      <li>
        <label>
          Textarea
          <textarea name="textarea" rows=5 placeholder="Enter a paragraph"></textarea>
        </label>
      </li>
      <li>
        <label>
          Input
          <input type="text" placeholder="Enter text">
        </label>
      </li>
      <li>
        <label>
          Select
          <select name="select" id="select">
            <optgroup>
              <option value="Select" disabled selected>Select</option>
              <option value="Option 1">Option 1</option>
            </optgroup>
          </select>
        </label>
      </li>
    </ol>
  </fieldset>
  <fieldset>
    <legend>This is another fieldset</legend>
    <ol>
      <li>
        <label>
          <input type="radio" name="radio">
          This is a radio input.
        </label>
      </li>
      <li>
        <label>
          <input type="radio" name="radio">
          This is a radio input.
        </label>
      </li>
    </ol>
  </fieldset>
  <fieldset>
    <legend>This is yet another fieldset</legend>
    <ul>
      <li>
        <label>
          <input type="checkbox" name="checkbox">
          This is a checkbox input.
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" name="checkbox">
          This is a checkbox input.
        </label>
      </li>
    </ol>
  </fieldset>
  <p>
    <input name="file-upload" type="file">
  </p>
  <p>
    <button>Button</button>
  </p>
</form>

On This Page

Get Started

Page Structure

Accessibility

Internationalization

Quotation Marks

Right to Left

Vertical Writing Mode

Navigation

Demo

Code Snippet

Main Article Content

Banner

Demo

Code Snippet

Drop Cap

Demo

Code Snippet

Abbreviation

Demo

Code Snippet

Summary Heading

Demo

H2 summary heading text

H3 summary heading text

H4 summary heading text

H5 summary heading text

H6 summary heading text

Code Snippet

Common Elements

Demo

H2 heading text

H3 heading text

H4 heading text

H5 heading text

H6 heading text

Form

Demo

Code Snippet