01/04/12

Bacon : alignement de texte «exotique» avec jQuery

Bacon est un plugin jQuery qui offre de nouvelles possibilités d’alignement de texte en dehors du centrage ou de l’alignement en drapeau à droite ou à gauche. Il s’agit de mettre les techniques d’habillages de texte par une forme que l’on rencontre dans les magazines papier dans une page web.

Bacon utilise un système de coordonnées avec des courbes de Bézier pour transformer la forme de votre pavé de texte. En gros, Bacon découpe votre texte en tranche d’une ligne pour lui appliquer les propriétés height, right, top et width, sachant que chaque ligne est positionnées avec position: absolute et justifiée avec text-align: justify.

Exemple

$(".baconMe").bacon({
        'type' : 'bezier',
        'c1' : { x : 10, y : 0 },
        'c2' : { x : -115, y : 170 },
        'c3' : { x : 35, y : 340 },
        'c4' : { x : 15, y : 480 },
        'align' : 'right'
    }
);

$(".baconLine").bacon({
        'type' : 'line',
        'step' : 5,
        'align' : 'right'
    }
);

→ Bacon est disponible sur Github.

Via Megaptery.



Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »