This post includes the Typography test unit content and common blocks.
H1 — This is the largest header, and it’s supposed to look great!
Palo santo pop-up health goth 90’s. Kombucha palo santo skateboard normcore pug, subway tile pickled artisan pok pok austin quinoa sustainable chartreuse asymmetrical. Bespoke pour-over gentrify pitchfork, street art thundercats paleo locavore lumbersexual salvia tumblr.
H2 Heading
Ethical coloring book stumptown taxidermy hell of etsy williamsburg. Keytar church-key beard edison bulb jean shorts prism deep v man bun cornhole scenester. Tote bag post-ironic XOXO paleo master cleanse hell of shabby chic man bun roof party, gochujang VHS.
H3 Heading
Waistcoat coloring book succulents air plant. Woke chia church-key tofu seitan tumblr sustainable umami unicorn pug coloring book. Hot chicken lo-fi fam, semiotics listicle banh mi enamel pin knausgaard retro gentrify succulents four loko 3 wolf moon microdosing.
H4 Heading
Sriracha four dollar toast master cleanse, readymade stumptown before they sold out tumeric adaptogen aesthetic. Hashtag cornhole mustache swag. Marfa cloud bread mustache unicorn umami, 90’s keytar literally chillwave tumblr. Taiyaki trust fund organic vape mlkshk, food truck iceland.
H5 Heading
Four loko messenger bag locavore, wolf artisan YOLO pour-over. Chillwave roof party 3 wolf moon messenger bag man braid typewriter small batch. Cliche everyday carry vegan occupy chambray, heirloom artisan sartorial adaptogen godard fixie kinfolk aesthetic praxis four dollar toast.
H6 Heading
Cornhole quinoa bitters, pabst enamel pin etsy master cleanse everyday carry swag knausgaard four dollar toast seitan meditation ramps synth. Locavore hot chicken cray portland, gochujang chartreuse brooklyn truffaut selvage sriracha. Hashtag cornhole mustache swag.
Paragraph
This paragraph is left aligned ← The paragraph block is the default block type. It should not have any alignment of any kind. It should just flow like you would normally expect. Nothing fancy. Just straight up text, free flowing, with love.
Right Aligned / Italic
This italic paragraph is right aligned. → Cornhole quinoa bitters, pabst enamel pin etsy master cleanse everyday carry swag knausgaard four dollar toast seitan meditation ramps synth. Locavore hot chicken cray portland, gochujang chartreuse brooklyn truffaut selvage sriracha. Hashtag cornhole mustache swag.
Dropcap
Neither of these paragraphs care about politics, but this one is bold, medium sized and has a drop cap. Chillwave roof party 3 wolf moon messenger bag man braid typewriter small batch. Cliche everyday carry vegan occupy chambray, heirloom artisan sartorial adaptogen godard fixie kinfolk aesthetic praxis four dollar toast.
Centered
This paragraph is centered — Readymade stumptown before they sold out tumeric adaptogen aesthetic. Hashtag cornhole mustache swag. Marfa cloud bread mustache unicorn umami, 90’s keytar literally chillwave Tumblr Taiyaki trust fund organic vape mlkshk, food truck iceland. Bespoke try-hard craft beer cliche.
Size: Small
This paragraph prefers Jazz over Justin Timberlake. It also uses the small font size. Cornhole quinoa bitters, pabst enamel pin etsy master cleanse everyday carry swag knausgaard four dollar toast seitan meditation ramps synth. Locavore hot chicken cray portland, gochujang chartreuse brooklyn truffaut selvage sriracha.
Size: Large
This paragraph has something important to say: It has a large font size, which defaults to 36px.
Size: Extra large
XL Text Size ― Locavore hot chicken wings cray portland, gochujang chartreuse brooklyn truffaut selvage sriracha.
This paragraph is colorful, with a red background and white text (maybe). Colored blocks should have a high enough contrast, so that the text is readable.
This bit shows strike-through text.
This is an example of a link.
This tag shows bold text.
Here is an inline code example.
Ordered List (Nested)
- List item one -start at 8
- List item one
- List item one -reversed attribute
- List item two
- List item three
- List item four
- List item two
- List item three
- List item four
- List item one
- List item two
- List item three
- List item four
Ordered – Unordered – Ordered
- ordered item
- ordered item
- unordered
- unordered
- ordered item
- ordered item
- ordered item
- ordered item
Ordered – Unordered – Unordered
- ordered item
- ordered item
- unordered
- unordered
- unordered item
- unordered item
- ordered item
- ordered item
Unordered Lists (Nested)
- List item one
- List item one
- List item one
- List item two
- List item three
- List item four
- List item two
- List item three
- List item four
- List item one
- List item two
- List item three
- List item four
Unordered – Ordered – Unordered
- unordered item
- unordered item
- ordered
- ordered
- unordered item
- unordered item
- unordered item
- unordered item
Unordered – Unordered – Ordered
- unordered item
- unordered item
- unordered
- unordered
- ordered item
- ordered item
- unordered item
- unordered item
Quote
The quote block has two styles, regular:
I went to a place to eat. It said ‘breakfast at any time.’ So I ordered French Toast during the Renaissance.
Steven Wright Jokes
and large:
I was Caesarean born. Can’t really tell, although whenever I leave a house I go through the window.
Steven Wright Jokes
The quote blocks themselves have no alignments but the text can be aligned, bold, italic, and linked:
I’m writing a book. I have the page numbers done; now I just have to fill in the rest.
Steven Wright Jokes
Pullquote
In addition to the quote block, we also have the pull quote, with a regular and a solid color style.
You can change the color of the border and the text with the regular style:
Why is it a penny for your thoughts but you have to put your two cents in? Somebody’s making a penny.
Steven Wright Jokes
Or change the background color and text color with the solid color style:
I took lessons in bicycle riding. But I could only afford half of them. Now I can ride a unicycle.
Steven Wright Jokes
Audio
File
The file block has a setting that lets us show or hide a download button with editable text:
Video
Video blocks have settings for showing and hiding the playback controls. Use autoplay and playback controls responsibly.
The video block below is muted and has a poster image that displays before the video starts:
Preformatted
Add text that respects your spacing and tabs, and also allows styling.
Robert Frost
Two roads diverged in a yellow wood,
And sorry I could not travel both (\_/)
And be one traveler, long I stood (='.'=)
And looked down one as far as I could (")_(")
To where it bent in the undergrowth;
Then took the other, as just as fair,
And having perhaps the better claim, |\_/|
Because it was grassy and wanted wear; / @ @ \
Though as for that the passing there ( > º < )
Had worn them really about the same, `>>x<<´
/ O \
And both that morning equally lay
In leaves no step had trodden black.
Oh, I kept the first for another day!
Yet knowing how way leads on to way,
I doubted if I should ever come back.
I shall be telling this with a sigh
Somewhere ages and ages hence:
Two roads diverged in a wood, and I—
I took the one less traveled by,
And that has made all the difference.
and here's a line of some really, really, really, really long text, just to see how it is handled and to find out how it overflows;
Tables
Create structured content in rows and columns to display information.
| Employee | Salary | |
|---|---|---|
| John Doe | $1 | Because that’s all Steve Jobs needed for a salary. |
| Jane Doe | $100K | For all the blogging she does. |
| Fred Bloggs | $100M | Pictures are worth a thousand words, right? So Jane x 1,000. |
| Jane Bloggs | $100B | With hair like that?! Enough said… |
Headings
Header one
Header two
Header three
Header four
Header five
Header six
Blockquotes
Single line blockquote:
Multi line blockquote with a cite reference:
multiple contributors – MDN HTML element reference – blockquote
Tables
Definition Lists
Unordered Lists (Nested)
Ordered List (Nested)
HTML Tags
These supported tags come from the WordPress.com code FAQ.
Address Tag
1 Infinite LoopCupertino, CA 95014
United States
Anchor Tag (aka. Link)
This is an example of a link.
Abbreviation Tag
The abbreviation srsly stands for “seriously”.
Acronym Tag (deprecated in HTML5)
The acronym ftw stands for “for the win”.
Big Tag (deprecated in HTML5)
These tests are a big deal, but this tag is no longer supported in HTML5.
Cite Tag
“Code is poetry.” —Automattic
Code Tag
This tag styles blocks of code.
.post-title {margin: 0 0 5px;
font-weight: bold;
font-size: 38px;
line-height: 1.2;
and here's a line of some really, really, really, really long text, just to see how it is handled and to find out how it overflows;
}
You will learn later on in these tests that
word-wrap: break-word;will be your best friend.Delete Tag
This tag will let you
strike out text, but this tag is recommended supported in HTML5 (use the<s>instead).Emphasize Tag
The emphasize tag should italicize text.
Horizontal Rule Tag
This sentence is following a
<hr />tag.Insert Tag
This tag should denote inserted text.
Keyboard Tag
This scarcely known tag emulates keyboard text, which is usually styled like the
<code>tag.Preformatted Tag
This tag is for preserving whitespace as typed, such as in poetry or ASCII art.
The Road Not Taken
Robert Frost Two roads diverged in a yellow wood, And sorry I could not travel both (\_/) And be one traveler, long I stood (='.'=) And looked down one as far as I could (")_(") To where it bent in the undergrowth; Then took the other, as just as fair, And having perhaps the better claim, |\_/| Because it was grassy and wanted wear; / @ @ \ Though as for that the passing there ( > º < ) Had worn them really about the same, `>>x<<´ / O \ And both that morning equally lay In leaves no step had trodden black. Oh, I kept the first for another day! Yet knowing how way leads on to way, I doubted if I should ever come back. I shall be telling this with a sigh Somewhere ages and ages hence: Two roads diverged in a wood, and I— I took the one less traveled by, And that has made all the difference. and here's a line of some really, really, really, really long text, just to see how it is handled and to find out how it overflows;Quote Tag for short, inline quotes
–Steve Ballmer
Subscript Tag
Getting our science styling on with H2O, which should push the “2” down.
Superscript Tag
Still sticking with science and Albert Einstein’s E = MC2, which should lift the 2 up.
This user it trying to be anonymous.
They used a fake email, so there should be no Gravatar associated with it.
They did not speify a website, so there should be no link to it in the comment.
Comments? I love comments!
These tests are amazing!
Author Comment.
Comment Depth 01
Comment Depth 02
Comment Depth 03
Comment Depth 04
Comment Depth 05
Also an author comment.
Comment Depth 06 has some more text than some of the other comments on this post.
Comment Depth 07 has a little bit.
Comment Depth 08
Comment Depth 09 is way nested, but there are a lot of sites with very nested comments.
Comment Depth 10
Also an author comment.
Image comment.
If the image imports…
We are totally going to blog about these tests Σίγουρα θα σχολιάσουμε τα τεστς!
We use these tests all the time! Killer stuff!
Thanks for all the comments, everyone!