div ~ un bloc visible en wysiwyg

Html

Cette action permet une saisie rapide et sûre d'attributs (classe et style) pour un bloc.

Les éditeurs wysiwyg ont une fâcheuse tendance à répéter les attributs d'un bloc DIV. Il est également très difficile de visualiser la zone concernée si l'attribut n'est pas visuel et/ou non pris en charge par la feuille de style de l'éditeur. Si vous utilisez un éditeur code, c'est aussi l'assurance que rien ne bougera si l'article est modifié ultérieurement dans un éditeur wysiwyg.

L'action DIV et sa petite sœur SPAN permettent de saisir un bloc sans devoir passer en mode code.

➠ div : Facilite la saisie de blocs DIV avec un éditeur wysiwyg

Cliquer pour lire la documentation

syntaxe {up div=class_and_style}content{/up div}
author LOMART version UP-2.0 license GNU/GPLv3 tags HTML
  • div: classes et style (séparateur : point-virgule)
  • class: classe(s) pour bloc
  • style: style inline pour bloc
  • css-head (base-css): style ajouté dans le HEAD de la page

    La syntaxe est simple et très permissive comme vous pouvez le voir sur ces exemples :

    des classes
    {up div=bg-rouge t-jaune tc b}des classes{/up div}
    des styles
    {up div=background:red;color:yellow;text-align:center;font-weight:bold}des styles{/up div}
    un joyeux mélange
    {up div=bg-rouge;color:yellow;tc b}un joyeux mélange{/up div}

    Le fait de pouvoir mélanger classes et styles est une fonctionnalité de base de UP pour toutes les options les spécifiant. La seule contrainte est d'isoler chaque style par des points-virgules.

    Si vous préférez, vous pouvez utiliser des options spécialisées

    retour à la tradition
    {up div | class=bg-rouge tc b | style=color:yellow}retour à la tradition{/up div}

    Il est possible d'imbriquer les actions. Exemple :

    du texte en jaune sur fond bleu

    du texte en bleu sur fond jaune

    du texte en jaune sur fond bleu

    {up div=bg-bleu t-jaune ph1}
    du texte en {up span=bd-white ph1}jaune{/up span} sur fond bleu
    {up div=bg-jauneFonce t-bleu ph1}
    du texte en bleu sur fond jaune
    {/up div}
    du texte en jaune sur fond bleu
    {/up div}

    Exemples pratiques

    Je ne sais pas si vous avez déjà saisi du texte pour l'afficher sur plusieurs colonnes, mais ce n'est pas évident à gérer. On ne sait pas où ça commence ni où ça finit.

    {up div=text-col-2}
    votre texte sur plusieurs lignes
    {up div=break-inside:avoid}
    un bloc à conserver sur la même colonne
    {/up div <--- no-break}
    votre texte sur plusieurs lignes
    {/up div <--- text-col-2}

    Le texte ci-contre serait visible dans un éditeur wysiwyg.

    Le premier shortcode marque le début du texte à afficher sur 2 colonnes et le dernier la fin.
    Notez que j'ai repris l'argument du shortcode ouvrant dans le shortcode fermant pour m'en servir comme commentaire.

    text-col-2 est une classe de UP qui permet un affichage responsive sur plusieurs colonnes. Il existe aussi une version sur 3 colonnes : text-col-3.

    div=break-inside:avoid empêche le saut de colonne pour le bloc. J'utilise le style direct, mais UP propose la classe text-col-no-break

    id et css-head

    Vous pouvez utiliser cette action pour modifier les attributs de blocs internes sur lesquels vous ne pouvez pas agir directement. id=foo donne un ancrage à la règle CSS qui est définie avec css-head.

    Un texte avec un mot en rouge.

    {up div | id=foo | css-head=#foo span[color:red] }
    Un texte avec un mot en <span>rouge</span>.
    {/up div}

    Suggestions

    Les fonctionnalités proposées par DIV & SPAN peuvent être réalisées avec l'action HTML. Pour reprendre le premier exemple :

    HTML, l'autre méthode
    {up html=div | class=bg-rouge;color:yellow; tc b}HTML, l'autre méthode{/up html}

    Nous avons un résultat identique, même avec notre mélange de classes et styles, c'est juste plus long à saisir !

    La méthode HTML est à utiliser si vous avez besoin d'utiliser une balise avec une valeur sémantique comme header, footer, main, section, article.
    Elle permet de définir d'autres types d'attributs que class et style.