Appliquer un style journal aux textes de votre site Web

 Article modifié dernièrement le 19 Avr 2011 @ 11 h 38 min

Il est généralement difficile de lire de longs textes sur Internet, que ce soit du texte blanc sur noir ou noir sur blanc, surtout lorsque le texte est long, peu aéré et que votre écran est grand.

Le style journal est à mon avis un bon moyen de rendre vos textes beaucoup plus accessibles pour les internautes souhaitant les lire, le fait de faire apparaître en colonnes le bloc de texte ou le contenu de votre article permet une lecture plus agréable et permet aussi de mieux occuper la surface d’affichage grandissante de nos écrans.

http://www.alistapart.com

http://www.alistapart.com

Pour rendre cela faisable simplement il existe 2 moyens, le premier est d’utiliser les nouveautés de la spécification CSS3, le second est d’appliquer un script JavaScript sur votre bloc de texte, pour ce dernier je vous présenterai une extension à jQuery que j’utilise personnellement.

CSS3

Malgré que cette spécification soit toujours au stade de brouillon, voir en détail la spécification sur les colonnes multiples, elle est de plus en plus implémentée par les navigateurs récents soucieux de respecter les standard du Web dictés par le W3C.

Il devient enfantin de transformer un bloc de texte en plusieurs colonnes de texte, il suffit soit de définir le nombre de colonnes souhaitées avec la propriété column-count, soit de définir la taille des colonnes attendues avec la propriété column-width, voici un exemple de syntaxe possible :

  • column-count, permet de déterminer le nombre de colonnes dans lesquelles le contenu doit s’adapter (nombre entier)
  • column-width, permet de déterminer la largeur de chaque colonne (en pixels)
  • column-gap, permet d’appliquer la taille de la séparation entre les colonnes (en pixels)
  • column-rule, permet de définir les effets de bordures entre les colonnes

JavaScript

Il est parfois utile d’utiliser du JavaScript lorsque par exemple votre navigateur ne supporte pas les nouvelles propriétés CSS3 citées ci-dessus. C’est d’ailleurs pour cette raison que j’utilise cette option sur mon site perso que je développe en ce moment sur Magic the Gathering.

J’utilise pour cela un plugin jQuery, multilists, qui me permet simplement d’afficher le listing des cartes que compose un deck en plusieurs colonnes.
Le code source de ce plugin est très simple et léger, il boucle simplement sur les éléments de votre liste et applique des marges négatives sur les éléments en fonction du nombre de colonnes que vous souhaitez.

  • Voici la liste de cartes au format HTML à afficher en colonnes :
  • Et voici l’appel à jQuery qui va me permettre d’obtenir cette liste sous forme de 2 colonnes de tailles identiques à 220px :

Amélioration du plugin jQuery multilists

Ce plugin fonctionne uniquement sur des listes de type ul et ol sans avoir à appliquer un quelconque style aux éléments de liste li qui la composent.
Pour ma part mes éléments sont contenu dans des balises paragraphe (p), or le plugin ne le permet simplement pas, voici donc les modifications que j’ai dû apporter au code pour que cela soit possible.

Lignes à modifier dans le code source du plugin v1.0.5 :

Nouvelle utilisation du plugin, à présent il est possible de spécifier le nom de la balise contenant les éléments de notre liste (par défaut ‘li’) :

Navigateur

Firefox propose une extension à son navigateur qui permet en un clic d’afficher n’importe quel contenu d’un site web sous forme d’un journal : http://multicolumn.mozdev.org

Trois flèches vers le bas

1- Logiciel de brouillage d’adresse IP :

Contourner la censure en surfant anonyme

2- L’article explicatif :

La différence entre un proxy et un VPN

3- Comment espionner un smartphone (app) :

L’application de référence

Commentez ici

  • Mimie 23 septembre 2010, 17 05

    Article intéressant sur le sujet (en anglais) : Introducing the CSS3 Multi-Column Module.

  • Greg 26 septembre 2010, 1 01

    Bon go lecture alors

  • yam 18 avril 2011, 16 04

    Bonjour,
    je voudrais afficher un texte sur trois colonne, ça me rends dingue 🙁
    j’ai essayé tout les fonctions que j’ai trouver sur le net, j’ai essayé votre fonction ainsi que la fonction du lien que vous avez cité, mais aucune des deux marchent, la deuxième ça marche mais il m’affiche tout le texte sur une seule colonne et je vois pas ou indiquer le nb du colonnes
    voici mon code (avec votre fonction):

    (function($){
    $.fn.multilists = function(options, callback) {

    var defaults = {
    target: 'li', cols: 2
    };

    var options = $.extend(defaults, options);

    return this.each(function() {

    obj = $(this);
    $items = obj.children(options.target);
    // don't waste time on empty lists
    if ($items.size() > 1) {

    // if no width set, container divided by columns
    if (!options.colWidth) {
    options.colWidth = Math.floor(obj.width()/options.cols);
    }

    // create our variables
    var currentCol = 0;
    var vertReturn = 0;
    var maxHeight = 0;

    // loop list items
    $items.each(function(i) {
    // negative top margin
    if (i % Math.round($items.size()/options.cols) == 0 && i > 0) {
    $(this).css('margin-top', -vertReturn);
    if (vertReturn > maxHeight) {
    maxHeight = vertReturn;
    }
    vertReturn = 0;
    currentCol++;
    }
    // add left margin
    if (currentCol > 0) {
    $(this).css('margin-left', currentCol * (options.colWidth + ($(this).outerWidth(true) - $(this).width())) + 'px');
    }
    vertReturn += $(this).outerHeight() + (($(this).outerHeight(true) - $(this).outerHeight()) / 2);
    });

    // set height on containing list
    obj.height(maxHeight);

    }

    // if the callback is a function, call it...
    if (typeof callback == 'function') {
    callback.call(this);
    }

    });

    };
    })(jQuery);
    // end
    $(document).ready(function() {
    $('#deck').multilists({ cols: 2, target: 'p', colWidth: 120 });
    });

    Les nombreux défis auxquels votre entreprise fait face requièrent une prise en charge et des réponses personnalisées. La mise en place de best practice nécessite de tenir compte de vos systèmes existants ainsi que de vos projets futurs. Des besoins spécifiques, des offres adaptées

  • yam 18 avril 2011, 16 04

    il a interpréter le html pour le paragraphe
    « Les nombreux défis auxquels votre entreprise fait face requièrent une prise en charge et des réponses personnalisées. La mise en place de best practice nécessite de tenir compte de vos systèmes existants ainsi que de vos projets futurs. Des besoins spécifiques, des offres adaptéesHR Square propose des offres adaptées aux besoins spécifiques des Grandes Entreprises dans le domaine du conseil RH et SIRH.Un concept unique : la Human Sphere »

  • Mimie 18 avril 2011, 17 05

    Quel est le code HTML que vous utilisez ? car là vous appelez la fonction multilists sur une balise identifiée par #deck (qui était dans mon exemple), j’ai l’impression que vous ne l’avez pas adapté à votre code ?

  • yam 19 avril 2011, 10 10

    Bonjour,
    Merci pour votre retour
    comme je l’ai indiqué dans mon dernier message le html a été interprété (je le remet ici entre des balise code)

    Les nombreux défis auxquels votre entreprise fait face requièrent une prise en charge et des réponses personnalisées. La mise en place de best practice nécessite de tenir compte de vos systèmes existants ainsi que de vos projets futurs. Des besoins spécifiques, des offres adaptéesHR Square propose des offres adaptées aux besoins spécifiques des Grandes Entreprises dans le domaine du conseil RH et SIRH.Un concept unique : la Human

  • yam 19 avril 2011, 10 10

    c’est la même chose !!!

  • Mimie 19 avril 2011, 11 11

    Le blog utilise le plugin Syntax Highlighter MT, il faut utiliser la syntaxe suivante dans les commentaires :

    <pre class="brush: php"> ... </pre> ou 
    <pre class="brush: css"> ... </pre> ou 
    <pre class="brush: javascript"> ... </pre> etc.
    
  • yam 19 avril 2011, 14 02

    merci pour vos réponses, j’ai trouvé une solution dans le lien suivant :
    http://welcome.totheinter.net/columnizer-jquery-plugin/

Article suivant:

Article précédent:

Share This