Jour 18: Donner un vrai titre au calendrier

"Mais," je vous entends déjà crier, "mon calendrier possède déjà un titre. Regardez là, il y a le mois et l'année juste en haut. Et c'est en gras en plus."

Mais si vous plongez dans votre code source HTML, vous remarqueres que votre calendrier n'a pas un vrai titre. Il a la plupart du temps une cellule de tableau unique <td> définie pour recouvrir l'ensemble de la première ligne, avec une règle CSS pour l'afficher en gras. C'est bien plus simple avec une vraie balise <caption>. C'est plus facile à lire dans votre gabarit, cela épargne quelques octets dans votre page, et cela s'affiche de la même façon dans les navigateurs visuels et c'est plus accessible.

Qui en bénéficie ?

  1. Marc en bénéficie. Lynx affiche le titre avec le mot "TITRE:" (CAPTION: en anglais) au début de celui-ci, identificant parfaitement que cette ligne est le titre et non pas un en-tête de colonne ou une donnée de tableau.
  2. Jackie en bénéficie indirectement. En utilisant une vraie balise <caption> pour faciliter l'utilisation de vrais en-têtes de tableaux, ce qui bénéfécie à Jackie d'une façon dont nous discuterons demain.

Comment le réaliser ?

Vous pouvez réaliser ceci uniquement avec les outils de publication qui supportent un calendrier (ce qui n'est pas le cas de Blogger) et qui permettent de personnaliser le HTML généré pour le calendrier (ce que ne permet pas Manila).

Dans Movable Type, vous havez probablement pour votre calendrier dans votre gabarit "Main Index" quelquechose qui démarre comme ceci (cherchez "calendarhead" pour être sûr de le trouver):

<table border="0" cellspacing="4" cellpadding="0">
<tr>
<td colspan="7" align="center"><span class="calendarhead"><$MTDate format="%B %Y"$></span></td>
</tr>
<tr>
<td align="center"><span class="calendar">Sun</span></td>
...

Ne touchez pas à la balise <table> mais remplacez la première ligne de tableau <tr> par une véritable balise <caption> comme ceci :

<table border="0" cellspacing="4" cellpadding="0">
<caption class="calendarhead"><$MTDate format="%B %Y"$></caption>
<tr>
<td align="center"><span class="calendar">Sun</span></td>
...

Ne touchez pas au reste, nous nous en occuperons demain.

L'attribut class sur le <caption> est optionnel ; je le laisse ici car cela peut-être un moyen direct dans le gabarit de Movable Type d'utiliser une règle CSS pour afficher le mois et l'année en gras. En utilisant la balise <caption> ainsi, votre page devrait s'afficher exactement de la même façon que précédemment.

Dans Greymatter, le concept est le même mais les balises du gabarit sont différentes :

<caption>{{monthword}} {{yearyear}}</caption>

Encore une fois, vous pourriez changer l'apparence visuelle de caption en utilisant les feuilles de style, si c'est votre choix.

Dans Radio, le procédé est un peu plus difficile, mais pas impossible. (Je dois remercier Tony Bowden pour ces instructions.)

  1. Dans Radio, ouvrir l'application Radio. Avec Windows, click droit sur l'icône Radio dans votre système et sélectionnez "Ouvrir Radio".
  2. Dans le menu "Outils" (Tools), sélectionnez "Développeur", puis "Allez..." (Jump) (Contrôle+J). Allez vers "system.verbs.builtins.radio.weblog.drawCalendar" (pas de guillemets).
  3. Maintenant choisissezle menu "Edit", "Find and Replace", "Find..." (Contrôle+F) et trouvez "hCalendarTable". Cela devrait révéler la partie de code qui définit la balise initiale <table> et le mauvais titre de calendrier.

  4. Changez la dernière ligne de ce bloc (qui permet d'écrire monthYearString dans une balise <tr>) en ceci :

    add ("<caption>" + monthYearString + "</caption>")

  5. Fermez la fenêtre. L'application demandera si vous désirez compiler les changements, répondez oui.

  6. Si vous le désirez, vous pouvez ajouter du style à votre titre. Allez au gabarit de la page d'Accueil (dans la page Prefs) et ajoutez les styles pour caption. Voilà ce que j'utilise. Ma section <style> contenait ceci : 

    body, td, p {
  font-family: verdana, sans-serif;
  font-size: 12px;
}

    Et maintenant elle contient :

    body, td, p, caption {
    font-family: verdana, sans-serif;
    font-size: 12px;
    }

caption {
  text-align: center;
  font-weight: bold;
}

Approfondir

 
<< Jour 17 : Expliciter les accronymes  Jour 19 : Utiliser de vrais en-têtes de tableaux >>  Sommaire