• La lecture de textes dont les lignes sont trop longues pose souvent des difficultés ; si les yeux mettent trop de temps pour aller de la fin d'une ligne au début de ligne suivante, ils perdent le fil du texte. Aussi, pour utiliser au maximum un écran large, les auteurs devraient utiliser des colonnes de texte de largeur limitée et placées côte-à-côte comme le font les journaux. Malheureusement, c'est impossible à faire avec CSS et HTML sans imposer le placement de sauts de colonne à des endroits déterminés, restreindre fortement les balises permises dans le texte, ou se lancer dans des opérations de script héroïques. Un brouillon de discussion sur les colonnes CSS3 suggère quelques nouvelles propriétés CSS pour supporter cette fonctionnalité. Un sous-ensemble des ces propriétés se comportant comme dans ce brouillon (à une exception près, voir ci-dessous) a été implémenté dans Firefox 1.5 et les version ultérieures.

    Pour texte en trois colonnes:

    -moz-column-count: 3;
    -moz-colum-width: 30%;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-colum-width: 30%;
    -webkit-column-gap: 20px;
    column-count: 3;
    colum-width: 30%;
    column-gap: 20px;

    • Pour tous les articles,  style appliqué au sélecteur .article-text { LE STYLE  }

     

    • Pour un article en ponctuel, mettre le style, via le bouton de l'éditeur d'article <>(code source) ainsi:

    <div style="-moz-column-count: 3;-moz-colum-width: 30%;-moz-column-gap: 20px; -webkit-column-count: 3; -webkit-colum-width: 30%; -webkit-column-gap: 20px; column-count: 3; colum-width: 30%; column-gap: 20px;">  LE TEXTE LE TEXTE LE TEXTE  </div>

     
     

    Pour 2 colonnes

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id interdum tortor. Praesent molestie finibus risus tincidunt varius. Nulla tincidunt pulvinar sem ut pellentesque. In et hendrerit est, vulputate feugiat elit. In scelerisque tellus eget nunc eleifend, vitae malesuada nulla tincidunt. Nam eu diam magna. Morbi auctor at mi eu aliquet. Maecenas id auctor justo. Proin efficitur, libero non tempus interdum, felis dui auctor nisi, in interdum justo nisl eget purus. Fusce ex lacus, fringilla eu libero ac, auctor tempor elit. Curabitur sit amet tellus dapibus felis posuere congue. Fusce sit amet tempor ante. Quisque consequat vestibulum odio, sed dictum magna tincidunt at. Fusce dictum efficitur pellentesque. Aliquam sit amet ipsum est. Maecenas sit amet enim neque. Duis feugiat lorem eget eros elementum, nec posuere quam vulputate. In hac habitasse platea dictumst. Nam iaculis eu massa in bibendum. Ut porta id lacus non ultrices. Duis elementum dignissim sagittis. Nam eget arcu et ante convallis pellentesque. Praesent vestibulum consequat risus, vel vehicula neque cursus a. Maecenas commodo turpis in dui aliquet, nec suscipit nunc lacinia. Aenean ullamcorper, tellus ut mollis laoreet, augue sem vehicula tellus, quis sollicitudin lorem dolor vel felis. 

     

     

     

    Nulla porttitor, est quis elementum pellentesque, elit massa dictum odio, eget elementum lorem libero elementum tellus. Maecenas fermentum vehicula vehicula. Nunc a dictum velit. Morbi a ex eget metus hendrerit faucibus quis in nulla. Nulla in nisi mollis, suscipit ex sed, bibendum tortor. Donec nec nunc vitae nisi lacinia rhoncus nec quis est. Integer nec sollicitudin orci. Etiam enim dolor, laoreet quis malesuada eu, aliquam id ante. Nunc posuere, erat eget semper consequat, tellus libero posuere tortor, vel pharetra urna mi vitae tortor. Etiam sit amet tellus magna. Phasellus vehicula facilisis faucibus. Morbi tempus ut nisl quis consequat. Suspendisse et orci est. Maecenas vitae fermentum odio, quis congue turpis. Nullam non nunc eros. Ut euismod libero a turpis venenatis, vitae faucibus nisi lobortis. Vivamus vitae erat dapibus, laoreet dui nec, convallis orci. Vestibulum non lectus non nulla feugiat auctor ac nec nibh. Aenean vehicula nec urna a dictum. Proin ante felis, posuere sit amet iaculis ut, malesuada a orci. Cras odio massa, vulputate a commodo id, laoreet ut nibh. Duis condimentum scelerisque nisl quis accumsan. Mauris a tortor laoreet, accumsan ligula in, egestas odio. Duis facilisis venenatis augue, sit amet efficitur ipsum mollis in. Duis mollis at risus a gravida. Nam nec eleifend justo, vel.

     

    Une fois le texte tapé dans l'éditeur d'article, passer coté code source : bouton <> et entourer le texte de

    <div style="-moz-column-count: 2;-moz-colum-width: 40%;-moz-column-gap: 20px; -webkit-column-count: 2; -webkit-colum-width: 40%; -webkit-column-gap: 20px; column-count: 2; colum-width: 40%; column-gap: 20px;">
    votre texte
    votre texte
    votre texte
    votre texte
    </div>

    Partager via Gmail Yahoo! Google Bookmarks

    4 commentaires
//script feuille de style suppl