Une astuce CSS pour les espaces fines dans vos textes.

Bonjour,

D'après certaines personnes, les espaces autres que   ne sont pas tous compris par tous les navigateurs.
J'ai vu cette astuce toute simple sur un site belge traitant de typo et d'espaces en tous genres ; elle me semble bonne à connaître pour ceux qui veulent une espace insécable entre le texte et les signes de ponctuation doubles comme les guillemets à la française, canadienne ou belge (en suisse francophone : pas d'espace). Mais qui veulent cette espace plus petite que la taille normale car il est vrai qu'elle est un peu disgracieuse.

/* pour une classe NoBreakingThinSpace par exemple */
.nbthinsp { font-size: 50%; }
/* Utilisez la même unité que pour votre texte .  Si votre texte est en em  :  font-size en em */

Puis dans votre html :
<p>Visitez le site «<span class='nbthinsp'>&nbsp;</span>Alsacréations<span class='nbthinsp'>&nbsp;</span>» vous ne le regreterez pas<span class='nbthinsp'>&nbsp;</span>!</p>

Ce qui nous donne quelque chose de plus esthétique :


Ben oui, c'est un peu long à coder mais, avec un petit zeste de PHP on fait ça en trois coups de cuiller à pot :

function nbthinsp($texte) {
   $sp = '<span class="nbthinsp">&nbsp;</span>';
   $rechercher = array('« ', ' »', ' !', ' ?', ' ;', ' :');
   $remplacer  = array('«'.$sp, $sp.'»', $sp.'!', $sp.'?', $sp.';', $sp.':');
   $correction = str_replace($rechercher, $remplacer, $texte);
   return $correction;
}

Avec bien sûr quelque part dans votre page :

<?php echo nbthinsp($le_texte_a_traiter);?>

PS : J'espère que ce petit truc n'a pas déjà été posté sur Alsacréations. (la recherche n'a rien donné)
Modifié par Aureance (24 Feb 2010 - 14:37)

Salut,

je n'ai pas d'avis mûrement réfléchi sur la question... si ce n'est qu'effectivement les espaces insécables posent des problèmes (cf. ce tableau comparatif by Florent) et que la technique que tu proposes me semble quand même un peu lourde à moins de l'appliquer en back-end dans un formulaire de saisie de contenu...

Sinon juste pour chipoter :
* la variable $correction est inutile et ce serait plus mieux de faire directement :

return str_replace($rechercher, $remplacer, $texte); 

* j'utilise personnellement un script de ce genre en back-end (qui se contente de rajouter des &nbsp; dans le contenu) et j'ai opté pour un preg_replace ce qui permet de ne pas tenir compte de la présence ou non d'un espace déjà présent avant les signes de ponctuation.

Heyoan a écrit :

Sinon juste pour chipoter :
* la variable $correction est inutile et ce serait plus mieux de faire directement :

return str_replace($rechercher, $remplacer, $texte); 

Au contraire, tu fais bien de me le dire car « La simplicité est la sophistication suprême » (Léonard de Vinci).

Pour la fonction preg_replace, je l'avais zappée vu qu'elle n'est pas classée dans les fonctions de chaînes de caractères. Tu ferais comment pour notre cas (je sais nous ne sommes pas au forum PHP)
Modifié par Aureance (24 Feb 2010 - 16:10)

Quelque chose comme ça :

function nbthinsp($texte) {
	$sp = '<span class="nbthinsp">&nbsp;</span>'; 
	$motif = '#[\s]*([»|!|?|;|:])#';
	$sortie = $sp.'$1';
	$texte = preg_replace($motif, $sortie, $texte);
	$motif = '#(«)[\s]*#';
	$sortie = '$1'.$sp;
	return preg_replace($motif, $sortie, $texte);
}

$string = 'Quid enim tam absurdum quam delectari multis « inanimis» rebus, ut honore, ut gloria, «ut aedificio », ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam ? redamare possit? non admodum delectari? Nihil est enim remuneratione benevolentiae, nihil vicissitudine studiorum: officiorumque; iucundius. Duis varius ; tristique tellus.';

echo nbthinsp($string);

Modifié par Heyoan (24 Feb 2010 - 21:03)

@heyoan

Après avoir recopié ta fonction à la main, dès le premier test j'ai vu que son principe est plus mieux meilleur car qu'on oublie de mettre l'espace ou qu'au contraire on en mette plusieurs ; ça fonctionne à tous coups.

Par contre ça me fait un bug pour les guillemets sortants : (fichier en utf-8)

Alors, je me suis dit -« puisque la seconde regex va bien, faut réécrire la première d'après la même structure ».

// ceci :
$motif = '#([»|!|?|;|:])[\s]*#';
// au lieu de cela :
$motif = '#[\s]*([»|!|?|;|:])#';

C'est une catastrophe qui ne règle pas le problème des "signes inconnus" et qui m'enlève les espaces qui suivent les signes doubles.

PS. Faut vraiment que j'aille faire un tour du coté d'un bon tuto sur les regex car ça manque cruellement à mon sac à malices.

Aureance a écrit :
Par contre ça me fait un bug pour les guillemets sortants : (fichier en utf-8)

A vue de nez je dirais que les 2 sources n'ont pas le même encodage : typiquement tu fais un include dans un document enregistré en utf8 de la fonction alors que ce bout de code a été enregistré en iso-8859-1.

Aureance a écrit :
PS. Faut vraiment que j'aille faire un tour du coté d'un bon tuto sur les regex car ça manque cruellement à mon sac à malices.

J'aime particulièrement ceux de Mediabox (en 3 parties)

Heyoan a écrit :
A vue de nez je dirais que les 2 sources n'ont pas le même encodage : typiquement tu fais un include dans un document enregistré en utf8 de la fonction alors que ce bout de code a été enregistré en iso-8859-1.

Non, non, pas d'include et je n'ai pas fait de copié-collé, j'ai retapé à la main (sinon, on apprend rien) et je suis en utf-8 depuis des siècles…

Je prends note du lien que tu m'indiques mais pour l'instant je viens d'attaquer le cours de Guillaume Rossolini « Initiation aux expressions régulières en PHP » sur developpez.com. J'en suis presque à la fin de la première page.

Deux tutos ce ne sera pas de trop pour moi …

Bonsoir,
@Aureance, essaie avec l'option 'u' (pour un traitement en utf-8)

$motif = '#([»|!|?|;|:])[\s]*#u';

bonne continuation

Seven tears a écrit :
@Aureance, essaie avec l'option 'u' (pour un traitement en utf-8)

$motif = '#([»|!|?|;|:])[\s]*#u';

Merci ! Quand j'ai vu ton bout de code je me suis dit "c'est certain ; ça ne va pas aller parce que le u est placé à l'extérieur du masque… et puis je crois que le modificateur est un U (majuscule)…" Mais voilà, ça fonctionne impeccablement. Alors, c'est super mais, quel est ce mystérieux petit u et où me documenter à son propos ? Encore merci.
Modifié par Aureance (26 Feb 2010 - 14:22)

Aureance a écrit :
où me documenter à son propos ? Encore merci.

Heyoan a écrit :
J'aime particulièrement ceux de Mediabox (en 3 parties)

et effectivement je viens de faire le test en utf8 et ça ne fonctionne pas directement sans le #u

Pas vu l'option « u » sur les trois pages de MediaBox (même si en bas de la première partie quelques unes sont indiquées), par contre j'ai trouvé mon bonheur ici : expreg.com/options en bas de page.

Aureance a écrit :
Pas vu l'option « u » sur les trois pages de MediaBox.

Si ! Si ! Mais expreg.com est à voir de toute façon.