News-Vertical Style

By Kyebego

Last updated : 

Get it while itʼs hot !

What is it ?

Like News, but about ⑳ times more rad. Unfortunately, this wonʼt work in any browser which doesnʼt support CSS Logical Properties—and really all bets are off for anything which isnʼt Firefox. Are You Punk Enough To Make Your Readers Download A Better Browser ?

News‑Vertical is inspired by the typography of East Asian newsprint, and so it does not use italic or oblique fonts. However, it does expect a wide variety of font weights : 200, 300, 400, 600, 700, 900. I recommend Source Serif Pro for adequate coverage.

I first developed this style in ~2015 and used it for my main homepage around that time.

Usage :

Your page should have the following layout : 

<header>
	<h1>Title</h1>
</header>
<div role="note">
	<!-- Page info (optional) -->
</div>
<main>
	<!-- Page content -->
</main>
<footer>
	<!-- Page footer (optional) -->
</footer>

Or, if you prefer, you can stick everything inside <main> for a more minimal look.

Classes :

HORIZONTAL
VERTICAL
Sets the text direction. The default is VERTICAL ; set class="HORIZONTAL" on the <html> element to change this. Use both classes at the same time for left-to-right vertical writing.
BLOCK
Defines a block. Use this with HORIZONTAL and VERTICAL to insert blocks of text running in a different direction.
TEXT
Defines an inline block, for use in running text. Apply this class to images and SVGs which you want to appear text­‑sized.
INLINE
Defines an inline element. With list elements, this creates an inline list, like the following : 
  1. First item
  2. Second item
PAD-START
PAD-END
Sets the inline start or end margin to auto ; use both to centre content.
ALIGN-START
ALIGN-END
Aligns text to the start or end. Use both to justify text.
TITLE
Use this on <u> to produce a wavy underline.
VERSE
Use this on <p> or <div> to denote a stanza of verse. Line­‑breaks will be preserved.

PARA

Use this on <div> to create a typographical paragraph ( functions like <p> ). You should probably only use this when dealing with inline lists, for example :

This is a paragraph with a list : 

  • A list item
  • Another list item

 …And the paragraph continues.

FOOTNOTE
NOTE
Wrap text which has a footnote with a <span> of class="FOOTNOTE", and then include the note inside the span ( preferably, at the end ) with class="NOTE", like this.A footnote. Setting a tabindex of 0 on the footnote is recommended.
BIBLIOGRAPHY
Formats a <ol> or <ul> list as a bibliography. Put annotations inside of <p> tags, like follows :

The above aside, just write semantic HTML and everything should turn out OK.