Just Another Style Guide


Welcome to "Just Another Style Guide" or How To Format Your GoComics Comments.

 Contents
  Text Formatting
    Fonts
  Page Formatting
    Line Break
    Horizontal Lines
    Indent Text
    Center Text
  Links
    Images
    Links to Other Pages
 
Here's a quick refresher in text formatting
Note that all the tags are used in pairs (except <hr>, <br> and <img src=…>). HTML tags are enclosed in angled brackets with an opening tag and closing tag. Shortcut keys use the same character to open and close.

Text Formatting

Attribute (HTML tag, Shortcut key)

Bold (b, *)
What you type:  This is *Bold text*
What we see: This is Bold text

What you type: Howdy <b>S</b>tel<b>B</b>el 
What we see: Howdy StelBel

Italic (I, _)
What you type:  _Howdy_ 
What we see: Howdy 

A note about shortcut keys (*, _, -, +,^ ,~,%). They only work with whole words or phrases. So to emphasize character(s) within a word you must the HTML tag. (see Bold examples above)

Subscript (sub, ~)
What you type:  H<sub>2</sub>SO<sub>4</sub>
What we see: H2SO4

Superscript (sup, ^)
What you type:  C<sup>3</sup>I
What we see: C3I

Underline or Insert (ins, +)
What you type:  This why we +love+ fall
What we see: This why we love fall

Strikethrough or Delete (del, - )
What you type:  This is why we -hate- love fall
What we see: This why we hate love fall

Small Text (small)
What you type:  Hey, <small>Let's see some small text</small>
What we see: Hey, Let's see some small text

Big Text (big)
What you type:  Another <big>big</big> idea
What we see: Another big idea

Tags can be combined for more effects.
What you type: *<big>S</big>tel<big>B</big>el*
What we see: StelBel

What you type: 

<big><big><big>f</big>f</big>f</big>f<small>f<small>f<small>fff</small>f</small>f</small>f<big>f<big>f<big>f<big>f<big>f</big>f</big>f</big>f</big>
What we see: 

ffffffffffffffffffff


Fonts


Color (no longer supported)
You can set the color of text using the Color attribute of the font tag (<font color='color-value'> </font>). Color-value can be in the form color-name or color-code (hex)
See Supported Color Names

You type:
<font color='red'>Some text</font>
We see:
Some text
Face (no longer supported)
You can change the font using the Face attribute (<font face="font-name"> </font>). 
You type:
<font face="Trebuchet">Trebuchet font</font>
We see:
Trebuchet font

Note: Not all of the fonts on your computer are avaibable on other platforms (Computer/Browsers) so another browser may use a default font such as Times Roman.


Page Formatting

Line Break

<br> This element forces a line break in the document. Repeating BR elements may (or may not) force more line breaks in your document.

 

Horizontal Lines:

To separate parts of a comment you can insert a horizontal line or rule (<hr>). There are several attributes you can add to the <hr> tag. 

Width
You type: 
<hr width='80'>
<hr width='80%'>
<hr width='50%'>
We see:



Color (no longer supported)
Color can be in the form color-name or color-code (hex)
See Supported Color Names

You type:
<hr width='80' color='red'>
We see:


Align (no longer supported)
Left, Right  Center
You type:
<hr width='80' align='right'>
We see:


Size (no longer supported)
Line thickness in pixels
You type:
<hr width='80' align='right' size='10'>
We see:

For a solid line use either the noshade or the color attribute.
You type:
<hr width='80' align='right' size='10' noshade=''>
We see:

You type:
<hr width='80' align='right' size='10' color='blue'>
We see:

Indent Text
To indent text from both the left and the right use <blockquote></blockquote> tag. This is useful when quoting another commentor.

 You type:

<blockquote> But, I think that since I did -stumble across- discover the “exclamation point one”, it should be heretofore known as *The StelBel Sanction* (soon to be a major motion picture…)! </blockquote><hr width='80%'>

We See:
But, I think that since I did stumble across discover the “exclamation point one”, it should be heretofore known as The StelBel Sanction (soon to be a major motion picture…)!

You can add emphasis by adding a horizontal rule. <hr width='80%'> as I did above.
For even more indentation you can enclose blockquotes within blockquotes.



Center Text (no longer supported)
To center text in the comment box use <center></center> tag.

You type:

 <center>X
XXX
XXXXX</center>

We see: 


X
XXX
XXXXX


Links

Images
Images can added to your comments using the Image tag (<img src="URL" width="value">). There is no closing tag

Copy the model:

<img src="URL" width="350">

Replace the letters URL with the URL or address of the image. Be sure that the URL is enclosed in quotes.

The Width value of 350 is used because it fits nicely in the comment box at GoComics. Sometimes for clarity a larger value may be needed. please use the larger values sparingly as very large images tend to annoy readers and may increase download time to mobile devices. For small images like emoticons the Width attribute may be omitted.

For emoticons and other small images you can use the shortcut !URL!, that is simple enclose the URL in exclamation points.



Links to other pages
To include a link to another page such as a YouTube video use the href attribute in the anchor tag (<a href='URL'>Link</a>).

Copy the model:

<a href="URL">Link</a>

Replace the letters URL with the URL or address of the web page. Be sure that the URL is enclosed in quotes.
The word Link may be replaced with more descriptive text, such as a song title.

Note: Should the image or page link fail and part or all of the code appears in the comment box, do not copy and try to correct the code. When the code fails GoComics or the browser will replace the straight quotes (typewriter quotes)  you entered with Smart quote (curly quotes). You then have to make sure you replace all the quotes or the code will fail yet again.

Note: You may use an Apostrophe as a single quote however when you submit the post they automatically be replaced with typewriter quotes  (double quotes).
Subscribe to: Posts (Atom)