Artisan Numérique http://artisan.karma-lab.net/node/30/atom/feed 2008-02-12T11:08:52+01:00 Bloc-note 'HTML' http://artisan.karma-lab.net/node/30 2005-12-30T09:20:29+01:00 2008-02-12T11:08:52+01:00 Ulhume Les tags HTML à l'origine permettaient un formatage des documents. Avec le temps et l'apparition des feuilles de styles CSS, HTML devient un langage plus sémantique. C'est à dire qu'il permet de définir les types de contenus qu'il contient, le formatage de ces contenus étant délégué au feuilles de style.

]]> Les tags HTML à l'origine permettaient un formatage des documents. Avec le temps et l'apparition des feuilles de styles CSS, HTML devient un langage plus sémantique. C'est à dire qu'il permet de définir les types de contenus qu'il contient, le formatage de ces contenus étant délégué au feuilles de style.

Gestion des modifications

Un peu comme l'activation du suivi de modification dans un traitement de texte les balises ins et del (définition W3C permettent de marquer des portions de texte ayant été respectivement ajoutées ou supprimées du document d'origine. Les attributs datetime et cite permettent de spécifier la date de la correction et la source (URL) ayant motivée cette dernière.

Les défauts de ce tags tiennent plus à sa gestion dans les navigateurs. Par exemple l'auteur n'y est pas pris en compte (pas d'attibut author), on ne peut pas masquer ces modifications pour avoir la verion finale, pas non plus de bulle d'aide sur la modification pour connaître les informations datetime et cite. En gros, pas très utilisable hors en tant que suivi de modification. Il s'agit plus d'un outil d'honnêteté intellectuelle à utiliser pour montrer sa bonne foi Wink. Ceci dit, rien n'empêche de créer une feuille de style prenant en charge les manques cités ici.

Je pense avoir commis quelquesde nombreuses erreurs.

Mise en avant de portions de code

Déjà pour clarifier la problématique, il y a deux types de rendu de code. Un rendu au format bloc, un listing en gros. Et un rendu en tant que citation dans une phrase. Pour le rendu de type citation nous disposons des balises suivantes :

Balise code
Définition d'une portion de code. ex: for (int value; valueList)
Balise var
Définition d'une variable du code. ex: int rowWidth. A noter que cette balise hérite de code.
Balise kbd
Représente une saisie clavier. ex: # dd
Balise samp
Définit le résultat de sortie d'une commande, fonction, etc.. ex: Syntax Error

Maintenant que nous savons cela, il nous manque malgrès tout un élément. Comment définir un paragraphe de type "portion de code". La solution préconisée par le W3C consiste à utiliser les balise pre et code. La première étant le conteneur de la seconde. Ce qui nous donne un code du genre :

  1. <pre><code>
  2. Mon code source
  3. </code></pre>

Ce qui est assez désagréable avec cette solution c'est que cela devient assez lourd à relire dés que l'on utilise du code XML ou HTML car tous les > et < doivent être remplacés par des &gt; et &lt;. Maintenant, un exemple reprenant l'ensemble des idées de ce chapitre :

  1. &lt;pre&gt;
  2. &lt;kbd># ls *.sh&lt;/kbd&gt;
  3. &lt;samp>test.sh&lt;/samp&gt;
  4. &lt;kbd># cat test.sh&lt;/kbd&gt;
  5. &lt;code&gt;
  6. export &lt;var>VAR&lt;/var&gt;=value
  7. echo $VAR
  8. &lt;/pre&gt;&lt;/code&gt;

Gestion des ellipsis

Les ellipsis sont les ... que l'on trouve à la fin d'une phrase tronquée lorsque il n'y a pas assez de place pour l'afficher entièrement. J'ai longtemps cherché un moyen de gérer ce fonctionnent en CSS car c'est à peu prés impossible à programmer (il faudrait connaître la taille de la font au niveau client). Et j'ai trouvé une solution qui semble fonctionner http://www.hedgerwow.com/360/dhtml/text_overflow/demo2.php.

Cela donne donc le code CSS suivant :

  1. .ellipsis {
  2.  
  3.    white-space:nowrap;
  4.    -o-text-overflow:ellipsis;
  5.    text-overflow:ellipsis;
  6.    overflow:hidden;
  7.    display:block;
  8.    position:relative;
  9.    zoom:1; 
  10. }
  11.  
  12. .ellipsis:after{
  13.   content:'';
  14.   display:block;
  15.   clear:both;
  16. }
  17.  
  18.  
  19. .ellipsis span {
  20.    white-space:nowrap;
  21.    -o-text-overflow:ellipsis;
  22.    text-overflow:ellipsis;
  23.    *width:100%;
  24.  
  25.    float:left; 
  26.    overflow:hidden;
  27.    max-width:97%;
  28. }
  29.  
  30. .ellipsis ins{
  31.   height:10px;
  32.   float:left;
  33.   width:1px;
  34.   position:relative;
  35.   left:-95%; 
  36. }
  37.  
  38. .ellipsis var{
  39.   position:absolute;
  40.   right:0;
  41.   top:0;
  42.   bottom:0;
  43.   background:#fff;
  44.   display:none;
  45. }
  46.  
  47. .ellipsis var:after{
  48.   content:'...';
  49. }

dont voici un résultat possible (toujours fauché sur le meme site) :
Un texte bien bien long qui dépasse la taille autorisée Un texte bien bien long qui dépasse la taille autorisée Un texte bien bien long qui dépasse la taille autorisée Un texte bien bien long qui dépasse la taille autorisée
Un texte bien bien long qui dépasse la taille autorisée Un texte bien bien long qui dépasse la taille autorisée Un texte bien bien long qui dépasse la taille autorisée Un texte bien bien long qui dépasse la taille autorisée
Un texte bien bien long qui dépasse la taille autorisée Un texte bien bien long qui dépasse la taille autorisée Un texte bien bien long qui dépasse la taille autorisée Un texte bien bien long qui dépasse la taille autorisée

Alors sous FireFox, il manque les fameux ... mais 80% de la fonctionnalité est là. Pour la compléter, si vous y tenez (personnellement cela me va très bien comme cela), le site que j'ai cité plus haut donne en plus un petit script permettant l'émulation du tag css var:after.

]]>