TEXT STYLING TRICKS FOR TEXT FIELDS AND TEXT BOXES - Aug 4th, 2010
|
The concept of WYSIWYG fields can be pretty scary for designers who want to give their clients a bit of creative flexibility but are afraid that their designs will be trashed on a regular basis. To balance these worlds, I’ve used a combination of Text Fields and Text Boxes and given some of my clients the following information in their users manual. I realize that you all know this already but I thought that it might be nice to have it written out so that you can cut and paste the information. Add your own favorites to the list.
“There is one caveat: They need to look at the result and make sure that all the results are what they expected.
With that, here’s what I tell them:
STARTING A NEW LINE OR PARAGRAPH You may have already discovered that if you press the enter key when typing in a multi line “text box”, you’ll start a new line, and that if you want a new paragraph that you need to press enter twice.
You may also have discovered that this technique doesn’t work in “text fields” with only one visible line of text. If you want to start a new line in a single line “text field”, you’ll need to insert one of those special characters, the line break. If for some reason you want a new paragraph, just insert a <p> instead. This works for all text fields including image titles and captions.
SPECIAL CHARACTERS There are many special characters that can be inserted into your text, including those found in other languages. The codes for all special characters must have a leading ampersand (the & sign) and a trailing semi-colon. A few of the more common are:
Character - Code © - © ® - ®
Insert the code where you want the special character to be inserted, just don’t forget to add the leading “&” and the trailing “;”.
Here’s a link to a much more comprehensive list.
http://www.htmlcodetutorial.com/characterentities_famsupp_69.html
STYLING YOUR TEXT First a short explanation of how web browsers interpret special codes or “markup” that you insert in your text.
Most markup “tags” have two parts, an opening tag, that tells the browser where a specific effect is supposed to start, and a closing tag that tells the browser where to end the specific effect.
Here’s an example: If you use the <strong> opening tag and then insert the </strong> closing tag, your web page would display: “If you use the opening tag and then insert the closing tag”. Bear in mind that tags do not create extra spaces between letters.
Here are few of the more useful tags:
Effect - Opening tag\Closing tag Bold Text - <strong></strong> Underline text - <u></u> Italic text - <em></em> Superscript (surround © and ® with this one) - <sup></sup> Bulleted list (must be placed surrounding each item you want in the list. A “return” is automatically inserted after each item.) - <li></li>
One that’s more complex but can be very useful is the one that inserts a hyperlink or “link” in the text. Here’s the format:
<a href=”http://www.thewebsite.com/thepage.php”>the link text </a> (Don’t forget the quotes around the target web page, and to test the finished link on the actual web page)
There’s also some useful single tag markup that can be used to style text. Examples are:
The horizontal line <hr>, which can be modified to specify it’s length and color. So, <hr width="300" color="#99945e"/> would render a horizontal line that is 300 pixels wide and muddy green in color.
The line break that we mentioned earlier which starts a new line. The paragraph <p> which starts a new paragraph.
Using these tags can drastically change the look of the web page, so make sure to check how they look and adjust accordingly.
|
The materials on this web site have been created for use with CMS Builder content management software. CMS Builder software is published and licensed for use by InteractiveTools.com. Please contact
Interactive Tools for information on the downloading of the software or the purchasing of licenses.