5 Nouveaux raccourcis typographiques & validation HTML 4.01 transitional

All contributions published for previous SPIP versions

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

Footnotes

[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.

updated on 29 September 2018

Discussion

Aucune discussion

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom