Page principale

Définir des Textes pour diashow.html

Les nouveaux navigateurs tel que Firefox, Google-Chrome et Opera peuvent grace à des instructions modifier la présentation de ceux ci.

Les instructions entrant en ligne de compte font parties des instructions css et décrivent différents aspects comme la couleur les ombres rotations et ainsi de suite.

Un nombre restreint de ces instruction est suffisant pour enrichir la présentation graphiques des textes.

Famille de polices

Les polices offrent la possibilité modifier le graphisme des textes. Une quantité énorme de polices existent, beaucoup ne peuvent pas être utilisée certaine possèdent une licence autorisant une exploitations plus ou moin libre.

Des polices connues sont Helvetica et son pendant Arial. Ces polices ont été conçues pour l'impression et ne sont pas particulièrement adaptées pour la reproduction sur écran. Les polices développées pour l'utilisation sur écran ne sont pas obligatoirement installée sur tous les ordinateurs, de plus ces polices ne sont généralement pas attractives.

Une solution élégante constitue à embarquer ses propres police sur le navigateur et de l'instruire quand à leur utilisation.

Embarquement des polices

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

Ces lignes font que le navigateur télécharge les fichiers YanoneKaffeesatz-Regular.ttf et YanoneKaffeesatz-Bold.ttf qui se trouvent sou le répertoire fonts qui lui même est dans le même dossier que les fichiers html. Le nom de police YanoneKaffeesatz est valable pout les deux fichiers. Les instructions font-weight:normal; et font-weight:bold; précisent le contexte d'utilisation de l'un ou de l'autre fichier. Les Titres sont généralement en caractère gras (bold), les textes courants en caractère normeaux (normal).

Au lieu de proposer des fichiers aux format ttf (TrueType) il est également possible d'utiliser de polices aux format woff. L'avantage du format woff est que la taille des fichiers est plus faible. Si vous posséder des fichiers woff il suffit de remplacer le suffixe .ttf par woff et de changer le format de "truetype" en "woff".

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

Les polices TTF peuvent être convertie en fichier woff à l'aide de l'utilitaire sfnt2woff (http://people.mozilla.org/~jkew/woff/).

Il est, en plus, nécessaire de déclarer que ces polices sont à utiliser par défaut. La ligne suivante doit être placée dans la partie <style> du fichier html.

body { font-family: YanoneKaffeesatz; }

Définition de la taille des caratères

La taille devrait être définie pour les éléments concernés due fichier html. Les éléments <h1> et <h2> feraient suffire pour un diaporama.

Un em décrit la hauteur nécéssaire du cadre pouvant contenir n'importe quelque caractére de la police. Pour les police habituelle la hauteur d'une lettre majuscule comme le "A" correspond à environ 75% de la hauteur maximale, le reste est utilisé pour les accents et la partie inférieure des caractères comme le "g". La définition font-size: 5em est une donnée relative qui stipule que les lettres doivent être agrandie de 5 fois.

Définition de la couleur des textes

La déclaration color: red entraine le reproduction des textes en couleur rouge. Il est également possible de déclarer la couleur ainsi: color: rgb(255,0,0);. Chaque composante de la couleur du modèle rgb (rouge, vert, bleu) est précisée séparément, la luminosité peu prendre une valeur comprise entre 0 et 255. La couleur jaune est produite par color: rgb(255,255,0);, le rose par color: rgb(255,200,200);. Une notation en valeur hexadécimale peu également être utilisée: color: #ff0000; correspond au rouge. Si vous possédez un logiciel de traitement des images, vous disposé certainement d'une boite graphique de sélection des couleurs et vous pouvez prendre les valeurs affichées et les utiliser.

Production de textes avec des ombres

Internet Explorer 9 ne produit pas d'ombre avec les méthodes standard!

Le Stile font-weight:bold;color:red; text-shadow: .1em 0em 0em black; produit:
Ombre
L'ombre est déplacée vers la droite.

font-weight:bold;color:red; text-shadow: .1em 0.1em .0em black; donne:
Ombre
l'ombre est de plus déplacée vers le bas. Dans ces deux exemples, le contour de l'ombre est net.

font-weight:bold;color:red;text-shadow: .1em 0.1em .07em black; engendre:
Ombre
Les contours sont flous.

font-weigth:bold;color:white:text-shadow: 0em 0em .17em black; donne:
Ombre
Cet effet peu être intéressant si le texte est superposé à une image dont les couleurs sont similaires à celle du texte.

Les différents navigateurs ne dessinent pas des ombres identiques. Firefox produit des ombres moins nettes avec un rayon de flou plus important que pour ses confrères.

Inclinaison des textes

Le navigateurs moderne autorise la rotation des textes. Les instructions nécessaire ne sont pas encore passée dans les normes. De ce fait une commande spécifique doit être produite pour chaque navigateur.

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

génère:

Incliné
 Non incliné

Les ligne noires délimitent la hauteur maximale prisent par la police.

Il est, bien sur, possible de combiner les différent effets.

Structure des fichiers html

Un fichier html n'est pas une chose compliquée. Un fichier simple ne consiste que de peu d'éléments.

<!DOCTYPE html>  Déclaration de la variante Html, ici html 5
<html lang="de"> Début du code
 <head>          Entête (javascript, Style)
 </head>
 <body>          Contenu
 </body>
</html>

Chaque section contient les éléments définis ci après:

Head Section d'entête

   <title>Titre de la page</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <style type="text/css">
    /* Déclaration des polices et de la taille par défaut */
    body {
     font-family: sans-serif;
     font-size: 100%;
    }
    /* Définition de certains attributs des éléments html utilisés */
    h1 {
      text-align:center;
      font-size:9em;
      color:red;
    }
    h2 {
      text-align:center;
      font-size:4.5em;
      color:lime;
    }
    /* Déclaraion des 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>
    /* Les fonction javascript nécessaires à la
     * visualisation du document peuvent être placées ici.
     * Cette partie peu être supprimée ci non nécessaire.
     */
   </script>

Des commentaires peuvent être inclus dans les sous sections <style>.. </style> et <script>.. </script> Les commentaires débutent avec /* et se terminent avec */.

La sous section <style> permet, entre autre, la définition des caractéristiques des éléments principaux (h1, h2) ce qui devrait, dans le cadre de notre diaporama être suffisant.

Il est également possible d'assigner des éléments à différentes classes (class). Cette méthode autorise la définition d'attributs supplémentaires pour un ou plusieurs éléments de la section du contenu (body).

Body: Section contenu

Cette section reçoit le code qui sera visualisé. elle pourrait comprendre le code suivant:

   <h1 class="shadowWhite">Mes vacances</h1>
   <h1 class="lime shadowYellow rot-15">2011</h1>

Le document produit sera ceci:

Mes vacances

2011

Trucs supplémentaires

Seulement des ombres

Opera, contrierement à ses collègues Firefox et Google-Chrome applique la couleur transparente> (color:transparent;) sur l'ensemble texte et ombres. Il est donc nécessaire de choisir une autre voie pour réaliser ceci.

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

produit les effet suivants:
L' élément qui est membre de la classe ntext est dans un premier temps déplacé vers la gauche à l' extérieur de la surface de visualisation ( left:-10000px;). Les ombres sont positionnées par rapport aux texte dans la direction opposée. L'exemple suivant démontre cet effet sur le second élément.

Nous utilisons, à ce niveau l'unité de mesure px (pixel) car Opera n'accepte que des caleurs comprisent entre -32744 et 32744. L'utilisation de l'unité em est calculée internement en pixel et si nous utilisons une valeur exprimée en em trop élevée nous risquons une conversion à une valeur située hors de la plage admissible.

Mes vacances

2011

Espacement

une superposition de différents textes peu être produite par la rotation de l'un de ceux ci.

La boite contenant un texte (h1, h2, p, ...) possède plusieurs attributs d'espacements. Un espace extérieur (margin) et un espace intérieur (padding). Les espaces extérieurs de deux éléments consécutifs sont superposés, l'espacement résultant correspond à l'espace le plus grand.

Lors de l'inclinaison nous pouvons obtenir quelque chose de similaire à ceci:

Des ennuis, que des ennuis
Ennuis, ennuis

La modification de l'espacement externe due second élément <h1 style="margin-top:0.8em;"> nous permet d'afficher cela:

Des ennuis, que des ennuis
Ennuis, ennuis

Nous avons, ici, déclaré le stile directement dans l'élément concerné. La valeur adéquate dépend de la longueur du texte. Le code est ce qui suit:

     <h1>Des ennuis, que des ennuis</h1>
     <h1 class="rot-15" style="margin-top:0.5em;" >Ennuis, ennuis</h1>

L'espacement extérieur peu être définit de différente façons. margin: 1em; signifie que les marges sont les mêmes sur les quatres cotés. margin: 1em 0em; produit des marges inférieure et supérieures de 1 em, sur les cotés droit et gauche il n'y a pas de marge.

Les marges peuvent être spécifiées séparément: margin: 1em 2em 3em 4em; signifie en haut: 1 em a droite 2em, en bas 3em et a gauche 4em.

Une autre possibilité est la suivante:
margin-top: 1em;
margin-right; 2em;
margin-bottom; 3em;
margin-left: 4em;

Une modification des espacememts externes ont un petit défaut, si les textes doivent être centrés verticalement, le navigateur le fait par rapport aux cadre contenant les textes (ici en bleu).

Des ennuis, que des ennuis
Ennuis, ennuis

 
 
L'exemple, ci dessus, montre le cadre (bleu) entourant les deux éléments. Le texte incliné déborde amplement.

Étant donné que des marges intérieures (padding) peuvent être spécifiées, nous pouvons utiliser cette alternative:

Des ennuis, que des ennuis
Ennuis, ennuis
   <h1 style="padding:.8em 0;" class="rot-15" >Ennuis, ennuis</h1>

Les élements sont maintenant à l'intérieur de la boite les contenants, Ceci mous permettra un centrage vertical correct.

Les règles concernant la définition des marges extérieures sont applicables pour l'attribut padding.

Page principale