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

Qui êtes-vous ?

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

Dernière modification de cette page le 29 septembre 2018