Langage à balisage ElzML

Message 1, par Elzen

§ Posté le 10/12/2012 à 21h 31m 22

Note : je suis conscient que l'aspect visuel de ce texte laisse clairement à désirer ; et que sa clareté est peut-être dans le même cas. Si quelqu'un se sent de faire une présentation plus soignée, je ne verrais aucun inconvénient à remplacer ma version par la sienne.

ElzML (pour « Elzen's Markup Language ») est actuellement le langage le plus puissant à votre disposition sur ce blog. Conçu pour être utilisable sur un clavier azerty standard sans avoir à recourir au troisième ou quatrième niveau des touches (ce qui le rend théoriquement pratique à utiliser quelle que soit la variante précise du clavier tant que ça reste un azerty ; mais je pense que les utilisateurs de qwerty ou de bépo devraient pouvoir se débrouiller aussi), il permet de gérer aussi bien des fonctions stylistiques que des fonctions sémantiques. C'est le langage que j'utilise pour rédiger la plupart de mes articles.

À la base, il se voulait assez simple ; comme d'hab, en rajoutant des fonctions bizarres dans tous les sens, c'est devenu un truc un peu complexe dont une partie ne sera pas forcément facile à retenir, surtout pour un débutant. Alors bon, voilà : la base, c'est qu'on ouvre une balise en insérant deux caractères « < » de suite, et on la referme avec deux caractères « > » de suite.

Le premier caractère de la balise sert à identifier de quel type de balise il s'agit, et le reste du contenu permet de définir plus précisément ce comportement. Pour plusieurs types de balises, on peut définir plusieurs propriétés à la fois, par un système clefs/valeurs de la forme : « clef1::valeur1;;clef2::valeur2;;clef3::valeur3 ». Des espaces peuvent éventuellement être insérées avant les noms des clefs, si vous trouvez ça plus lisible.

Les différents types de balises reconnus sont :

« & » indique que le contenu est une image insérée à l'intérieur du texte.

Le contenu est de type clefs/valeurs, voyez l'explication ci-dessous(1).
« $ » indique que le contenu est une image insérée dans son propre bloc, entre deux passages de texte.

Le contenu est de type clefs/valeurs, voyez l'explication ci-dessous(1).
« £ » permet d'insérer une ligne de séparation entre deux passages du texte (changement de thème…).

Le contenu est ignoré si vous en précisez un.
« ? » permet d'insérer un lien interne vers un marqueur de position (défini par la balise suivante).

Voyez un peu plus bas pour le fonctionnement de ce couple de balises(2).
« ! » permet d'insérer un marqueur de position, auquel on peut faire référence avec la balise précédente.

Voyez un peu plus bas pour le fonctionnement de ce couple de balises(2).
« * » permet d'insérer une émote dans le texte.

Le contenu doit permettre d'identifier l'émote en question (par exemple, « ;-) » ou « wink »).
« µ » permet d'insérer un commentaire HTML, qui s'affichera donc dans le code source de la page, mais pas dans la page.

Le contenu est le code HTML correspondant. L'intérêt est évidemment assez limité, mais c'était amusant.
« ; » permet d'insérer un marqueur de retour à la ligne possible, permettant au navigateur de couper un mot trop long.

Le contenu est ignoré si vous en précisez un.
« : » permet d'insérer une barre de progression (inutile, donc indispensable, non ?)

Le contenu indique, en pourcentage, la progression à afficher.
« / » permet d'indiquer l'arrêt de la dernière balise de mise en forme actuellement ouverte.

Le contenu est ignoré si vous en précisez un.
« % » permet de passer à l'élément suivant d'une série (liste, définitions ou notes de bas de page)

Si aucune série de ce genre n'est ouverte et qu'aucun contenu n'est précisé, un simple retour à la ligne est inséré.

Le contenu de la balise permet de spécifier un titre au nouvel élément inséré ou, si aucune série n'est ouverte, de mettre un titre comme ça, en vrac.
« § » permet de spécifier l'ouverture d'un nouveau bloc particulier.

Cette balise de mise en forme reste ouverte jusqu'à la fin du texte, ou jusqu'à ce qu'une balise de fermeture l'arrête.

Le contenu est de type clefs/valeurs, voyez l'explication ci-dessous(3).
« + » permet de spécifier un bloc nouvellement ajouté, en cas d'édition tardive.

Cette balise de mise en forme reste ouverte jusqu'à la fin du texte, ou jusqu'à ce qu'une balise de fermeture l'arrête.

Le contenu, si précisé, doit être le timestamp correspondant à la date d'édition du message.
Si le premier caractère ne correspond à aucun des précédents, on considère que l'on se trouve dans une balise de mise en forme simple, à l'intérieur du texte.

Cette balise de mise en forme reste ouverte jusqu'à la fin du texte, ou jusqu'à ce qu'une balise de fermeture l'arrête.

Le contenu est de type clefs/valeurs (comprenant donc le premier caractère de la balise), voyez l'explication ci-dessous(4).

Réglage des balises d'image

(1 : §, ↑, ↑) Une balise d'image reconnaît quatre sortes de clefs (le reste sera ignoré) :

« image » (ou « img », ou « src », ou « source » qui sont des alias), qui sert à spécifier l'adresse à laquelle se trouve l'image à afficher.
« text » (ou « alt » ou « alternate » pour réutiliser le vocabulaire HTML), qui sert à indiquer le texte alternatif.
« link », qui sert à indiquer une adresse sur laquelle se rendre en cliquant sur l'image.
« align », qui sert à indiquer l'alignement des images (seules les valeurs « left » et « right » sont reconnues).

Si vous précisez plusieurs fois la clef indiquant une adresse d'image, une seule balise affichera plusieurs images d'un coup dans votre message. Pensez à renseigner autant de fois le texte alternatif (et, si besoin, le lien) qu'il y a d'images, sinon seule la première sera concernée (s'il n'y a pas de précisions pour le texte alternatif des dernières images, leur adresse sera utilisée). L'alignement, par contre, est commun à toutes les images de la balise.

Au niveau de l'alignement, justement : par défaut, les images situées dans leur propre bloc sont centrées ; c'est pour cela que vous ne pouvez préciser qu'un alignement à droite ou à gauche. L'alignement est également reconnu pour les images qui ne sont pas dans leur propre bloc : dans ce cas, il permet de faire en sorte que l'image « flotte » sur la droite ou sur la gauche, entourée par le reste du texte.

Le système de liens internes

(2 : §, ↑, ↑) ElzML vous permet donc d'insérer des liens internes au texte. Habituellement, je les utilise pour mes notes de bas de page, mais elles peuvent être placées n'importe où dans le texte, comme vous avez pu le constater ici.

Si vous ne précisez aucun contenu, une numérotation automatique sera mise en place, les balises de marquage devant arriver dans le même ordre que les balises de référence. Si vous indiquez un contenu, celui-ci sera utilisé à la fois comme étiquette affichée, et comme manière d'identifier le marqueur, ce qui vous permet notamment d'en changer l'ordre.

Au niveau du marqueur, les différentes flèches permettent de remonter au niveau de la référence sur laquelle vous avez cliqué. Il est bien sûr possible de placer une référence en dessous du marqueur, mais dans ce cas, le parseur (qui ne lit qu'une seule fois le message, et dans un seul sens) ne vous ajoutera pas de flèche vers le bas.

Lorsque les marqueurs sont utilisées à l'intérieur des notes de bas de page, un des scripts que vous pouvez activer sur la page de réglages vous permet de les récupérer, au survol de ou au clic sur une référence, sans avoir à aller jusqu'au bas de la page pour les lire.

Réglage des balises de bloc

(3 : §, ↑) Une balise de bloc reconnaît cinq sortes de clefs (le reste sera ignoré) :

« title » permet de donner un titre à la partie considérée.

Il s'agit d'un titre interne (par exemple, dans une liste, le titre sera placé à l'intérieur du premier item, et ne sera donc pas vu comme un titre général pour la liste).

Si vous ne précisez aucune valeur sémantique particulière (voir ci-dessous), mais que vous précisez un titre, le bloc est automatiquement reconnu comme étant une section.
« list » permet d'indiquer le type de liste à utiliser, parmi les valeurs suivantes :
- « number » (liste numérotée ordinaire)
- « roman » (liste numérotée avec des chiffres romains)
- « upper » (liste “numérotée” par des lettres majuscules)
- « lower » (liste “numérotée” par des lettres minuscules)
(Toute autre valeur fera en sorte que l'option soit ignorée)

Cette clef porte donc une double portée : stylistique, puisqu'elle définit la propriété de style correspondant au mode d'affichage, et sémantique, puisqu'elle indique que le bloc est une liste numérotée.
« style » permet de donner un style particulier au bloc de texte (sans aucune fonction sémantique, donc). Voyez la liste des styles reconnus un peu plus bas(5).
« align » permet de définir l'alignement du bloc de texte (encore une fois, purement stylistique, sans valeur sémantique). Les valeurs reconnues sont « left », « center » et « right » (le texte étant au départ aligné à gauche, mais plusieurs balises pouvant s'enchaîner pour changer ça).

Note : Normalement, le texte aurait dû être justifié dans tous les cas. Seulement, la propriété CSS adaptée n'est pas encore correctement reconnue par la plupart des navigateurs ; donc histoire d'avoir un affichage correct, je l'ai temporairement désactivée en attendant que ça s'améliore. Pour l'instant, donc, le texte est justifié quand il est aligné à gauche, et ne l'est pas sinon.
« semantic » (qui peut être abregé en « sem ») permet de donner une fonction sémantique particulière au bloc.

Si cette clef n'est pas renseignée, et si aucune des options précédentes n'a réglé les choses, le bloc est géré par une balise « div », qui ne porte aucune fonction particulière.

Les valeurs reconnues sont les suivantes :
- « code » indique un bloc de code (aucune balise ne sera reconnue jusqu'à la fermeture, normalement).
- « quote » indique un bloc de citation, visuellement identifié (pour répondre à un message, par exemple).
- « list » indique que le bloc est une liste non-numérotée.
- « definition » (ou « definitions », ou « def », ou « defs ») porte un nom assez explicite, je crois.
- « details » indique que le bloc contient des détails qui n'ont pas forcément à être affichés directement (ils sont donc placés dans une boîte que vous pouvez ouvrir et refermer en cliquant sur l'étiquette prévue à cet effet).
  
  Note : sémantiquement parlant, je ne sais pas si cette balise est adaptée pour insérer des « spoilers ». Toute documentation à ce sujet sera la bienvenue.
  
  Note : cette balise n'est pas encore bien reconnue par certains navigateurs, donc pour le moment, un script permet d'émuler son comportement si ça ne marche pas. Voyez par ici.
- « footnote » (ou « footnotes », ou « note », ou « notes ») signale que le bloc contient une note de bas de page. Ceci dit, malgré le nom, vous pouvez tout-à-fait insérer des notes de bas de page en plein milieu du message.
- « section » indique que le bloc contient une section, c'est-à-dire une partie pouvant être prise isolément du reste, avoir un titre spécifique, etc.

Réglage des balises de mise en forme simple

(4 : §, ↑) Une balise de mise en forme simple reconnaît trois sortes de clefs (le reste sera ignoré) :

« link » permet de transformer le texte en lien cliquable, la valeur étant l'URL cible.
« style » permet de donner un style particulier au bloc de texte (sans aucune fonction sémantique, donc). Voyez la liste des styles reconnus un peu plus bas(5).
« semantic » (qui peut être abregé en « sem ») permet de donner une fonction sémantique particulière au texte.
- « code » indique un bout de code (aucune balise ne sera reconnue jusqu'à la fermeture, normalement).
- « quote » indique une citation (des guillemets seront ajoutés automatiquement par la CSS).
- « italic » (ou « foreign ») permet de spécifier que le texte est différent du reste, par exemple parce qu'il s'agit de termes étrangers.
- « misspelled » permet de spécifier que le texte est incorrectement orthographié (dans une citation, par exemple).
- « wrong » permet de spécifier que le texte est erroné (visuellement, il sera barré).
- « strong » permet de signaler un mot important, qui sera renforcé (mis en gras).
- « emphasis » (qui peut être abrégé en « emph ») permet de mettre le texte en emphase.
- « mark » permet de surligner du texte (pour marquer un passage intéressant d'une citation, par exemple).
- « defined » (ou « def », ou « dfn ») permet d'indiquer que le mot va être défini dans le texte.
- « reference » (ou « ref », ou cite ») permet de mettre en valeur le titre d'un ouvrage.
- « removed » (ou « deleted », ou « rem », ou « del ») permet d'indiquer que le texte a été supprimé.
- « inserted » (ou « added », ou « ins », ou « add ») permet d'indiquer que le texte est nouvellement ajouté.
- « subscript » (ou « sub ») permet de mettre le texte en indice.
- « exponent » (ou « super », ou « exp », ou « sub ») permet de mettre le texte en exposant.
À l'origine, je comptais faire en sorte qu'une seule balise de ce genre puisse insérer plusieurs fonctions sémantiques d'affilée. J'ai cependant abandonné cette idée, parce que je ne pense pas qu'un même bout de texte complet puisse avoir besoin de deux fonctions différentes (les liens étant une exception, vous pouvez à la fois mettre un lien et une autre sorte de balise).

Éléments de style proposés

(5 : §, ↑, ↑) Plusieurs éléments de style peuvent être utilisées (éventuellement simultanément) pour les blocs ou pour les mises en forme simple. Il s'agit d'attributs de style pur, sans aucune valeur sémantique propre, qui sont gérées par la CSS de la page (je pourrais éventuellement en rajouter en cours de route, si besoin).

« underline » permet de souligner le texte.
« italic » permet d'afficher le texte en italique (les balises sémantiques de mise en italique le remettront alors droit).
« bold » permet de mettre le texte en gras.
« caps » permet d'afficher un texte en capitales (et non pas en majuscules).
« callig » permet d'utiliser une police calligraphique.
« goth » permet d'utiliser une police gothique.
« code » permet d'utiliser une police monospace, comme celle utilisée pour le code.

Si vous avez des suggestions d'amélioration, je vous écoute.