I have been exploring ways of making information more visually appealing and more easily accessible.
For example, I wanted to put simple dashed lines under text to indicate that there was a tool tip or definition available. You have probably seen this in word processing programs like OpenOffice, Microsoft Word, or in help files. In HTML, you can underline any piece of text, but it is always a single solid line. This is called a "text decoration" and by convention it is used to indicate that the text is a link to another place in the site or the Internet. However, there is no text decoration for dashed lines in HTML. What I found was that I could use a box border for creating dashed underlines.
The following small sample program shows how to do this using CSS:
/* This script tests the use of dotted underlining of text */
<html>
<head>
<style type="text/css">
.du1 { /* class for 1px dotted underline text */
border: none;
border-bottom: 1px dashed red;
}
.du3 { /* class for 3px dotted underline text */
& nbsp;border: none;
border-bottom: 3px dashed red;
}
span { /* color all text within <span>...</span> blue */
color: blue;
}
</style>
</head>
<body>
<div>This line contains <span class="du1">a 1 pixel-wide red dashed underline with a blue</span> piece of text</div>
<div>This line contains <span class="du3">a 3 pixel-wide red dashed underline with a blue</span> piece of text</div>
</body>
</html>
The output of this program is:
This line contains a 1 pixel-wide red dashed underline with a blue piece of text
This line contains a 3 pixel-wide red dashed underline with a blue piece of text
