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
; setclass="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
andVERTICAL
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 :
- First item
- 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>
ofclass="FOOTNOTE"
, and then include the note inside the span ( preferably, at the end ) withclass="NOTE"
, like this.A footnote. Setting atabindex
of0
on the footnote is recommended. BIBLIOGRAPHY
- Formats a
<ol>
or<ul>
list as a bibliography. Put annotations inside of<p>
tags, like follows :-
Kyebego. News Style. https://style.u2764.com/news/.
A very cool style.
-
Kyebego. News Style. https://style.u2764.com/news/.
The above aside, just write semantic HTML and everything should turn out OK.