Bacon, personnalisez l’alignement du texte avec jQuery

21 mars 2012
2 205 vues

Bacon est un plugin jQuery qui vous permet d’enrichir la présentation de vos blocs de texte en les alignant par rapport à une droite inclinée ou à une courbe de Bézier. Bref, le plugin idéal pour « arrondir » vos paragraphes.

Donnez de la forme à vos textes

Conçu pour un besoin très spécifique, Bacon remplit parfaitement son rôle : le plugin donne la possibilité de définir précisément la courbure d’un bloc de texte. Il sera le bienvenu pour mettre en valeur des paragraphes de texte d’un magazine web ou d’un design qui sort de l’ordinaire, par exemple avec des images arrondies. Vous l’aurez compris, il n’y a pas vraiment de rapport avec une tranche de bacon, si ce n’est la forme que vous pouvez donner à vos paragraphes.

Installation de Bacon

On commence par inclure le framework jQuery et le plugin : fichiers JS et CSS. La feuille de style fournie par le plugin contient l’essentiel des propriétés nécessaires à la transformation du texte. Libre à vous de la surchager.

<link rel="stylesheet" type="text/css" href="bacon.jquery.css" media="screen" />
<script src="jquery.min.js"></script>
<script src="bacon.jquery.js"></script>

Ensuite, on définit la structure HTML d’un bloc de texte. Assurez-vous que votre bloc ait une hauteur définie, sans quoi Bacon ne pourra pas fonctionner correctement. Il est préférable de définir également une largeur pour éviter l’étirement du texte à 100%.

<div class="texte">
  <!-- votre texte -->
</div>

Et on termine par l’appel à la fonction .bacon() sur la sélection jQuery de la classe CSS utilisée. Ici, on définit un alignement par rapport à une droite inclinée avec le paramètre type et la valeur line. Le paramètre step permet de définir le niveau d’inclinaison par rapport à une droite verticale ; plus cette variable est élevée, plus la droite est inclinée. On définit le côté de l’alignement avec le paramètre align qui peut prendre les valeurs left ou right.

$(document).ready(function() {
  $(".texte").bacon({
    'type'  : 'line',
    'step'  : 5,
    'align' : 'right'
  });
});

Résultat :

Les courbes de Bézier

Le point fort du plugin est l’utilisation des courbes de Bézier qui permettent de « détourer » des formes avec précision, par exemple des images. Pour cela, on définit le paramètre type avec la valeur bezier. Il suffit ensuite de définir quatre points avec des coordonnées x et y, le point d’origine étant situé en haut à gauche. Reste alors à définir le côté de l’alignement.

$(document).ready(function() {
  $(".texte").bacon({
    'type' : 'bezier',
    'c1' : { x : -30,        y : 0  },
    'c2' : { x : 80,      y : 170 },
    'c3' : { x : 80,        y : 340 },
    'c4' : { x : -30,        y : 480 },
    'align'  : 'left'
  });
});

Résultat :

Vous pouvez également utiliser deux courbes de Bézier, une de chaque côté ! Il vous faudra alors définir huit points. A noter tout de même qu’il semble techniquement impossible d’utiliser les coordonnées Y de la deuxième courbe de Bézier. La deuxième courbe hérite donc des coordonnées verticales de la première.

$(document).ready(function() {
  $(".texte").bacon({
    'type' : 'dualbezier',
    'c1' : { x : 0,        y : 0  },
    'c2' : { x : 80,       y : 400 },
    'c3' : { x : -120,     y : 800 },
    'c4' : { x : 50,       y : 1250 },
    'd1' : { x : 80 },
    'd2' : { x : 80 },
    'd3' : { x : 290 },
    'd4' : { x : 50 },
  });
});

Résultat :

Et c’est terminé ! L’idée est bonne et le plugin est plutôt réussi. Il peut sans doute être amélioré à l’avenir avec davantage d’options. Vous pouvez d’ailleurs faire vos retours via la page GitHub du projet. En tout cas, si vous cherchez une ressource capable de personnaliser l’alignement de vos textes de façon originale, Bacon est fait pour vous ! Simple, léger et efficace.

Requis : jQuery
Compatibilité : Firefox, Chrome, Opera, IE6+, Safari
Démonstration : http://baconforme.com/
Licence : Libre

Commentaires

  • ConveXe

    Avec le double beacon left + right, je ne comprends pas pourquoi est-ce que Yright = Yleft, pouvez vous m’éclairer svp ?

    • http://www.megaptery.com/ Pierre

      C’est à la ligne 65 du plugin :
      var pos2 = getBezier(i/maxLines, coord(options.d1.x, options.c1.y), coord(options.d2.x, options.c2.y), coord(options.d3.x, options.c3.y), coord(options.d4.x, options.c4.y));

      Cela devrait être plutôt :
      var pos2 = getBezier(i/maxLines, coord(options.d1.x, options.d1.y), coord(options.d2.x, options.d2.y), coord(options.d3.x, options.d3.y), coord(options.d4.x, options.d4.y));

      J’ai testé mais cela ne change rien. L’auteur précise :
      « I realize that on pos2 I’m currently using the same set of Y coordinates that I used in pos. This is because I got tired of trying to solve for X given the Y coordinate of pos. If you know how to do this, send it my way or fork me on GitHub. »

      Si trouves la solution, n’hésite pas à la proposer à l’auteur du plugin ! ;-)

  • http://www.chantiersorientaux.com/ mainserv

    Classe !!! sympa pour changer un peu des mises en pages un peu trop rigide à cause de contenu dynamique.

  • Ben Lautard

    Sympa comme effet.