Main Page

Writing text for diashow.html

New browser as Firefox, Google-Chrome and Opera are able to add many effects to the text.

The indtructions which are available are of the css and describe some aspects as color, shadow and rotation.

In order to design the type face, we need only a few parts of the available instructions.

Font-Family

Fonts are a possibility for the design of the text and there are a lot of available fonts. Many of the fonts are not free to use, some are placed under a license which allows there use.

Some known Fonts are Helvetica and the Microsoft counterpart Arial, but such typeface are designed for printing and not for a screen. Fonts which are designed for use on the screen, there is a problem, the fonts are not provided on each computer. Further more such fonts are not very nice for a photo show.

One use full method is to embed an (free) font in your html file and to use this font for the texts.

Embedding Font

<style type="text/css">
 @font-face {
  font-family: YanoneKaffeesatz;
  font-weight:normal;
  src: url("fonts/YanoneKaffeesatz-Regular.ttf") format("truetype");
 }
 @font-face {
  font-family: YanoneKaffeesatz;
  font-weight:bold;
  src: url("fonts/YanoneKaffeesatz-Bold.ttf") format("truetype");     
 }
</style>

These line allows to embbed the files YanoneKaffeesatz-Regular.ttf and YanoneKaffeesatz-Bold.ttf. These files must reside within the folder fon.ts which is located under the same directory as yout html document. The font family name YanoneKaffeesatz is the same for both file. font-weight:normal; eg. font-weight:bold; tell the browser for which textes the corresponding type face is to be used. Header are rendered with a bold type face, paragraphs with normal type face.

You may also use font file which are in the woff format. Woff font file have the advantage that there size is lesser as as the size of a ttf file. I you have a woff font file you must replace the ttf file name extention with woff and the format type typetype with woff.

  src: url("fonts/YanoneKaffeesatz-Bold.woff") format("woff");     

A TTF font files can be converted to the woff format with the Tool sfnt2woff (http://people.mozilla.org/~jkew/woff/).

You must, further, in order to use the embedded font, declare it within the <style> part of the html file.

body { font-family: YanoneKaffeesatz; }

Defining character

The font size shall be defined for all used elements. For our show we need the <h1> sowie <h2> and possibly the <p> elements.

One em tell the browser which height the character cell which will be able to accept any characters of the font. For the normally used fonts the height of a capital letter as "A" is about 75 % of the font size height (0.75 em).
The statment font-size: 5em is relative and tell the browser that the characters shall be scaled up 5 times. The default size (1em) is inherited from the body element of the html document or the default set by the browser.

Font color

The statement color: red tell that the browser shall be rendered with the red color. You may also use an other syntax as color: rgb(255,0,0);. Each color part (red, green and blue) accept a value between 0 and 255. Yellow can be declared with: color: rgb(255,255,0);, pink with color: rgb(255,200,200);. At least you may also express the color with there hexadecimal value color: #ff0000; give red. If you use an image editing system you will probably be able to use a graphical color chooser and pick the color value in rgb or hexadecimal form.

Text shadows

Internet Explorer 9 is not able to produce text shadows with the standard way!

The Style font-weight:bold;color:red; text-shadow: .1em 0em 0em black; create:
Shadow
The shadows are placed on the right of the text.

font-weight:bold;color:red; text-shadow: .1em 0.1em .0em black; generate:
Shadow
The Shadow if further more moved to the bottom. For both case the shadows are very sharp.

font-weight:bold;color:red;text-shadow: .1em 0.1em .07em black; produce:
Shadow
The shadows border are smoothed.

font-weigth:bold;color:white:text-shadow: 0em 0em .17em black; give:
Schatten
This may be of interest if the text is above an image and the colors of the picture and the text are similar.

Please note that the different browser produce different shadows. Firefox use a greater radius and smoother shadows as the other browser.

Text Rotation

Modern browser allows to rotate the texts, Unfortunately, the norm is not approved and we must enter a statement for each browser within our style part.

display: inline-block;
color:red;
font-size:3em;
font-weight:bold;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);

produce this:

Rotated
 Not rotated

 
The black lines show the height for the font.

You may, of course, combine more effects.

Layout of the html file

A html file is not a complicated thing. A simple file consist only of a fews elements.

<!DOCTYPE html>  Declaration of html version, here html 5
<html lang="de"> Begin of code
 <head>          Header data (javascript, Style)
 </head>
 <body>          Page content
 </body>
</html>

Every part contain some elements, the explanation follows:

Head (header) part

   <title>Titel der Seite</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <style type="text/css">
    /* Font Family and default size */
    body {
     font-family: sans-serif;
     font-size: 100%;
    }
    /* Some value for standard HTML elements */
    h1 {
      text-align:center;
      font-size:9em;
      color:red;
    }
    h2 {
      text-align:center;
      font-size:4.5em;
      color:lime;
    }
    /* declaration of classes */
    .rot-15 {
     -webkit-transform: rotate(-15deg);
     -moz-transform: rotate(-15deg);
     -o-transform: rotate(-15deg);
     -ms-transform: rotate(-15deg);
     transform: rotate(-15deg);
    }
    .shadowWhite {
      text-shadow: .1em .1em .07em white;
    }
    .shadowYellow {
      text-shadow: .1em .07em .2em #ffff77;
    }
    .lime {
     color:lime;
    }
   </style>
   <script>
    /* Script funktions if there are important for
     * this page.
     * This part is not always necessary.
     */
   </script>

You may put comments within the <style>.. </style> and <script>.. </script> sub parts. Comments begin with /* and end with */.

The style statement are put within the style part. defining the style for the main elements of our page (h1, h2) shall be enough for our show.

You may assign one or more class to an html element. With this you can modify the basic style of the given element.

Body part

You will put here the content rendered on the html page This may look as follow:

   <h1 class="shadowWhite">My Holiday</h1>
   <h1 class="lime shadowYellow rot-15">2011</h1>

You will see the following with these values:

My Holiday

2011

More Tricks

Only Shadow

Opera react on the transparent on an other way as Firefox and Google-Chrome. Due to this we can't assign this value as letter color.

   .ntext {
    position:relative;
    left:-10000px;
    text-shadow: 10000xp 0em .2em white;
   }

do the following:
The element which are member of the ntext class are positioned relatively and the left side is moved outside of the screen area left:-10000px;. The shadows will be placed right of the letter by the sam amount but the other direction. The class ntext is assigned, on the following example to the second element.

We use at this place the unit px (pixel). We do this because Opera accept only values in the range -32744 - 32744. With the em value we may have greater values as wanted.

My Holiday

2011

Distances

If you rotate textes, you will probaly seen that some texts overlap together.

A text box (h1, h2, p an so on) offer different spacing. The example above use the outer spacing (margin) Die zuvor Aufgeführten Elemente besitzen ein äußere Abstand. The spcaing betwenn two element is the greatest spacing of both element, the spacings overlap themselves.

If you have a rotated text you may seen the following:

Trouble, only trouble
Trouble, trouble

The change of the outer space <h1 style="margin-top:0.7em;"> move the rotated text down.

Trouble, only trouble
Trouble, trouble

The style declaration was made direct within the element. The spacing depend of the text length and must be adapted. The code look as follow:

     <h1>Trouble, only trouble</h1>
     <h1 class="rot-15" style="margin-top:0.7em;" >Trouble, trouble</h1>

The spacing (margin) may be set with different rules. margin: 1em; mean that the outer spacing will be 1em for all 4 side of the text box. margin: 1em 0em; tell that the spacing on the top and the bottom eill be 1em beträgt, for the right and left side there is no space.

You may also give a spacing for each side- margin: 1em 2em 3em 4em; mean top: 1 em right 2em, bottom 3em and left 4em.

You can also specify the spacing as follow:
margin-top: 1em;
margin-right; 2em;
margin-bottom; 3em;
margin-left: 4em;

Changing the outer spacing (margin) provide also some inconveniences. The real spacing depend of the spacing of the previous and next element.

Trouble, only trouble
Trouble, trouble

 
 
Within the above example we have paint the border of the element containing the textes. The rotated text is not within the delimited area.

If we set the inner spacing (padding) the text box will be bigger and the elements will no more overlap.

Trouble, only trouble
Trouble, trouble
   <h1 style="padding:.85em 0;" class="rot-15" >Trouble, trouble</h1>

This is a good way, this alllows also to center all elements vertically. The rules for setting the padding are the same as for the margin.

Main Page