hr ~ ligne horizontale avec icône

Cette action facilite l'utilisation de la traditionnelle balise HR.
Vous pourrez modifier son aspect, ajouter des icônes et du texte.

Quelques exemples

Voyons ce que cette action permet de faire :

Juste un trait

{up hr}

{up hr=point-bleu-50}

{up hr=4px double orange}

{up hr=8px groove #F00 50%}

1. sans aucun argument : la ligne horizontale par défaut prévue par UP ou le créateur du site
2. le nom d'une classe ou d'une préférence définie par le webmaster
   Pour cet exemple, une simple action ajoutée à l'article
   

   {up addcsshead=hr.point-bleu-50[border-top:3px dotted #069;width:50%]}

3. la définition CSS d'une bordure
4. Egalement une définition CSS de bordure suivie de sa largeur (le 4ème paramètre)

Avec des options

{up hr 
 | hr-class=bd-rouge
 | hr-style=box-shadow:0 0 6px 2px #999 
 | hr-width=80%}

{up hr
 | hr-border-top=3px solid #000
 | hr-border-bottom=3px solid #D80F38
 | hr-bg=#F7D700
 | hr-height=3px}

{up hr
 | hr-bg=url(images/actions-demo/hr/ruban-france.png)
 | hr-height=10px}

{up hr=4px #069 dotted 60%
 | hr-align=right}

1. une classe standard de UP et un style pour définir une ombre
2. un ruban "belge" composé d'une bordure haute et basse ainsi que d'un fond jaune de même hauteur que les filets.
3. pour les cas délicats, une simple image. Ne pas oublier de lui donner une hauteur
4. une simple bordure alignée à droite

Les options pour la ligne

hr

l'option principale peut contenir

• l'argument pour la propriété border. (exemple: 1px solid red). Une éventuelle quatrième valeur sera considérée comme largeur de la ligne
• le nom d'une classe définissant les propriétés pour une balise HR
• le nom d'une section dans custom/prefs.ini qui définit les différentes options. On peut également utiliser prefset

Nota : les informations exprimées ici peuvent être surchargées par celles des options "normales". Exemple: si hr=1px solid red 50% et hr-width=80%, la largeur sera de 80%. Cela permet de définir une présentation à l'aide d'une classe ou du fichier prefs.ini qui sera adaptée à l'utilisation.

hr-class

hr-style

Style et classes pour la balise HR

hr-border-top

les arguments pour la propriété border. Soit:

• la hauteur de la ligne
• la forme : solid, dotted, dashed, double, groove, ridge, inset, outset
• la couleur

Par défaut, la saisie dans hr est attribuée à cette bordure

hr-border-bottom

idem à border-top. Cette bordure est utilisée dans certains cas particuliers

hr-bg

les arguments classique d'un background : couleur, dégradé, image

hr-height

la hauteur de la bordure. Utilisé avec hr-bg pour styler les fond du HR

hr-width

la largeur de la ligne horizontale.

hr-align

Par défaut, la ligne est centrée dans le bloc parent. Il est possible de demander une justification à droite ou à gauche en indiquant right ou left

Avec une icône

Plusieurs types d'icônes peuvent être ajoutées sur la ligne.

{up hr
 | icon=Ux1F60A
 | icon-space=1rem}

{up hr=2px solid red
 | icon=/images/actions-demo/hr/united-kingdom.png
 | icon-v-offset=-2px}

{up hr
 | \2f, green, 32px}

{up hr
 | icon=\f1aa
 | fontname=FontAwesome}

1. le code d'un caractère Unicode. voir la page : Références. Un espace est ménagé entre l'icône et la ligne. Si le fond de votre page n'est pas blanc, il faut indiquer la couleur de remplissage avec l'option "icon-bg"
2. une image jpg, png ou gif. Ici, nous apportons un léger décalage vertical pour mettre le centre du drapeau au niveau de la bordure haute
3. un caractère "Icomoon". il n'est pas possible d'indiquer son nom, il faut récupérer le code avec un inspecteur de code sur la page Icônes Icomoon
4. un caractère "FontAwesome". Comme ce n'est pas la police d'icône par défaut pour le site*, il faut indiquer son nom pour la propriété css font-family. Voir Icônes Font-Awesome
   * la police par défaut est à préciser dans custom/prefs.ini

L'exemple montre la saisie rapide pour l'option icon. On fait suivre, en les séparant par une virgule, la couleur et la taille. Ce mode est aussi valide pour les caractères Unicode et les images.

Avec du texte

{up hr=2px solid peru
 | hr-border-bottom=2px solid peru
 | icon-text=un simple texte
 | icon-color=Sienna
 | fontname=cursive}

{up hr=2px solid blue
 |hr-border-bottom=2px solid red
 | hr-bg=#fff
 | hr-height=36px
 | icon-text=Produit en France
 | icon-v-offset=2px}

{up hr=2px solid maroon
 | icon-text=exemple
 | icon-color=maroon
 | icon-bg=wheat
 | icon-v-offset=2px
 | icon-style=border:2px solid maroon; border-radius:4px; padding:5px}

{up hr=degrade-gris num-rond-inv
 | hr-width=80%
 | icon-text=1}

1. le texte est passé comme argument de l'option icon-text. Nous précisons la police et couleur. Pour la ligne, vous noterez l'utilisation de border-top et border-bottom.
2. l'espace entre la bordure haute et basse est mis à 36px pour ménager un espace pour le texte. Par défaut, l'action centre le texte par rapport aux bordures. Il est parfois nécessaire d'ajuster la position vertical avec icon-v-offset
3. nous utilisons l'option icon-style pour ajouter une bordure arrondie au texte ainsi qu'un padding. Il n'est pas possible d'utiliser des classes car le texte est ajouté à l'aide d'une pseudo-classe before
4. un shortcode court, car tout est défini dans les 2 classes passées comme argument principal. Le rédacteur doit juste saisir le texte, mais il peut modifier/surcharger une valeur prédéfinie (width).

Les options pour le texte

icon

code Unicode, image, code font-icon. Il peut être suivi par la taille et la couleur en les séparant par des virgules

icon-text

texte affiché à la place ou à la suite de l'icône

icon-size

taille de l'icône et du texte exprimée en px ou rem

icon-color

couleur de l'icône. Sans effet sur les icônes en couleurs

icon-bg

couleur du fond de l'icône. Cela permet de cacher le trait au-dessous

icon-space

espace à droite et à gauche entre le trait et l'icône'

icon-h-offset

Par défaut, l'icône suit l'alignement de la ligne. Si la ligne est alignée à gauche, l'icône sera à gauche. Cette option permet de décaler horizontalement l'icône. Pour la déplacer à gauche, saisir un nombre négatif. Si la ligne HR est au centre, 10% décalera de 20% de la moitié, soit 10% de la largeur totale.

icon-v-offset

Par défaut, UP essaie de placer l'icône au milieu de la ligne. Cette option permet de la décaler vers le bas (nombre négatif) ou vers le haut (nombre positif). Inutile d'indiquer l'unité, UP utilise celle de icon-size pour les calculs. Si vous avez défini la hauteur de l'icône en pourcentage, on fera un décalage en pourcentage.

fontname

Nom de la police d'icône pour la propriété "font-family".
Uniquement pour les fontes d'icônes (a mettre de préférence dans custom/prefs.ini)

Usage avancé

{up hr=1px solid #666 50%
 | icon=Ux2767,36px,tan
 | icon-v-offset=-3px
 | hr-style=margin-top:36px}

{up hr=2px dashed #444
 | icon=Ux2704
 | icon-text= commande
 | hr-align=left
 | icon-h-offset=5%}

{up hr=2px dashed teal
 | hr-align=right
 | icon-bg=teal
 | icon-color=white
 | icon-text=étape \2780
 | icon-v-offset=-12px
 | icon-style=padding:0 10px !important;border-top-left-radius:10px}

{up hr
 | icon-text=I\2764UP
 | icon-color=red
 | fontname=cursive
 | hr-width=80%
 | hr-bg=linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,0,255,1) 15%, rgba(255,0,255,1) 30%, rgba(255,255,255,1) 50%, rgba(255,0,255,1) 70%, rgba(255,0,255,1) 85%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%)
 | hr-height=2px}

1. ❧juste un caractère unicode pour un HR très classique. Cet exemple permet d'aborder la question des marges. UP déduit leurs taille à partir des autres informations.
   Dans ce cas, la partie utile du caractère est située dans sa partie basse.; Cela nous oblige a faire un décalage vertical et définir manuellement la marge haute.
2. cet exemple affiche un caractère Unicode^? suivi d'un texte. L'alignement à gauche est obtenu par l'option hr-align. Nous ajoutons un décalage de 5%
3. ici les particularités sont :
   • l'alignement à droite et le le décalage vers le haut du pavé texte
   • l'ajout de l'icône directement à la fin du texte. Cela est possible car nous utilisons un caractère Unicode.
     Notez qu'il est exprimé sous une forme admise par la propriété CSS content
4. pour ce dernier exemple, on retrouve l'insertion d'un caractère unicode^? dans le texte. la ligne horizontale est un dégradé saisi directement dans hr-bg sans oublier de lui une hauteur avec hr-height.

⬤ il est impossible d'utiliser les fontes icônes avec du texte. En effet, la police doit être identique pour les deux.
⬤ il est délicat d'utiliser des images avec du texte. La notion de taille est commune aux deux.
⬤ j'ai une tendresse particulière pour les caractères Unicode.

Ils sont très souples d'utilisation et disponibles sur tous les appareils sans devoir charger une police. 😍

Pour choisir une icône et récupérer son code, consultez la section Références de ce site.

Personnalisation

Comme toutes les actions UP, il est possible d'adapter son comportement aux besoins et au style du site.

• mention des valeurs par défaut dans le fichier custom/prefs.ini
• remplacement de la feuille se style de l'action par une de même nom située dans le sous-dossier "custom"

Cette action (version 1.7 de UP) introduit un nouveau concept : les jeux d'options

[param]
hr=2px dotted green 50%
icon=\38
icon-color=green
icon-size=32px

{up hr=param}

{up hr=param
 | hr-border-top=5px dotted #333}

{up hr=param
 | icon=Ux1F6E0}

{up hr=param
 | hr-class=degrade-gris
 | hr-border-top=none}

1. juste le nom de l'option, on ne peut pas faire plus simple ...
2. en précisant l'option hr-border-top, on modifie uniquement la bordure
3. icon change juste l'icône "icomoon" par un caractère Unicode
4. on utilise l'option hr-class pour changer la bordure à l'aide d'une classe prédéfinie.

La ligne ci-dessus est un jeu d'options (typo-feuille) mis en exemple dans le fichier custom/prefs.ini.dist. Il suffit de le renommer en custom/prefs.ini pour l'utiliser. Ce fichier ne sera jamais écrasé lors d'une mise à jour de UP. voir le fichier prefs.ini actif sur le serveur

Avez-vous remarqué l'animation de la ligne ?

Cet effet est réalisé avec l'action anim-aos. Voici les shortcodes utilisés :

{up anim-aos | duration=3000}
{up hr=typo-feuille}
{/up anim-aos}

Pour animer tous les hr de la page, insérer simplement ce shortcode au début de l'article

{up anim-aos | repeat=hr}