Modèle:LettrineP
Utilisation[modifier]
Ce modèle permet de créer une « lettrine emboîtée dans le texte » situation qu’on retrouve couramment en typographie moderne and antique :
Syntaxe[modifier]
{{LettrineP| contenu | font-size | margin-top | margin-right | margin-bottom | margin-left | z-index=#}}.
Notez que les paramètres assignés aux positions 2 à 6, peuvent aussi être appelés par des noms correspondant à leur usage comme indiqué dans les examples qui suivent.
Les paramètres font-size et margin devraient être exprimés en unités relatives, soit en pourcentage ou en 'cadratin (em)'.
Le seul paramètre obligatoire est le premier soit l’initiale. Si aucun autre paramètre n’est précisé, les valeurs par défaut sont les suivantes :
- font-size = 3em
- margin-right = .1em
Ce qui produira une lettrine emboîtée couvrant approximativement la hauteur de 2 lignes selon la police en usage sur Wikisource :
| Code wiki | Rendu |
|---|---|
{{LettrineP|L}}{{sc|orem}} ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo.
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. |
- Notes :
- Les lettrines sont généralement suivies de petites majuscules pour compléter les lettres composant le premier mot. Voir
{{sc}}. - Les polices de caractères peuvent être représentées différemment selon le navigateur ou le système d’exploitation utilisé. Des vérifications peuvent s’avérer nécessaires sur Mozilla Firefox, Apple Safari, Opera, Windows Internet Explorer ou autres navigateurs web et sur différents ordinateurs afin de valider que le texte s’incruste bien de la façon souhaitée lorsque vous utilisez les valeurs par défaut.
Utilisation des images[modifier]
Vous pouvez utiliser à la fois le paramètre image et le paramètre texte en paramètre 1 qui servira de texte alternatif. Si le paramètre 1 n’est pas précisé, la page sera ajoutée à Catégorie:LettrineP avec image sans alt texte. Utilisez imgsize pour préciser la taille de l’image (suivi de "px" sans espace entre les deux).
Vous pouvez aussi définir l’image à partir du paramètre 1. Ce faisant, il vous faudra préciser l’attribut "alt" correspondant à la lettre représentée par la lettrine. De cette façon, le lecteur pourra voir le texte de la lettrine, et le copier avec le reste du paragraphe.
| Code wiki | Rendu |
|---|---|
{{LettrineP|L|image=Chronica Polonorum L.jpg|imgsize=50px}}{{sc|orem}} ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
|
|
Examples de marges[modifier]
| Par défaut | Haut (mt), 0.1em | Bas (mb), 1em | Gauche (ml), −0.5em |
|---|---|---|---|
 orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
|
orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
|
orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
|
orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
|
Utilisation avec les guillemets[modifier]
À l’occasion un guillemet («) précède la lettrine. Il faudra alors se servir du paramètre fl :
| Code wiki | Rendu |
|---|---|
{{LettrineP|P|fl=«}}
|
« P |
Indentation[modifier]
Pour définir une indentation, veuillez utiliser le paramètre indent. Par défaut, l’indentation de LettrineP est de zéro, même lorsque située en début d’un paragraphe standard.
| Code wiki | Rendu |
|---|---|
{{LettrineP|L|indent=2em}}{{lorem ipsum}}
{{LettrineP|L|fl=«|indent=2em}}{{lorem ipsum}}
|
LLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. « LLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. |
Utilisation à l’intérieur d’une liste[modifier]
En pareille situation, un ajustement s’avère nécessaire :
| Code wiki | Rendu |
|---|---|
<syntaxhighlight lang="html">
* {{LettrineP|I}}Tem
* Item 2
* Item 3
</syntaxhighlight>
|
|
Solution proposée :
| Code wiki | Rendu |
|---|---|
<syntaxhighlight lang="html">
* {{{{BASEPAGENAME}}|I}}Tem
* <li style="position:relative; left:1em; margin-left:-1em;">Item 2
* Item 3
</syntaxhighlight>
|
|
Sinon il y aura collision entre la puce et la lettrine. Le déplacement nécessaire devra être ajustée en fonction de la taille de la lettrine et du contenu de la liste.
Notes typographiques[modifier]
Pour obtenir une simple lettrine non emboîtée dans le texte, utilisez le modèle {{Initiale}}:
- Lorem ipsum sit amet...
Considérations techniques[modifier]
Ce modèle crée tout simplement un span flottant à gauche (incluant le style display: block;) et appose le code CSS applicable à son contenu. Malheureusement les styles CSS 3 dédiés spécifiquement à la lettrine ne sont pas supportés sur tous les navigateurs (voir cette documentation sur MDN Web Docs). LettrineP pourra éventuellement tirer profit du style « initial-letter » lorsqu’il sera plus répandu.
LettrineP pourrait interagir avec d’autres éléments flottants de même nature. En pareille situation ne pas hésiter à faire appel au ws:Scriptorium
Catégories de suivi[modifier]
- Catégorie:LettrineP avec image (suivi uniquement si le paramètre image est utilisé)
- Catégorie:LettrineP avec image en paramètre 1 (seulement les images non inscrites dans le paramètre image)
- Catégorie:LettrineP avec image sans alt texte
- Catégorie:LettrineP sans initiale
- Catégorie:LettrineP utilisant font-size
- Catégorie:LettrineP utilisant margin-top
- Catégorie:LettrineP utilisant margin-right
- Catégorie:LettrineP utilisant margin-bottom
- Catégorie:LettrineP utilisant margin-left
- Catégorie:LettrineP utilisant text-indent
- Catégorie:LettrineP utilisant fl
- Catégorie:LettrineP utilisant z-index
- Catégorie:LettrineP utilisant fontfam
Paramètres[modifier]
Add a 'drop capital', either text or an image
| Paramètre | Description | Type | État | |
|---|---|---|---|---|
| 1 | 1 | Le texte de la lettrine. | Chaîne | obligatoire |
| fl | fl | Caractère flottant à gauche (guillemet)
| Chaîne | facultatif |
| font-size | fs 2 | Taille de la police (en unités CSS). Sans effet si une image est utilisée.
| Chaîne | facultatif |
| image | image | Le nom de l’image si requis. | Fichier | facultatif |
| imgsize | imgsize | La taille de l’image en px
| Chaîne | facultatif |
| margin-top | mt 3 | Marge au haut de la lettrine (en unité CSS)
| Chaîne | facultatif |
| margin-right | mr 4 | Marge à droite de la lettrine (en unité CSS)
| Chaîne | facultatif |
| margin-bottom | mb 5 | Marge au bas de la lettrine (en unité CSS)
| Chaîne | facultatif |
| margin-left | ml 6 | Marge à gauche de la lettrine (en unité CSS)
| Ligne de texte | facultatif |
| z-index | z-index | Elément z-index
| Nombre | facultatif |
| Police de caractère | ff | aucune description
| Chaîne | facultatif |
Voir aussi[modifier]
{{Initiale}}, pour une large initiale déposée sur la même ligne (baseline) que le texte et s’étirant vers le haut.{{Lettrine}}, alternative techniquement plus complexe, difficile à intégrer dans un poème avec alinéa négatif.{{Img float-p}}, pour une lettrine plus complexe nécessitant un découpage de l’image.