jQuery — Toutes les femmes sont folles | de Q | 10 +

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

jQuery — Toutes les femmes sont folles | de Q | 10 +

Il suffit parfois d’une coupure de fin de phrase malheureuse pour que le sens global nous échappe ou qu’un double sens politiquement incorrecte voit le jour… Par ailleurs, un mot seul sur sa ligne n’est pas très esthétique visuellement. Voici une fonction jQuery pour remettre les choses en place ^_^

En typographie, on appelle ça la gestion des veuves et des orphelines. En général ces termes s’appliquent plutôt à la première ligne d’un paragraphe qui se retrouve seule à la fin d’une page (opheline) ou la dernière ligne d’un paragraphe qui se retrouve seule en haut d’une page (veuve) cf. Wikipedia.

Le site Learning jQuery propose trois méthodes pour appliquer un espace insécable   entre les deux derniers mots d’un titre pour les solidariser sur la deuxième ligne afin d’éviter d’avoir un titre disgracieux comme celui que vous avez sous les yeux :D

Parmi les trois solutions proposées, j’ai choisi celle qui reposait sur le traitement des chaines de caractères string, mais rien ne vous empêche de choisir la méthode utilisant les tableaux (Array) ou les Expressions régulières.


$(document).ready(function() {
    var h2all, h2a, h2b;
        $('h2 a').each(function() {
        h2all = $(this).text();
        h2a = h2all.slice(0, h2all.lastIndexOf(' '));
        h2b = ' ' + h2all.slice(h2all.lastIndexOf(' ')+1);
         $(this).html(h2a + h2b);
     });
});

La fonction s’applique uniquement aux liens contenus dans la balise de titre de niveau H2 sur l’ensemble de la page.

MAJ : Pour intégrer cette fonction dans WordPress, voici un fichier .zip à décompresser et à placer dans le dossier plugins de votre thème.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



16 commentaires pour “jQuery — Toutes les femmes sont folles | de Q | 10 +”

  1. 13770 dit :

    Intéressant mais comment l’utiliser dans WordPress ?

  2. giz404 dit :

    Ce serait bien que ce genre de choses soit gérées par le navigateur plutôt que d’avoir à recourir à du javascript…

  3. 20cent dit :

    Clairement !

    À gérer dans le HTML directement, ça n’a rien à faire dans un script. À noter que certains outils permettent de traiter ça automatiquement.

  4. Bruno Bichet dit :

    @13770 : J’ai « packagé » la fonction sous forme de plugin pour WordPress. Voir la MAJ dans le billet ;)

    @giz404 : Tout à fait d’accord, mais en attendant Godot, il faut bien trouver des solutions. Et puis gageons que lorsque Firefox ou Opera auront intégrés cette fonctionnalité, on trouvera bien un navigateur à qui il faudra servir un petit supplément.

    @20cent : J’étais tombé sur smartypants mais je n’avais rien vu concernant les veuves et orphelines. Je jetterai un oeil à nouveau.

    À gérer dans le HTML directement, ça n’a rien à faire dans un script.

    Heu… tu veux dire calculer à la main le nombre de signes qui peuvent entrer sur une ligne et mettre un espace insécable à main, ou pire un retour à la ligne dans le titre ?

  5. 20cent dit :

    Non, laisser le navigateur faire son boulot en effet… mais prévoir néanmoins ce qu’il faut pour tout ce qui est de la micro typographie. Et pour reprendre ton titre :

    jQuery – Toutes les femmes sont folles de Q 10 +

    Le souci avec le script que tu proposes est bien sûr le cas où la fenêtre est redimensionnée.

  6. pickupjojo dit :

    Très bien vue cette astuce, merci Bruno ! :)

  7. Bruno Bichet dit :

    @20cent : Lapin compris l’histoire du redimensionnement de la fenêtre : ce script ne fait qu’ajouter un espace insécable entre les deux derniers mots du titre, de sorte que si la phrase n’entre pas complètement dans la largeur, les deux derniers mots restent solidaires sur une deuxième ligne.

    Si la phrase entre dans l’espace, ll’espace insécable qui reste est totalement transparent (à moins qu’un truc m’ait échappé).

  8. 13770 dit :

    Voici ce que cela donne une fois le plugin installé :

    Warning: Cannot modify header information – headers already sent by (output started at /home/j4oib9/www/wp-content/plugins/no-widows.php:1) in /home/j4oib9/www/wp-includes/pluggable.php on line 770

    Dommage je continuerai à insérer des   pour éviter qu’un mot ne soit seul à la ligne.

    Amicalement

  9. 20cent dit :

    En effet, tu as raison Bruno, j’ai parlé trop vite.

  10. Bruno Bichet dit :

    @13770 : J’ai fait une petite modif dans le fichier, tu peux réessayer ;)

    @20cent : pas grave, il vaut mieux se poser les questions deux fois que pas du tout :)

  11. Bruno Bichet dit :

    @pickupjojo: de rien ;)

  12. Al-Kanz dit :

    C’est un vrai labo ce blog ! :) Sont où les souris dissécables ?

  13. 13770 dit :

    Toujours le même résultat, ça ne fonctionne pas, dommage. Amicalement

  14. Bruno Bichet dit :

    @Al-Kanz: héhé, les souris sont sous le tapis, pardi ;)

    @13770: C’est bizarre, parce que sur mon blog, ça fonctionne nickel, sans message d’avertissement quelconque. En plus, vue la simplicité du plugin, je ne peux pas croire à une incompatibilité avec un autre plugin ^^

    Bref, faudrait avoir d’autres retours pour se faire une idée !

  15. Red@ dit :

    Excellente implémentation … et le titre est autant ingénieux ;)

  16. Martin dit :

    J’aurais tendance à dire que cela gagnerait à apparaître directement dans le HTML produit par WordPress, dans la mesure où jQuery ne résout le problème d’affichage que sur le site, et non dans les flux RSS ou ailleurs, ce que permettrait de résoudre, du moins en partie, un plugin adapté pour WordPress au niveau du PHP. D’ailleurs, cela fait un bail que je me dis que je ferai un tel plugin, en particulier pour ne pas avoir à gérer l’espace insécable manuellement devant les divers signes de ponctuation qui, en français, exigent pour certains un espace, justement, contrairement à l’anglais…

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 ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site