Présenter son article en colonnes sous Spip

Pour répondre à ce besoin, en 2004, Buzz postait la solution suivante sur Spip-contrib, qui consistait en un filtre php |afficher_en_colonnes associé d’une mise en forme du #TEXTE de l’article en tableaux sur deux colonnes.

Mais voila, moi, les tableaux html pour conditionner une mise en page, c’est comme le choux fleur, j’aime pas ça ! De plus cette solution étant valable pour de (très) ancienne version de Spip, il convenait de remettre un peu cela au goût du jour et l’idée a donc été de trouver le moyen de le faire en CSS, en XHTML conforme et c’est l’outil "Décoration" du Couteau Suisse, qui m’a finalement apporté l’illumination !

Le principe

Cet outil "Décoration" permet de définir très rapidement de nouveaux raccourcis typographiques de type <raccourcis> à utiliser dans le corps de vos articles Spip. Sur l’interface du plugin, il suffit, une fois l’outil activé, de définir les styles CSS qui vont s’appliquer aux raccourcis ainsi créés.

Il devait donc en toute logique être possible de créer des raccourcis (plutôt que mes mot-clés de 2008 ) pour conditionner l’affichage en deux colonnes. Voyons ensemble comment.

Mise en place

Je ne reviendrai pas sur la méthode pour installer le plugin et pour en activer un a un les différents outils, pour cela je vous renvois à la documentation du Couteau Suisse, à la documentation de l’outil Décoration, qui eux même doivent bien renvoyer à la documentation officielle de Spip sur les plugins.

Pour moi, donc, vous aurez déjà avant de commencer cette lecture, installé le Couteau Suisse et activé l’outil "Décoration".

Définition des balises

Sur l’interface de "Décoration", une zone de texte est prévue pour comporter vos définitions de balises. La syntaxe est relativement rigoureuse :

type_de_conteneur.votre_raccouurcis_texte.type_de_sélecteur_css_associé = nom_du_selecteur_css

Pour notre affaire, afin de répondre parfaitement aux normes de l’intégration graphique tant XHTML que CSS, il conviendra donc de créer trois nouvelles <div> en leur associant chacune une class CSS dont le style sera défini, soit à même l’interface de "Décoration", soit, et c’est la méthode privilégiée ici [1], dans vos feuilles de styles.

Une fois ceci fait, le rédacteur dispose dans ses articles Spip des 3 nouveaux raccourcis suivants :

qu’il faudra bien sûr imbriquer pour que cela fonctionne correctement et que le bloc "2col" prenne la place qu’il lui faut dans votre mise en page :

A ce stade de la rédaction de votre article, prenez soin de faire en sorte que votre colonne de droite ne soit jamais plus longue que votre colonne de gauche afin que la mise en page soit cohérente. (et oui, désolé, le ratio de longueur ne se calcule pas de manière automatique, et en même temps, heureusement, car j’aime bien avoir le contrôle sur la machine )

Note : Les utilisateurs de la Barre typographique V2 (BTV2) auront même accès à un bouton pour ces raccourcis typographique, ainsi que pour toutes les autres décos du Couteau Suisse

Définitions des CSS

Une fois les raccourcis créés, nous allons donc définir leur style dans notre feuille de style. Rien de bien compliqué, je vous donne mes propres CSS pour l’exemple, à adapter selon votre mise en page à vous :

A copier coller dans votre feuille spip_style.css ou tout autre feuille de style choisie pour conditionner les styles typographiques disponibles à la rédaction de vos articles.

Bien évidement, vous pouvez de cette manière créer autant de blocs multi colonnes que vous le souhaitez. On peut très bien imaginer une mise en page sur trois ou plus... colonnes. Après, attention tout de même que ca ne vire pas au grand n’importe quoi dans le rendu final à l’écran

Exemple

voici une petite démonstration en direct live de la méthode décrite ici :

Dans le texte de votre article

Rendu à l’écran

Ce bloc une fois traduit en XHTML par l’outil, aura la forme suivante :

dont vous pourrez constater au validateur XHTML du W3C que cela répond parfaitement aux standards de conformité du HTML et XHTML strict et/ou transitionnel.

Un autre exemple sur ce site, sur un article "full 2 colonnes" et avec du vrai texte dedans : Mon Curriculum Vitae.

EDIT : Internet Explorer

Je me disais bien que j’avais oublié de traiter un cas, à savoir celui de notre vieux frère ennemi Internet Explorer.

Suite à un mail reçu ce jour, l’on me dit que ma technique marche sous IE et pas sous Firefox (curieux, d’habitude c’est plutôt l’inverse).

Logiquement, ce code CSS est universel et ne m’a jusqu’ici posé aucun soucis de ce que dans le jargon on appelle la "Cross-browser compatibility".

Cela dit, si ça arrive, il se peut que ca ait 2 origines :

• problème de conflit entre les caches de SPIP et de Firefox (qui des fois ne savent se mettre d’accord quand à la version mémorisée de la page qu’il faut vous servir quand vous la demandez) => un vidage des 2 caches devrait régler le problème.
• Un problème de CSS, pas tant sur vos déclarations concernant les colonnes que sur celles du conteneur parent si vous avez joué avec des paddings. Et là je vous suggère de Googler sur ce qu’on appelle "l’interprétation du modèle de boîte d’un navigateur à l’autre" afin de voir ce qui pourrait clocher.

Voila