Text Formatting for Dummies ;-)

Posted 2008/12/21 19:16:48
Read all 218 opinions

A Truly Frequently Asked Question!

Q. How do I add formatting to my comments, blogs and polls?

A. SodaHead allows limited HTML markup in your content on the site. For those of you who aren't familiar with making web pages, that means you put special tags before and after text to make it look different. I'll try to make it really easy for you to understand, so you can make your text really stand out.

BASICS

All of the formatting you want to do has a basic syntax to it. The text that you want to format has to be wrapped in a start and end "tag" of the correct type. The start and end tags are the same, but the end tag has a / before the keyword. For example, to show underlined text, you type in at the start of the text, and at the end. So underlined text becomes underlined text.

AVAILABLE TAGS

Bold Text

Use the and tags.

Example: bold text becomes bold text

Underlined Text

Use the and tags.

Example: underlined text becomes underlined text

Superscript

Use the and tags.

Example: 1st becomes 1^st

Subscript

Use the and tags

Example: H2O becomes H₂O

Monospace Font

Use the <pre> and </pre> tags. Note: A line break will be inserted before and after these tags when used, and all line breaks will be shown as double spaced text.

Example: <pre>This is preformatted,
monospaced font
text</pre>

becomes

This is preformatted,
monospaced font
text

COMBINING TAGS

Tags can be combined to achieve different effects, like bold and underlined text (see the section headers of this FAQ). The important thing to remember when combining tags is that they should be nested and closed in the REVERSE order in which you opened them.

That means that if you start with a tag, then a tag, then you should end in the opposite order - closing with the tag, then the tag.

Example: bold underlined text becomes bold underlined text

COLOR, ITALICS, STRIKETHROUGH

Sorry, SodaHead does not support these tags at this time :(

MANUAL LINKS

Automatic links are taken care of for you by SodaHead - just put in a link like http://www.google.com and SH converts it to a link for you.

What about when you want to make regular text a link? That's easy, too! Then you want to use what is known in the "trade" as an anchor tag. Here's how you do it:

<a href="http://www.google.com">Text to display</a>

becomes

Text to display

Just make sure that what you put after the href= is inside double quotes, and that it starts with http://. Otherwise your browser will try to open it as a file on the Sodahead.com website, which obviously wouldn't be what you intended.

Note: SodaHead will STILL modify the link you put in, to make the link open in a new window or tab, but they will maintain whatever text you put in for the link and the address that you put in.

SPECIAL CHARACTERS

THIS ONLY WORKS IN POLLS AND COMMENTS. YOU CANNOT CURRENTLY USE SPECIAL CHARACTERS IN BLOGS POSTINGS DUE TO A BUG ON THE SH SITE!

Special characters can be added to your text by using the correct encoding combination, otherwise known as an HTML Entity.

Some of these you may already be familiar with and have easy to remember names. For example, the Copyright symbol © can be displayed as ©. A heart symbol, ♥, is displayed with &hearts;. The trademark symbol ™ is dislayed with ™. Others don't have a name and only use a number that represents the ASCII code of the character, like language specific characters. If you want a complete list, do a Google search for "HTML Entities".

Here is a short list of some commonly used characters that may be helpful. Note that these are case senstive.


| Char     | Displays As
| &iexcl;  | ¡
| &iquest; | ¿
| &cent;   | ¢
| &pound;  | £
| &yen;    | ¥
| &copy;   | ©
| &laquo;  | «
| &raquo;  | »
| &reg;    | ®
| &deg;    | °
| &sup1;   | ¹
| &sup2;   | ²
| &sup3;   | ³
| &micro;  | µ
| &para;   | ¶
| &frac14; | ¼
| &frac12; | ½
| &frac34; | ¾
| &bull;   | •
| &larr;   | ←
| &uarr;   | ↑
| &rarr;   | →
| &darr;   | ↓
| &harr;   | ↔
| &crarr;  | ↵
| &lArr;   | ⇐
| &uArr;   | ⇑
| &rArr;   | ⇒
| &dArr;   | ⇓
| &hArr;   | ⇔
| &infin;  | ∞
| &sum;    | ∑
| &pi;     | π
| &spades; | ♠
| &clubs;  | ♣
| &diams;  | ♦
| &hearts; | ♥
| &dagger; | †
| &Dagger; | ‡

(don't ask how I got it to work in here - it would take WAY too long to explain :>)

You can find a more complete (but not comprehensive) list online at http://www.intuitive.com/coolweb/entities.html

MORE HINTS?

That's all I can think of. Do you have more hints and helpful ideas for formatting text and making your blogs, polls and comments look better? Share them!

+132

êļļĴáŸê 2009/01/12 04:29:26 (edited)

+6
A long time ago, used to know how to HTML format. But most sites now do it all for you, so I forgot all this stuff. Thanks for the refresher!

See? didn't have to do a thing! <&hearts;>
>> See Replies

Resp 2013/01/21 03:32:25 (edited)

☻☼

+++++++++++++#######+++++++++... +++++++++++############++++++... ++++++++++###############++++... +++++++++#####++++++++###++++... ++++++++###++++++++++++###+++... ++++++++##++++++++++++++###++... +++++++##+++++++++++++++####+... +++++++#+++++++++++++++++###+... ++++++##+++++++++++++++++####... ++++++#+++++++++++++++##++###... +++++##++++++++++++##########... +++++##++++++++#+++##+####+##... +++++##++++#####+++#++#####+#... +++++##+++##+###+++#+++****++... +++++##+++++#++#+++#+++++++++... +++++##+++++++++++++#+++++++#... +++++#+++++++++++++++#++++++#... ++++++#+++++++++++++#++++++##... ++++++##+++++++++++####++++##... ++++++++++++++++++####++++++#... +++++##+#+++++++++++++++++++#... +++++#++++++++++++++##++++++#... +++++#++++++++++++######++++#... +++++#+#+#+++++++##+++#+++++#... ++++++#++#++++++##+++###++++#... +++++++#++++++++++++++++++###... +++++++++#+++++++++++#++++###... +++++++++++#+++++++++++++####... ++++++++++++#+++++++++++#####... +++++++++++++#++++++++#######... ++++++++++++++##++++########+... +++++++++++++#++###########++... +++++++++++###+++#########++#... ++++++++#######++++######+++#... ++++++#########+++++++##++++#... +++++##########+++++###++++##... +++############+++++#++++++##... ++##############++++#++++++##... ++##############++++++++++###...

reply
COMALite J 2013/01/20 23:42:18 (edited)
+1
Some Other Tags that can be Used Here:
Like that nifty box effect? It’s done with a combination of <hr> to produce the horizontal rules (note: there is no ending tag!) and <blockquote> to indent lines of text with a nifty vertical line on the left.

You can even nest block quotes
inside of other block quotes
inside of even more block quotes
however deep you want
(within reason, of course)!

When quoting a portion of a post to which I’m Replying, I often use this technique in conjunction with (which on SodaHead visually makes the text smaller without actually subscripting it [which would move its baseline below the baseline of the surrounding text!] — in other words, it does what is supposed to do, but SodaHead strips that tag out, as it does so many others) to visually set off the quoted text, rather than simply enclosing it in “quotation marks.”

The effect looks like this:
_{This is what text quoted from another post, to which I’m Replying, would look like, using this technique.}
Then, my Reply to that particular quoted text can go right after that, like so!

Basically, precede the quoted text with: “<hr> <blockquote>” (without the spaces) and end it with: “</blockquote> <hr>” (again no spaces, and also note no slash in the closing <hr>, as it’s not a closing HTML tag, but a separate Horizontal Rule!).
reply
COMALite J 2013/01/20 23:16:32 (edited)
This is a test of a way to do monospaced with word-wrap and other tags combined, which <pre> would normally not allow. Let’s see if it works.

(Note: the way to do that is with <tt>monospaced text goes here</tt>.)
```
In comparison, this text was done with the <pre> tag.
```
Note that <tt> also produces smaller monospaced text than <pre> does.
reply
Louisa - Enemy of the State 2012/04/20 13:25:58

Is there a way to determine where these will work and where they won't? Like, I tried in WordPad and it didn't work. Is it only for online?

reply
Louisa - Enemy of the State 2012/02/18 19:37:48 (edited)

+1
<&hearts;>

I don't get it. Why didn't I get a heart?

reply
Crypt_H... to Louisa ... 2012/04/20 04:41:23 (edited)

+1
♥

You don't need the "<" and ">" for this. Just type in the word &heart;s (make sure to move the semicolon to the end ^_^)

reply
Louisa ... to Crypt_H... 2012/04/20 13:18:06 (edited)

+1
♥

It worked! Thanks!

reply
COMALite J to Louisa ... 2013/01/20 23:24:57 (edited)

The HTML Named and Numeric Entities used for entering non-ASCII characters only work when initially creating a Reply to another post. They do not work when you Edit any Post of yours (even a Reply), nor when creating a Top-Level post such as the one you posted (this includes the Answer Post to a Poll thread).

You can use the standard HTML Named Entities that are used to allow characters that would normally be syntax, in any comment, including when Editing. But not the ones shown above for fancy characters.

reply
I NEED A HORSE 2011/11/06 16:28:04
Ken 2011/10/14 05:23:51

+1
Thank you very much! 1^1/2

reply
COMALite J to Ken 2013/01/21 00:00:01

+1
The proper way to get the one-half fraction is with “½” — you can either type it directly if you know how (in Windows: hold down the [^Alt ] key and, while still holding it down, press and release, one at a time, in sequence, on the numeric keypad, the following keys: [0 _{_Ins} ], [1 _{_End} ], [8 _{_↑} ], and [9 _{_PgUp} ], then release the [^Alt ] key — that’s what I just did there) copy it from Character Map or Mac OS X Character Viewer, or, onlywhen initially creating a Reply to someone else’s Post (this does not work when creating your own Top-Level post [including an Answer Post in a Poll thread] nor when Editing any post after its initial creation), use the HTML Named Entity “½” (“fraction 1/2”) or the HTML Numeric Entities “&#0178” (note that this matches the code when typing it in on the numeric keypad under Windows — note also that the “#” number sign is required! This is what makes it a Numeric Entity!) for Decimal, or the equivalent “½” for Hexadecimal (note the “#x” — this is what tells it to be a Hexadecimal Numeric Entity).

reply
cindy 2011/10/11 20:22:51

+2
thankyou

reply
Resp 2011/10/10 17:56:52 (edited)
COMALite J to Resp 2013/01/21 00:01:16

No CSS at all is supported in posts.

reply
Queen Tamara/Tamar Mepe 2011/10/10 17:10:40

+1
Ooooh thanks for the help!

reply
l8rthen 2011/10/10 13:50:25

+1
Cool! Tx for sharing!

reply
FluffyCupcakespanker~PWCM~JLA 2011/10/10 13:31:53

spiffy thanks

reply
Jack Sprat 2011/10/09 21:39:50

Hey, thanks a bunch

reply
Andrew 2011/10/09 03:45:51

+1
thanx for sharing it really helped.

reply
Centurion~PWCM~JLA 2011/10/08 19:39:22

+1
ThankYou.

I'll look to put that to use.

reply