Initial caps



David Lockett

Initial caps are usually large capital letters or images which are displayed either within or next to the first paragraph on a page.

This page teaches you how to add initial caps and left aligned photographs to your pages.

To include an image similar to the one shown above, copy the code displayed below to a Raw html block placed above the first text block on your page.

Note that the result shown above can be achieved in SBI's BB2 editor, without the need to use code and styles. Although the code and style information shown below, helps to introduce valuable image positioning concepts.

<div style="width: 10em; margin-right: 0.4em; margin-top: 0.3em; float: left;"><img alt="David Lockett" src="http://www.making-websites-made-simple.com/image-files/david-lockett.jpg" width="100%"></div>

Although the displayed image is not an initial cap, it is displayed on the page in ways that are similar to the way that initial caps are displayed.

Next, change the code to call your own photograph, then change the div height and width to suit.

When you preview the page, you will see your photograph displayed on the left of the page, with your first paragraph displayed to the right.

Image based initial caps

You could replace the photograph with suitably designed and sized initial cap to provide your page with the appearance of an illuminated manuscript, as shown in the example below.

he ornamental illuminated, initial cap displayed on the left of this paragraph, is included within this paragraph, using code which is similar to that used to display the photograph shown above. The relevant code is displayed below.

<div style="width: 4.6em; height: 5.5em; margin-right: 0.15em; margin-top: 0.2em; float: left;"><img src="http://www.making-websites-made-simple.com/image-files/illuminated-letter-T.gif" width="100%"></div>

The initial caps image is enclosed within a div that includes the declaration float: left;, plus includes height and width declarations.

The initial caps image displayed within the div, is set to a width of 100% forcing it to fill the width of the enclosing div. The height of the image then automatically adjusts, based on the image's original height to width ratio.

Also, a declaration of margin-top: 0.2em; is displayed within the code. This adjusts the vertical positioning of the image within the div, to visually align the top of the image with the top of the adjacent text.

The declaration margin-right: 0.15em; pushes the adjacent text away from the right-hand edge of the div (and the image).

In both examples, the image sizes are specified as width="100%". This sizes each image to fill the width of the enclosing div. No image height is specified because once the image width is defined, each image displays at the appropriate width to height ratio.

Also, note that in your website, each style specification should ideally be located within the website's style sheet. ideally through the Custom CSS window in Site Designer, and not as inline styles. Any site-wide changes could then be made within the style sheet rather than made at the individual page level.

Inline styles are used here only to simplify demonstration of the techniques, and to enable you to easily copy, use and experiment with the style code within a Raw html block located in a test.html page at your website.

Once each style displays the results you wish to achieve, the style should be moved to your style sheet, and appropriate selector names should be applied to the styles.

In the style sheet, each declaration group must be displayed within curly braces {} and be associated with an appropriate selector (style name) such as #author-photo or .initial-cap.

The containing div html code is not required within the style sheet.

Each div that a style is to be applied to, will need to be identified with either a class name such as:

<div class="initial-cap">div contents</div>

or an id name, such as:

<div id="author-photo">div contents</div>

Note that neither the # pound symbol or the . period symbol are used when naming the divs. Those symbols are used only within the style sheet to identify the type of style as either an id style or as a class style.

S

etting initial caps into an appropriate position, such as that shown in this example is a little more involved. The result demonstrated here was accomplished using two divs, so that the image could display behind the text.

If you carefully check the letter 'e' in the word 'Setting', you will see that it is positioned in front of the image of the distorted letter S.

The code is shown below.

<div style="float: left; width: 4em; height: 2em;">
<div style="position: absolute; height:3em; width: 5.5em; margin-top: 0.3em; z-index: -1; margin-left: -0.7em;"><img src="http://www.making-websites-made-simple.com/image-files/initial-letter-S.gif" alt="S" width="100%"></div></div>

Paste the code shown above into a Raw html block in your own test.html page. Then change the code to call in your own image of a suitable character. Adjust the dimensions to make your image of the letter align with the indented text on your page.

A float: left; declaration and a width of 4em is used in the first div to push lines of text 4ems to the right and create a space in which to display the initial letter.

The height of the div causes two lines of text to be indented to the right. If the height of the div were increased, then more lines of text would be indented to the right.

Next, a second div containing code that calls an image of a distorted letter 'S' is placed inside the first div.

The second div includes a position: absolute declaration, which causes the div to float above the first div. No positioning information is used in the second div, which means that it floats over the page, in the location where the code is positioned.

In addition, the second div also contains a margin-left: -0.7em; declaration, which along with the z-index: -1; layer declaration, causes the image of the letter S; to be outdented to the left of the column margin, while also displaying behind the first letter of the adjacent text.

Also, a margin-top: 0.3em; declaration is used to visually align the top of the image with the top of the adjacent text.

Text based initial caps

You don't always need to use images to display initial caps. You can use live text, and apply styling to the initial character of a paragraph.

You could for example, paste your initial paragraph into a Raw html block, add a span tag around the first character, and then apply styling to the span tag, as demonstrated below.

A span consists of an opening <span>and a closing</span>. Style declarations added to the opening span tag will impact any text or other items located between the opening and closing span tags.

For example:

This is what can happen to an initial character when you wrap it in a span tag and apply styling to the span.

Here is the code.

<span style="font-family: Verdana; font-weight: bold; color: #990000; margin-right: -0.2em; margin-left: -0.1em; font-size: 3em; line-height: 100%; font-style: italic;">T</span>his is what can happen to an initial character when you wrap it in a span tag and apply styling to the span.

The margin-right: -0.2em; declaration allows the letter 'h' and the following letters to move to the left, so that they display within the area occupied by the large capital letter 'T'.

The margin-left: -0.1em; declaration moves the letter 'T' to the left, for better visual alignment with the left-hand edge of the column.

The line-height: 100%; declaration, maintains the standard spacing, between lines of text. Otherwise, the displayed line spacing would be relative to the font size of the large letter 'T'.

Return to the top of the Initial Caps page.

Return to the website styles page.




















































































Article by ©