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);
});
});
En gras, l’élément HTML à atteindre. Ici, 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 précédents et suivants dans la même rubrique »
Ca peut vous intéresser »
- Mise-à-jour de la grosse grosse liste pour webdesigner (0)
- 1000 ressources pour le développement web et WordPress : la grosse grosse liste (85)
- Vis ma vie d’intégrateur HTML (2)
- Supprimer une catégorie WordPress dans le flux RSS avec le plugin “Advanced Category Excluder” (17)
- Screencast de WordPress 2.5 RC2 (1)
16 participations à l'article
Intéressant mais comment l’utiliser dans WordPress ?
Ce serait bien que ce genre de choses soit gérées par le navigateur plutôt que d’avoir à recourir à du javascript…
Clairement !
À gérer dans le HTML directement, ça n’a rien à faire dans un script. À noter que certains outils permettent de traiter ça automatiquement.
@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.
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 ?
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 :
Le souci avec le script que tu proposes est bien sûr le cas où la fenêtre est redimensionnée.
Très bien vue cette astuce, merci Bruno ! :)
@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é).
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
En effet, tu as raison Bruno, j’ai parlé trop vite.
@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 :)
@pickupjojo: de rien ;)
C’est un vrai labo ce blog ! :) Sont où les souris dissécables ?
Toujours le même résultat, ça ne fonctionne pas, dommage. Amicalement
@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 !
Excellente implémentation … et le titre est autant ingénieux ;)
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…