Text Formatting

1. Headings:

Header one

Header two

Header three

Header four

Header five
Header six

2. List Types

Definition List

Definition List Title
This is a definition list division.
Definition
An exact statement or description of the nature, scope, or meaning of something: our definition of what constitutes poetry.

Ordered List

  1. List Item 1
  2. List Item 2
    1. Nested list item A
    2. Nested list item B
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
    • Nested list item A
    • Nested list item B
  • List Item 3

  • List Item 1

  • List Item 2
    • Nested list item A
    • Nested list item B
  • List Item 3

3. Blockquotes

Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote:

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. - Biron Themes


4. HTML Tags

Code

Code can be presented inline, like <?php bloginfo('stylesheet_url'); ?>, or within a <pre> block. Because we have more specific typographic needs for code, we'll specify Consolas and Monaco ahead of the browser-defined monospace font.

#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}

Here are a few examples of code highlighting:

HTML markup:

<!DOCTYPE html>  
<html>  
<body>

<h2>The title attribute</h2>

<p title="I'm a tooltip">  
Mouse over this paragraph, to display the title attribute as a tooltip.  
</p>

</body>  
</html>  

CSS code:

body {  
   background-color: #FFFFF0; 
   font-family: Arial, Verdana, sans-serif; 
   font-size: 18px; 
   color: #00008B;
}

Javascript code:

var x, y, z;  
x = 5;  
y = 6;  
z = x + y;  
document.getElementById("demo").innerHTML = z;  

Text-level semantics

The a element example
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The var element example
The u element example


5. Tables

Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3

6. Image Sizing

To demonstrate the responsiveness and flow of the various image possibilities, we will test images with various sizes.

This one is 580x300:

580x300

The rest of this paragraph is filler for the sake of seeing the how a 150×150 image will flow.

150x150

The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. Again, letting the do it’s thing. Mission accomplished!

And now for something completely different: a massively large image.

1200wide

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

And now we’re going to shift things to something in the middle. Just look at him there… Hey guy! Way to rock that 300x200 size. Not to big, not to small. I don’t care what the tiny image says, you look great. Don’t let anyone else tell you differently.

300x200

And that’s a wrap, yo! You survived the tumultuous waters of image sizes. Image styling achievement unlocked!


7. Video Embeds

This should be a video from Youtube:

We suggest FitVids.js for making videos responsive.


8. Special Characters

Putting special characters in posts should have no adverse effect on the layout or functionality, assuming they are properly escaped with \ for Markdown.

Latin Character Tests

This is a test to see if the fonts used in this theme support basic Latin characters.

! “ # $ % & ‘ ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; > = <
? @ A B C D E F G H I J K L M N O P Q R
S T U V W X Y Z [
] ^ _ ` a b c d e f g h i j k l m n o p
q r s t u v w x y z
{ | } ~

For reference:

!    “   #   $  %   &   ‘   (   )   *
+    ,   -   .   /   0   1   2   3   4
5    6   7   8   9   :   ;   >   =   <  
?    @   A   B   C   D   E   F   G   H
I    J   K   L   M   N   O   P   Q   R  
S    T   U   V   W   X   Y   Z   [  
]    ^   _   `   a   b   c   d   e   f
g    h   i   j   k   l   m   n   o   p  
q    r   s   t   u   v   w   x   y   z  
{    |   }   ~