5 Nouveaux raccourcis typographiques & validation HTML 4.01 transitional

Ceci est une ARCHIVE, peut-être périmée. Vérifiez bien les compatibilités !

Rajout de 5 nouveaux raccourcis typographiques et de quelques éléments pour valider en HTML 4.01 transitional.

Le besoin

J’ai eu le besoin de faire les mises en forme suivantes : Aligner à droite, Centrer, Encadrer (le bloc ou un morceau) et mettre en exposant.

Raccourcis désormais disponibles

  1. [/texte/] : aligner le texte à droite
  2. [|texte|] : centrer le texte
  3. [(texte)] : encadrer le texte (occupe toute la largeur de la page, à mettre autour d’un paragraphe)
  4. [*texte*] : encadrer/surligner le texte (une partie à l’intérieur d’un paragraphe)
  5. [^texte^] : mettre en exposant le texte sélectionné

Le style pour les encadrements

Ces styles sont à rajouter dans votre feuille de style.
Vous pouvez bien sûr les personnaliser. En particulier caractencadre-spip peut servir à faire du surlignage plutôt que de l’encadrement. C’est donc à comprendre comme une mise en évidence.

.texteencadre-spip {
        background: #FFE;
        border-bottom-color: #999999;
        border-bottom-style: solid;
        border-bottom-width: 2px;
        border-left-color: #EEEEEE;
        border-left-style: solid;
        border-left-width: 1px;
        border-right-color: #999999;
        border-right-style: solid;
        border-right-width: 2px;
        border-top-color: #EEEEEE;
        border-top-style: solid;
        border-top-width: 1px;
        padding: .25em;        
}
.caractencadre-spip {
        border: 1px solid #666;
        padding: 0px .5em 0px .5em;
}

Le code source de mes_fonctions.php3

<?php 
//      Mes_fonctions.php3 
/*
 *   +----------------------------------+
 *    Nom du Filtre :   HTMLEntitiesFr 
 *						PyratTypo
 *   +----------------------------------+
 *    Date : lundi 6 septembre 2003
 *    Auteur :  jpyrat      + webmaster@nospam.pyrat.net
 *   +-------------------------------------+
 *    Fonctions de ces filtres :
 *     Ils rajoutent quelques racourcis typo à SPIP et rendent le code généré par SPIP validable HTML 4.01 transitional
 *     Pour SPIP 1.6
 * 	   Appel : |HTMLEntitiesFr     (qui appelle aussi PyratTypo)
 *		ou	|PyratTypo			   (si vous ne voulez que lui)
 *
 *     Syntaxe des raccourcis :
 *           [/texte/] : aligner le texte à droite
 *           [|texte|] : centrer le texte
 *           [(texte)] : encadrer le texte (occupe toute la largeur de la page, à mettre autour d'un paragraphe)
 *           [*texte*] : encadrer/surligner le texte (une partie à l'intérieur d'un paragraphe)
 *           [^texte^] : mettre en exposant le texte sélectionné
 *
 *     Styles pour les encadrements à rajouter dans votre feuille de style :
 *            .texteencadre-spip {
 *           	background: #FFE;
 *           	border-bottom: 2px solid #999999;
 *           	border-left: 1px solid #EEEEEE;
 *           	border-right: 2px solid #999999;
 *           	border-top: 1px solid #EEEEEE;
 *           	padding: .25em;	
 *           }
 *           .caractencadre-spip {
 *           	border: 1px solid #666;
 *           	padding: 0px .5em 0px .5em;
 *           }
 *           
 *   +-------------------------------------+ 
 *  
 * Pour toute suggestion, remarque, proposition d'ajout
 * reportez-vous au forum de l'article :
 * http://www.uzine.net/spip_contrib/article.php3?id_article=235
*/

function PyratTypo($str) {
		$cherche1 = array(
			/* 15 */ 	"/\[\//",
			/* 16 */	"/\/\]/",
			/* 17 */ 	"/\[\|/",
			/* 18 */	"/\|\]/",
			/* 19 */ 	"/\[\(/",
			/* 20 */	"/\)\]/",
			/* 21 */ 	"/\[\*/",
			/* 22 */	"/\*\]/",
			/* 23 */ 	"/\[\^/",
			/* 24 */	"/\^\]/",
			/* 25 */    "/<p class=\"spip\"><ul class=\"spip\">/",
			/* 26 */	"/<\/ul>( *)<\/p>/",
			/* 27 */    "/<p class=\"spip\"><ol class=\"spip\">/",
			/* 28 */	"/<\/ol>( *)<\/p>/",
			/* 29 */    "/<p class=\"spip\"><table class=\"spip\">/",
			/* 30 */	"/<\/table>( *)<\/p>/",
			/* 31 */    "/<p class=\"spip\">( *)<div/",
			/* 32 */	"/<\/div>( *)<\/p>/"
		);
		$remplace1 = array(
			/* 15 */ 	"<div style=\"text-align:right;\">",
			/* 16 */	"</div>",
			/* 17 */ 	"<div style=\"text-align:center;\">",
			/* 18 */	"</div>",
			/* 19 */ 	"<div class=\"texteencadre-spip\">",
			/* 20 */	"</div>",
			/* 21 */ 	"$1<span class=\"caractencadre-spip\">",
			/* 22 */	"</span>",
			/* 23 */ 	"$1<sup>",
			/* 24 */	"</sup>",
			/* 25 */	"<ul class=\"spip\">",
			/* 26 */	"</ul>",			
			/* 27 */	"<ol class=\"spip\">",
			/* 28 */	"</ol>",			
			/* 29 */	"<table class=\"spip\">",
			/* 30 */	"</table>",			
			/* 31 */	"<div",
			/* 32 */	"</div>"			
		);
		return preg_replace($cherche1, $remplace1, $str);
}

function HTMLEntitiesFr($str) {
    if($str!="") {
		$entities = array(
			128 => 'euro', 
			130 => 'sbquo', 
			131 => 'fnof', 
			132 => 'bdquo', 
			133 => 'hellip', 
			134 => 'dagger', 
			135 => 'Dagger', 
			136 => 'circ', 
			137 => 'permil', 
			138 => 'Scaron', 
			139 => 'lsaquo', 
			140 => 'OElig', 
			145 => 'lsquo', 
			146 => 'rsquo', 
			147 => 'ldquo', 
			148 => 'rdquo', 
			149 => 'bull', 
			150 => 'ndash', 
			151 => 'mdash', 
			152 => 'tilde', 
			153 => 'trade', 
			154 => 'scaron', 
			155 => 'rsaquo', 
			156 => 'oelig', 
			159 => 'Yuml',
			171 => 'laquo',
			187 => 'raquo',
			192 => 'Agrave',
			194 => 'Acirc',
			198 => 'AElig',
			199 => 'Ccedil',
			201 => 'Eacute',
			202 => 'Ecirc',
			200 => 'Egrave',
			203 => 'Euml',
			206 => 'Icirc',
			207 => 'Iuml',
			212 => 'Ocirc',
			214 => 'Ouml',
			217 => 'Ugrave',
			219 => 'Ucirc',
			220 => 'Uuml',
			224 => 'agrave',
			226 => 'acirc',
			230 => 'aelig',
			231 => 'ccedil',
			232 => 'egrave',
			233 => 'eacute',
			234 => 'ecirc',
			235 => 'euml',
			238 => 'icirc',
			239 => 'iuml',
			246 => 'ouml',
			249 => 'ugrave',
			244 => 'ocirc',
			251 => 'ucirc',
			252 => 'uuml'
		);
		$new_text = '';
		for($i = 0; $i < strlen($str); $i++) {
			$num = ord($str{$i});
			if(array_key_exists($num, $entities)) {
			 $new_text .= '&'.$entities[$num].';';
			}
			elseif($num < 127 || $num > 252) {
			 $new_text .= $str{$i};
			}
		}
		return PyratTypo($new_text);
	}	
}
?>

Quelques explications

Pourquoi j’ai fait tout ça ?

La fonction HTMLEntitiesFr transforme en entités HTML les caractères spéciaux tels que « éèàçÇÀÉ ». J’ai eu à le faire car mon site ne s’affichais pas corectement sur Mac sans ça.

Dans PyratTypo :

  • les numéros 15 à 24 [1] inclus concernent les 5 nouveaux raccourcis [2]
  • les numéros 25 à 32 rendent le code généré par spip compatible HTML 4.01 transitional (div, ul, ol, table ne peuvent pas être encadrés d’un p) [3]

Utilisation

L’appel se fait en rajoutant |HTMLEntitiesFr à votre balise dans les squelettes (ex : [(#TEXTE|HTMLEntitiesFr)]). HTMLEntitiesFr exécute aussi PyratTypo.
Vous pouvez aussi n’appeler que PyratTypo si la transformation en entité HTML ne vous convient pas.

Ceci tourne sur mon site perso

Notes

[1Les numéros viennent de ce que j’avais initialement modifié le code de inc_texte.php3 pour faire quelques ajouts dans function traiter_raccourcis

[2Je n’ai pas réussi à faire que lorsque l’on utilise la balise < code >[/texte/]< / code >, donc, un de mes raccourcis au milieu de code, il garde le texte du raccourcis ; si quelqu’un trouve, je le rajoute ici.

[3Ceci ne peut pas être intégré dans inc_texte.php3 tel quel car les p entourant sont rajoutés après

Pour ceux qui utilisent la toolbar de cet article, vous trouverez ci-joint le fichier .js modifié pour intégrer ces 5 raccourcis.

Discussion

Aucune discussion

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom