Textretty

A simple typography stylesheet for readable content.

Introduction

Textretty is a tiny typography css library. It can be used wherever any readable content is, such as your blog post and a document.

Additionally, textretty provide you with some simple class to construct a page container, which helps you create a single document page (just like the one you are reading) with no extra css.

Get Started

Get the lastest version with git.

$ git clone https://github.com/BigCoke233/textretty.css.git

Or you can just grab the textretty.min.css file in the main branch.

You can also get textretty.css with jsDelivr CDN, this method does not require to install.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/textretty.css/dist/textretty.min.css">

说明：jsDelivr 在中国大陆地区无法访问

Usage

Textretty only works in the element with textretty class.

<head>
    <!-- ...... -->
    <link rel="stylesheet" href="textretty.css">
    <!-- ...... -->
  </head>
  <body>
    <!-- ...... -->
    <article class="textretty">
      <!-- your content goes here -->
    </article>
    <!-- ...... -->
  </body>

To build a single document page as mentioned, you need textretty-container.

<main class="textretty textretty-container">
    <header>
      <h1>Document Title</h1>
      <p>Information like publish date and category.</p>
    </header>
    <article>
      <!-- your content goes here -->
    </article>
    <footer>
      <p>Copyright &copy; 2022 Textretty</p>
    </footer>
  </main>

If you find the container being too wide or slim, replace textretty-container with the ones below.

textretty-container-slim: a slimmer page 700px wide at most.
textretty-container-wide: a wider page 100px wide at most.

It is notable that all the containers have their padding defined as 2em.

Standard

This following table shows every defined html tag that textretty supports and its standard usage. You are supposed to follow them.

Tag Name	Descripiton
h1-h6	Headings
p	Paragraph
strong, b	Text in bold
em, i	Text in italic
del, s	Deleted text
a	Anchor link
img	Image
pre	Code block (should be used with `code` in it)
code	Inline code
kbd	Text on keyboards
ol	Ordered list
ul	Unordered list
li	List item
table	Just table
tr	Rows of table
th	Headings of table
td	Cells of table
thead	The header of a table
tbody	The body content of a table
tfoot	The footer of a table
blockquote	Quotions (block displayed)
hr	Divider / Separator
header	The header of an article/document
footer	The footer of an article/document

Paragraph

Paragraph is defined by . Every  tag is a paragraph. But remember two lines in one  tag is not two paragraph but just to sentences.

<!-- I'm a paragraph -->
  <p>The text in a paragraph.<p>
  
  <!-- I'm just a paragraph but not two -->
  <p>The text in line 1.<br>
  The text in line 2.</p>

You can emphasize some important parts of a paragraph with bold and italic styles.  and  are used for bold text while  and  are used for italic text.

However,  and  mean the text is really important and you're emphasizing it.  and  just make the text bold or italic and don't has certain meanings.

list

Ordered list is constructed with <ol>, <li> is the list items.

I'm a item of the ordered list.
I'm a item of the ordered list.
I'm a item of the ordered list.
1. I'm a item of another ordered list inside the ordered list.
2. I'm a item of another ordered list inside the ordered list.
I'm a item of the ordered list.
I'm a item of the ordered list.

Unordered list is constructed with <ul>, <li> is the list items.

I'm a item of the unordered list.
I'm a item of the unordered list.
I'm a item of the unordered list.
- I'm a item of another unordered list inside the unordered list.
- I'm a item of another unordered list inside the unordered list.
I'm a item of the unordered list.
I'm a item of the unordered list.

Table

Here's the best method to construct a table.

<table>
    <thead>
      <tr>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
      </tr>
      <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
      </tr>
      <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
      </tr>
    </tbody>
  </table>

Image

Ususally, every <img> should be put into a  tag.

<p><img src="example.png"></p>

Or, put it in a <figure> tag so that you can add a caption to it.

<figure>
    <img src="example.png" />
    <figcaption>I'm a caption</figcaption>
  </figure>

Blockquote

When quoting some passages from others, you should put the quoted text into a <blockquote>.

<blockquote>
    <p>I'm the quotation.</p>
  </blockquote>

It will be like this:

If it requires a uniform, it's a worthless endeavor.