Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
Simple Text Tricks
As I wrote in the link from the tutorial index to here, these aren't really "tricks" per se. They're slightly creative uses of text formatting to effectively get someone to pay attention. So here are a few little odds and ends you might find useful. If not, send me a dollar and I'll let it slide this time, but don't think you'll get off that easy every time.
Underline Colors
Did you know you can have text in one color and underline that text with another color?Attention! In case you didn't notice, I just did that with the first word of this paragraph. With this trick, the text can be any color and the underline can be any color.
With the deprecated HTML underline tag, the underline was always the same color as the text. With the CSS text decoration property the underline also renders in the font color. However, using the CSS border-bottom property you can underline text in any color you choose.
This is a handy trick when you want to make sure your "note" gets read. You don't see it much, so it works great for focusing attention where attention may otherwise be drifting away.
Here's how it's done:
border-bottom: 2px solid red;">Attention!</span>
Note: Sorry, there is no additional note. I just wanted to get your attention.
The Long Hyphen
One of the things people asked how I do is get the long hyphen (called an Em Dash) into a page. Just so everyone knows what that is—I just used it to connect the two parts of this sentence.There are two ways to get it into your text. You can use the character entity by typing this in your code:
On a PC you can also press the and hold the Alt key and type "0151" on the numbers pad, then release the alt key. Every font set may not contain the em dash, so test first.
Experts say the em dash should be used sparingly in formal writing. Bossy little buggers, aren’t they?
In informal writing it can be used in many ways. The most common use may be to introduce a new idea at the end of a sentence. (Example: Bob was dozing off—he didn't realize his boss saw him!) It's also often used like parenthesis. (Example: Two of the band members—Bob and Mary—both had stage fright.)
Used properly there is no space before or after the em dash...in my mind. The "experts" say it doesn't matter as long as you're consitent with it. If you need some examples of usage just keep an eye out for it on this website—I use it in my writing regularly.
IMAGINATION
Hmm . . . I guess I kind of gave away what this trick is about before you read a word. Oh well.
When it comes to website design, your best asset is your imagination. With CSS, there are many ways to use your imagination to capture your visitors attention. Here's how I did that heading:
<h3 style=" font-weight: bold;">
<span style="font-size: 16px; color: #fc580a;">I</span>
<span style="font-size: 18px; color: #ea0006;">M</span>
<span style="font-size: 20px; color: #c100ea;">A</span>
<span style="font-size: 22px; color: #9400b3;">G</span>
<span style="font-size: 24px; color: #6f28ff;">I</span>
<span style="font-size: 26px; color: #0606ff;">N</span>
<span style="font-size: 24px; color: #6f28ff;">A</span>
<span style="font-size: 22px; color: #9400b3;">T</span>
<span style="font-size: 20px; color: #c100ea;">I</span>
<span style="font-size: 18px; color: #ea0006;">O</span>
<span style="font-size: 16px; color: #fc580a;">N</span></h3>
Special Emphasis
Sometimes when we’re writing we want to stress a word or sentence fragment, but bold or italic doesn’t quite give us the emphasis we’re looking for, and maybe combining bold and italic type still isn’t doesn’t quite highlight the point we want to emphasize.You can use inline CSS to really make a phrase pop out at your readers. Take care not to overuse it though. When too much is emphasized, nothing is emphasized.
Here’s how I did that:
font-weight: bold;
font-style: italic;">really make a phrase pop out</span>
Visual Interest
Sometimes just varying how we do things can add visual interest to something we’re writing and increase the emphasis at the same time. For example, if I’m in an especially good mood while I’m writing a blog post, I might want to say:I’m feeling on top of the world today!
I used superscript to raise the text height. Superscript is usually rendered in smaller text so I also used CSS to increase the font size.
On the other hand, I could feel down in the dumps and want to convey that visually, so I used subscript. The smaller font size seems appropriate there. Here’s how those two items were accomplished:
<sub>down in the dumps</sub>
Feeling Crazy?
If you’re really feeling crazy you might want to make a few words or sentences run backwards.You wouldn’t do that, would you?
Potential uses include:
- To print the answer to a riddle without making it easy to “accidentally” get a clue.
- To print the answers to quiz questions without making the answers obvious.
- Just to “mess” with people. 😉
- And, of course, some languages are read from right to left, which is the designed use.
