Hauptseite

Texte für diashow.html erstellen

Neuere Browser wie Firefox, Google-Chrome und Opera können, dank Verarbeitungsangaben, Schriften in verschiedene Arten verändern.

Anweisungen, die in frage kommen, gehören zur css und beschreiben verschiedene Aspekten wie Farbe, Schatten, Rotation usw.

Bei der Gestaltung von Schrift-Bilder reichen wenige der vorhandene Möglichkeiten aus.

Schrift-Familie

Schriften sind ein Gestaltungsmittel und eine unmenge an solche Schriften sind vorhanden. Viele dürfen nicht ohne weiteres verwendet werden, manche besitzen einer Lizenz die die Verwendung, fast uneingeschränkt erlauben.

Bekannte Schriften sind Helvetica oder sein Microsoft Pendant Arial, diese Schriften sind allerding für den Druck optimiert. Bei Schriften die für den Bildschirm ausgelegt sind, kann leider nicht davon ausgegangen werden, dass diese Schriften auf alle in Frage kommenden Rechner vorhanden sind. Für eine Diashow sind ausserdem die Schriftzüge ein wenig zu bieder.

Eine elegante Lösung besteht daran ein (freien Font) vom Browser aus laden zu lassen und die Anweisung zu geben dieser Font für die Texten zu verwenden.

Font Einbinden

<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>

Diese Zeilen bewirken, dass die Dateien YanoneKaffeesatz-Regular.ttf und YanoneKaffeesatz-Bold.ttf die sich im Verzeichnis fonts die im gleichen Ordner wie die Html Datei sein muss vom Browser geladen wird. Die Schrift Famile YanoneKaffeesatz gilt für beide Dateien, mit font-weight:normal; Bzw. font-weight:bold; wird festgelegt wann die eine oder andere Datei herangezogen wird. (Titeln werden Fett (Bold) ausgegeben, einefache Texte dagegen normal.

Alternativ, können Schriften im neuen woff Format angegeben werden. Woff Font-Dateien besitzen den Vorteil kleiner als ihren ttf Pendant sind. Falls die Schriftdateien im woff Format vorliegen sind die Endungen des Beispiel in woff und die truetype Formatangabe als woff zu deklarieren:

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

TTF Schrift-Dateien können mit das Tool sfnt2woff umgesetzt werden (http://people.mozilla.org/~jkew/woff/).

Damit diese Schrift als Default verwendet wird muss im <style> Abschnitt noch den Browser angewiesen dies zu verwenden.

body { font-family: YanoneKaffeesatz; }

Größe der Zeichen definieren

Die Schriftgröße sollte bei den html Elementen angegeben werden. Für eine Diashow sind <h1> sowie <h2> (Paragraphen Titel (header)) sowie <p> am wichtigsten.

Ein em gibt die Höhe die das größter Zeichen der Schrift benötigt. Bei den übliche Schriften entspricht die Versal Höhe eine Buchstabe wie ein "A" int etwa 75% der Höhe der Schriftfamilie oder 0.75em.
Die Angabe font-size: 5em ist eine relative Angabe und besagt, dass für das Element die Schrift um den Faktor 5 vergrößert wird. Die Grundgröße wird von den Body-Element vererbt.

Schriftfarbe vorgeben

Mit der Angabe color: red wird die Zeichenfarbe auf rot gesetzt. Es können auch Angabe in der Form color: rgb(255,0,0); vorgenommen werden. Jede Farbkomponente Rot, Grün und Blau werden mit ein wert zwischen 0 un 255 angegeben. Gelb wäre color: rgb(255,255,0);, rosa color: rgb(255,200,200);. Schliesslick können die Farbe mit ein Hexadecimal Wert anfegeben werden; color: #ff0000; entspricht rot. Wenn Sie über einen Bildbearbeitungssystem verfügen können Sie eine Farbe graphish auswählen und entweder die rgb() oder die Hexadezimale Notation des Wertes verwenden.

Schriftschatten erzeugen

Internet Explorer 9 kann keine Schatten gemäß Standard erzeugen!

Der Style font-weight:bold;color:red; text-shadow: .1em 0em 0em black; erzeugt:
Schatten
Die Schatten sind nach Recht versetzt.

font-weight:bold;color:red; text-shadow: .1em 0.1em .0em black; ergibt
Schatten
Die Schatten zusätzlich nach unten verschoben. In beiden Fällen sind die Schatten hart abgegrenzt.

font-weight:bold;color:red;text-shadow: .1em 0.1em .07em black; erzeugt:
Schatten
Die Ränder der Schatten sind unscharf.

font-weigth:bold;color:white:text-shadow: 0em 0em .17em black; ergibt:
Schatten
Dies kann interessant sein wenn ein Schriftzug ein Bild überlagert ist und die Zeichenfarbe und Bildfarben sehr ähnlich sind.

Die verschiedene Browser weichen in der Darstellung der Schatten. Firefox hat gegenüber seine Kontrahenten ein höheren Unschärfe Radius und weichere Verläufe.

Schrift Rotation

Mit moderne Browser können Schriften rotiert werden. Leider ist das Standard noch nicht verabschiedet und für jede Browser Familie müssen die Anweisung extra spezifziert werden.

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);

führt zu folgendes:

Rotiert
 Nicht rotiert

Die beide schwarze linien umrahmen die maximale vertikale Ausdehnung der Buchstaben.

Selbstverständlich können Effekte kombiniert werden.

Aufbau der Html Datei

Eine Html Datei ist eigentlich keine komplizierte Sache. Eine Einfache Datei besteht aus wenige Elementen

<!DOCTYPE html>  Kennzeichnung der Html Variante, hier html 5
<html lang="de"> Begin des eigentliches Kode
 <head>          Kopfdaten (javascript, Style)
 </head>
 <body>          Seiteninhalt
 </body>
</html>

Jeder Abschnitt beinhaltet Elementen, die Beschreibung folgt:

Head (Kopf) Abschnitt

   <title>Titel der Seite</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <style type="text/css">
    /* Schrift Familie und default Größe festlegen */
    body {
     font-family: sans-serif;
     font-size: 100%;
    }
    /* Einige Werte für die Standard HTML elemente (um)definieren */
    h1 {
      text-align:center;
      font-size:9em;
      color:red;
    }
    h2 {
      text-align:center;
      font-size:4.5em;
      color:lime;
    }
    /* Klassen deklarieren */
    .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 Funktionen die für die Seiten wichtig sind
     * können hier eingetragen werden. Wenn Javascript
     * nicht notwendig ist, kann dieses Abschnitt entfallen.
     */
   </script>

Innerhalb der Unterabschnitten <style>.. </style> sowie <script>.. </script> können Kommentare eingefügt werden. Diese beginnen mit /* und enden mit */.

Im Abschnitt <style> werden unter anderem die Eingenschaften verschiedene Haupt Elemente festgelegt (h1, h2). Für unsere Diashow sollte es ausreichend sein.

Es ist möglich die HTML Elementen eine oder mehrere Klassen (class) zu zuordnen. Damit ist es möglich zusätzliche Eigenschaften einen Element zu vergeben.

Body Bereich

In diesem Bereich befindet sich der Code welches dargestelt wird. Es Könnte so Aussehen:

   <h1 class="shadowWhite">Mein Urlaub</h1>
   <h1 class="lime shadowYellow rot-15">2011</h1>

Mit diese Werte würde das Html Dokument wie folgt aussehen.

Mein Urlaub

2011

Weitere Tricks

Nur Schatten

Da Opera anders als seine Kollegen Firefox und Google-Chrome reagiert wenn als Schriftfarbe transparent angegeben wird, müssen spezielle Wege gegangen werden damit nur die Schatten zum Vorschein kommen.

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

bewirkt folgendes:
Das Element, welches diese Klasse zugeordnet wird, ist relativ zur normale Position positionniert und die linke Seite wird ausserhalb des Bildschirm positionniert left:-10000px;. Die Schatten werden um den gleichen Betrag in umgekehrte Richtung bewegt. Im nachstehenden Beispiel wurde das 2. Element die Klasse ntext zugeordnet.

Wir verwenden an dieser Stelle die Einheit px. Diese Weg muss wegen Opera gegangen werden, die Positionnierungsangaben akkzeptieren nur Zahlen, die auf Pixel (Bilschirmpunkt) umgerechnet die im Bereich von -32744 bis -32744 sind.

Mein Urlaub

2011

Abständen

Wenn Schriftteilen rotiert werden, kann es vorkommen, dass Zeichen sich überlappen (vorgehende und/oder nachstehende Zeile.

Ein Text Box (h1, h2, p usw.) bietet verschiedene Abständen. Die zuvor Aufgeführten Elemente besitzen ein äußere Abstand (margin) und ein innere Abstand (padding). Bei aufeinnander folgende Elemente werden die äussere Abständen so berücksichtigt, dass der größte von beide Abständen massgebend ist.

Wenn es zu eine Rotation kommt könnten es so aussehen:

Ärger, nur als Ärger
Ärger, Ärger

Eine Änderung des äußeren Abstand <h1 style="margin-top:0.5em;"> vergrößert den Abstand zwischen beide Texte (Abstand beim rotierten Element).

Ärger, nur als Ärger
Ärger, Ärger

Hier wurde die Style angabe direkt bei der Deklaration des Element vorgenommen. Der notwendigen Abstand ist von der Textlänge abhängig und muss angepasst werden. Der code sieht so aus:

     <h1>Ärger, nur als Ärger</h1>
     <h1 class="rot-15" style="margin-top:0.5em;" >Ärger, Ärger</h1>

Der Abstand (margin) kann auf verschiedene Arten gesetzt werden. margin: 1em; bedeuted, dass auf jede der 4 Seiten des Elementes ein Mindestabstand von 1em vorhanden ist. margin: 1em 0em; besagt, dass oben und unten der Abstand 1em beträgt und dass seitlich keinen Abstand vorhanden ist.

Die Abständen können auch für alle Seiten getrennt angegeben werden: margin: 1em 2em 3em 4em; bedeutet oben: 1 em rechts 2em, unten 3em und links 4em.

Die Abständen hätten auch einzeln angegeben werden können:
margin-top: 1em;
margin-right; 2em;
margin-bottom; 3em;
margin-left: 4em;

Die Veränderung der Werte für margin hat aber ein kleinen Nachteil. Der Abstand ist nur für aufeinander folgenden Elemente gültig.

Ärger, nur als Ärger
Ärger, Ärger

 
Im obigen Beispiel wird das beinhaltenden Element mit blaue Umrandung dargestellt. Die geneigte Schrift ragt leider aus den Rahmen heraus.

Da Schriftboxen auch die Definition einen inneren Abstand zwischen Ränder und Schrift erlauben (padding) kann das Setzen von innere Abständen Verwendung finden.

Ärger, nur als Ärger
Ärger, Ärger
   <h1 style="padding:.6em 0;" class="rot-15" >Ärger, Ärger</h1>

ist die Lösung, Für padding gelten, im übrigens die Regeln die für margin erklärt wurden.

Hauptseite