"HTML is fine for efficient Online Communication - but only if you can make do with a fairly simple layout, such as steps in full characters horizontally or line-wise vertically." You believe in that common saying, too? - Here you can read how to achieve a subtler text layout, beyond the usual HTML markups. In IE at least.

Most people who think they know HTML use character markups such as <B> … </B> or simple line breaks <BR>. But you can do much more than that. The following sections will briefly run over some not so well-known features.

At the end of each section you can try it yourself by a demo. If you have the time to experiment with it, it might give you some information - and perhaps some fun, too.

Please do spy on the source code! You might sometimes wonder if a demo was really implemented as said or if there was any trick at the bottom of it. To do that, you are explicitly asked to right-click anywhere on your browser and to "View Source".

While reading the source code, you might want to know some details of handling and coding of User Inputs. Then you should click here to get a separate HTML-file Help to Custom Inputs. (It will be displayed in an extra window. Thus you will not have to wander from the code. When finished, you can stow it away in the task bar, in case you should need it again later.)

Align (horiz., vert.)

In many block tags with a defined width you can declare the text to be aligned to the left, centered or to the right. (Default, in most cases, is left-aligned.)

You can do that by attribute  ALIGN=""  and the keyword  left  ,  center  or  right  between the quotes.

In blocks with a defined height, by attribute  VALIGN="" , you can also declare the vertical alignment to be  Top  (default) ,  Baseline  ,  Middle  or  Bottom .  Baseline  aligns the baseline of the first line of text with the baselines in adjacent elements. With the other keywords the text is aligned at the top, in the middle or at the bottom of the block, respectively.

If you want help with the button handling, click here - if you haven't it stowed away in the task bar already: Help to Custom Inputs (It will be displayed in an extra window.)

Border

Total Border

In HTML, all elements with attribute  STYLE=""  can have a border. It can be declared in compact notation or explicitly.

In compact notation, you can declare a border by the keyword  border: , followed by indicators of border width, border style and border color, in any order, separated by at least one empty-space. Width and color may be omitted; the default width is depending on the style, the default color is black.

Explicitly, a border is declared by keywords  border-width ,  border-color  and  border-style .

The border width is a decimal number, optionally followed by suffix  px  (for "pixels"), or  em  (corresponding the width of letter "m" in the current font).

The border style is declared by any of the keywords you see in the middle button row.

The border color is declared by the name of a standard color or a color code (symbol  #  followed by a 6-digit hexadecimal number. The first two digits represent the red-component, the middle two digits the green and the last two digits the blue-component of the color (thus it is called a "red-green-blue color" or short "RGB-color").

If you want help with the handling of Button, ColorSelect, or Slider input, click here - if you haven't it stowed away in the task bar already: Help to Custom Inputs (It will be displayed in an extra window.)

Side-specific Border

In DHTML you can manipulate each side of the border. Every side you can give a different color, style and width.

To do that, assign a color, style or width to the following style-attributes:

borderTopColor=…	borderTopStyle=…	borderTopWidth=…
borderLeftColor=…	borderLeftStyle=…	borderLeftWidth=…
borderBottomColor=…	borderBottomStyle=…	borderBottomWidth=…
borderRightColor=…	borderRightStyle=…	borderRightWidth=…

Try it yourself:

The following demo is designed in a way to make each side individually accessible, as well as in combination with any other side(s). Click the side(s) you want to manipulate and select any color, style and width. Finally, click button "Apply". The respective side(s) will alter corresponding to your settings. Within the frame, in blue lettering, you will see the equivalent HTML-code.

When changing your settings, remember to click "Apply" again - your settings will be kept internally till then!

If you want help with the handling of a Button, ColorSelect or Slider input, click here - if you haven't it stowed away in the task bar already: Help to Custom Inputs (It will be displayed in an extra window.)

Char Density

You can achieve interesting layout effects by varying the character density of your text.

This is done simply by blocking the text to be stressed in any appropriate tag with attribute  STYLE=""  and the keyword  letter-spacing:  between the quotes, followed by the number of pixels to be interspaced between characters.

To demonstrate it very clearly, in the following demo varying char density was applied to a whole block of text. For practical use, however, it will work more elegantly if you have only a single or a few words in different char density, subtly stressing just these words.

If you want help with the handling of a Slider input, click here - if you haven't it stowed away in the task bar already: Help to Custom Inputs (It will be displayed in an extra window.)

Line Height

In Online Communication you can do something that is virtually unknown in print communication: Stretching the lines of a paragraph apart, or pressing them together. In HTML this is called "varying the Line Height"

This is good mainly for three kinds of applications:

1. Making a part of the text stand out prominently.
2. Fitting a paragraph exactly into a given space.
3. Creating interesting shadow effects.

If you want help with the handling of a Slider input, click here - if you haven't it stowed away in the task bar already: Help to Custom Inputs (It will be displayed in an extra window.)

Look for yourself:

Padding

Total Padding

In many applications, when you have a text within a framed block, it's looking better if the text does not touch the frame. Instead you can have a padding between text and border.

Note the difference to margin: "padding" is the distance from the border to the inside of the block, "margin" is the distance from the border to the outside of the block in whose style it is declared.

Look for yourself:

Side-specific Padding

In some applications it might be useful to have different margins on the sides of a framed block. (For example, look at the navigation menu in the top-right corner of the screen: the padding of the bottom border is slightly greater than that of the other sides. Thus you are not forced to move the cursor exactly when you're aiming at the last menu item. You can even move the cursor too far below, and the navigation menu will still remain.)

You can do that simply by declaring the following style-attributes:

Or, if you want to have a certain padding on all sides except e.g. the bottom, you can declare:

Look for yourself:

Margin

"Margin" is the distance from the border to the outside of the block in whose style it is declared.

Total Margin

When a block element is surrounded e.g. by flowing text, you can keep them apart by a style-attribute like the following:

Look for yourself:

Side-specific Margin

Just like with  padding  you can also have different  margin  at each side of a block.

You can do that simply by declaring the following style-attributes:

Or, if you want to have a certain margin on all sides except e.g. the left (e.g. if you have an image of the left side, with all the text flowing around it), you can declare:

Look for yourself:

Custom Style

Versatile as HTML is in layout, there are still some things missing that would be useful in many applications. So you need to implement them yourself:

Variable Line Break

Oftentimes you will want to have more control over the spacing of lines and paragraphs. Then you should not enclose them in tags like <P> … </P> but

• have them in a common paragraph
• at the place where you want to have your custom line break, provide a pseudo-image: <IMG STYLE="height:…; width:0; visibility:hidden"> (note that it is invisible!)
• for the height-style insert the number of pixels you want for spacing
• don't forget a standard line break (<BR>) before and after your custom line break

Variable Spacer

In some browsers there is a tag <SPACER … > Unfortunately, in IE it does not work. You can emulate that effect by a similar pseudo-image: <IMG STYLE="height:0; width:…; visibility:hidden"> (note that it is invisible!) For the width-style insert the number of pixels you want the spacer to be.

Hidden Text

In some applications it might be useful to have a part of the text not displayed right away but only when the user is requesting it. For whole paragraphs this could be implemented as a Dynamic List (see article Display only what the Reader Requests to See!)

But what do you do if you want a hidden text in-line? Well, simply:

• bracket the text you want to hide in  <SPAN ID=… STYLE="display:none"> … </SPAN> 
• make the input, by which the hidden text is to be displayed, to delete the display-style of your <SPAN>:  ….style.display==''  ( … is the ID of your <SPAN>)
• when the now-displayed text is to be hidden again, its display-style should be set to 'none' again:  ….style.display=='none'  ( … is the ID of your <SPAN>)

Look for yourself:

Past this sentence there is a text hidden: *** hidden text *** Click on the "+"-symbol to make it visible. It will turn to a "-"-symbol, and the hidden text becomes visible. A click on the "-"-symbol will hide it again, and the "+"-symbol re-appears. Note that all the following text is re-arranged automatically when the hidden text appears.

Paragraph Density

Sometimes you might want to have some paragraphs closer together (e.g. to have them all on screen) or farther apart (e.g. to stress their importance)

You can achieve that by those  STYLE  attributes you already know:

•  margin-top: nnn 
•  margin-bottom: nnn 

Try it yourself:

If you want help with the handling of a Slider input, click here - if you haven't it stowed away in the task bar already: Help to Custom Inputs (It will be displayed in an extra window.)