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.

➠ hr : affiche un trait horizontal avec une icône et/ou du texte

Cliquer pour lire la documentation

syntaxe 1 : {up hr=nom_class_modele}
syntaxe 2 : {up hr=nom_prefset}
syntaxe 3 : {up hr=1px, solid, #F00, 50%}
author Lomart version v1.0 license GNU/GPLv3
  • hr: nom icone, code unicode, chemin image ou nom dans prefs.ini + color, size
  • hr-border-top = 3px double #666: style du trait supérieur
  • hr-border-bottom: style du trait inférieur
  • hr-width = 100%: largeur du trait
  • hr-height: hauteur pour bg
  • hr-bg: argument pour background : couleur, dégradé, image
  • hr-align = center: position de la ligne : left, center, right
  • hr-style: style inline pour la ligne
  • hr-class: classe pour la ligne
  • icon: icon. admet raccourci icon, size, color
  • icon-text: texte en remplacement ou après l'icone
  • icon-size = 24px: taille icone en px, rem (px par defaut) - coté du carré dans lequel est inscrit l'image
  • icon-color: couleur pour icon et texte
  • icon-bg = #fff: couleur de fond
  • icon-space = 4px: espace entre icon et trait
  • icon-h-offset: décalage horizontal en px ou rem négatif pour aller vers la gauche
  • icon-v-offset = 0: décalage vertical dans la même unité que icon-size. Par défaut moitié de icon-size
  • icon-style: style inline pour l'icône ou le texte
  • icon-class: classe pour l'icône ou le texte IMPOSSIBLE
  • fontname = icomoon: pour icomoon ou FontAwesome ou autres (a mettre dans pref.ini)
  • prefset: nom d'un jeu d'options dans prefs.ini

    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
    Option Commentaire
    Pour définir la ligne horizontale
    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).
    Option Commentaire
    Pour définir l'icône
    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.
    Uniquement pour les fontes d'icônes (a mettre de préférence dans custom/prefs.ini)
    fontname Nom de la police d'icône pour la propriété "font-family".

    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

    Même s'il est possible de créer une ligne horizontale uniquement avec du CSS, les calculs de justification verticale ne le seraient pas. Il ne serait également pas possible pour le rédacteur de changer une option.

    Pour créer un jeu d'options, il suffit d'ajouter une section contenant les options de l'action avec les valeurs souhaitées dans le fichier custom/prefs.ini. Voir exemple ci-contre.

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