logo_gauche Bric à Brac informatique  logo_Droite

Créer une lettrine avec BlueGriffon (par l'exemple)

A partir du texte encadré ci-dessous :

Le logiciel BlueGriffon est un logiciel libre conçu et développé par Daniel Glazman (l'auteur de NVU) à travers sa société Disruptive Innovations.
BlueGriffon est respectueux des standards du Web.
Il est disponible gratuitement, son auteur comptant se rémunérer en proposant la vente d'extensions professionnelles.
BlueGriffon, logiciel de type WYSIWYG (What you see is what you get), permet de créer les fichiers d'un site WEB sans bien connaître les langages html, xhtml, et/ou html5.

Nous pouvons obtenir ceci :

L e logiciel BlueGriffon est un logiciel libre conçu et développé par Daniel Glazman (l'auteur de NVU) à travers sa société Disruptive Innovations.
BlueGriffon est respectueux des standards du Web.
Il est disponible gratuitement, son auteur comptant se rémunérer en proposant la vente d'extensions professionnelles.
BlueGriffon, logiciel de type WYSIWYG (What you see is what you get), permet de créer les fichiers d'un site WEB sans bien connaître les langages html, xhtml, et/ou html5.

La première lettre du premier paragraphe a été transformée en lettrine

Ce résultat a été obtenu par la création d'une classe affectée à une balise Span.

Nous avons nommé cette classe  .lettrine

Mode opératoire proposé pour créer une lettrine, à l'aide d'un exemple

  1. Copier le texte du premier encadré ci-dessus (le texte sans la lettrine)
  2. Créer un nouveau document HTML5 dans BlueGriffon
  3. Coller le texte copié par la commande : Edition, Coller sans mise en forme. Vous obtenez une fenêtre proche de celle-ci (la largeur est fonction de la largeur que vous avez donnée à votre fenêtre Windows)


  4. Insérer un espace (à l'aide du clavier) après le L de "Le logiciel", au début du texte.
  5. Sélectionner ce L
  6. Activer la commande : Format, Span


  7. Sélectionner l'élément <span> dans la barre de structure


  8. Dans l'encadré texte de l'outil Classe, taper au clavier lettrine et appuyer sur la touche Entrée : la classe .lettrine est créée

  9. Afficher le Panneau Styles CSS  en cliquant sur l'icône
  10. Sélectionner : "tous les éléments de la classe" pour la rubrique : Appliquer les style à,
  11. Dans la version 1.7.2 lettrine (le nom donné précédemment en 5) est affiché dans l'encadré à droite  du bouton "tous les éléments de la classe". ATTENTION : Aucun affichage pour l'instant dans la nouvelle version 1.8. Bug ?
  12. Ouvrir les options de la section Général.
  13. Ouvrir les options de la section Géométrie. Décocher : Marges internes identiques et Marges identiques
  14. Ouvrir les options de la section Position et Organisation

La lettrine est maintenant créée

Visionner votre document dans le Code source. Un style interne a été créé ressemblant à ceci :

   <style type="text/css">
.lettrine {
  font-size: 45px;
  font-weight: bold;
  line-height: 30px;
  padding-top: 8px;
  padding-right: 2px;
  margin-right: 3px;
  float: left;
}

</style>

Bien évidemment, à vous de modifier cette classe en fonction du contexte : choix de la police, couleur du texte. Tout dépendra des propriétés de l’élément qui contiendra votre lettrine.


Retour

Mise à jour le 27/12/15