Archives du mot-clé Redux:Web coding

Interlignage, exposants et Unicode

Sur commentcamarche.net, un utilisateur demandait comment avoir des exposants qui ne cassent pas l’interlignage. C’est un vieux problème jamais vraiment résolu dans les navigateurs autrement qu’en utilisant des règles CSS (CSS auteur par opposition à CSS navigateur).

Un contributeur proposait de passer par les chiffres en indice disponible dans les polices.

on peut aussi écrire directement à la suite texte :

exemple¹ et exemple² soit (je décompose) & sup 1 ; et & sup 2 ;

ça évite d’avoir à écrire une balise, et le texte et placé dans le même interligne que le texte.

limité à 1, 2 et 3.

Comme je me suis fendu d’une longue réponse qui me parait utile à d’autres, je vous la retranscrit ici

Non, non et non.

  1. Non, parce que tous les tous les chiffres sont disponibles. Cependant, les chiffres de 4 à 0 ne sont pas placés au même endroit dans Unicode (vous utilisez Unicode n’est-ce pas ? Vous n’êtes pas resté au XXe siècle ?)La liste est ici, avec exposants et indices

    ⁰¹²³⁴⁵⁶⁷⁸⁹₀₁₂₃₄₅₆₇₈₉

  2. Non parce que caractères Unicode ne sont pas conçus pour être utilisés, mais pour être compatibles avec l’existant. Il existe par exemple des caractères Unicode pour les chiffres romains, mais il ne sont pas conçus pour être utilisés dans de nouveaux documents, mais juste pour permettre à d’anciens documents d’être lus (pour un chiffre romain, on recommande ainsi d’utiliser le ou les caractères latins correspondants (I, II, III, IV…), quand bien même le chiffre romain existe dans Unicode (Ⅰ,Ⅱ,Ⅲ,Ⅳ)…
  3. Non parce que faire ainsi amène à deux poids deux mesures : pour les chiffres, vous utilisez les caractères Unicode et pour les lettres, mmh ? Et voilà, vous vous retrouvez à devoir mélanger de caractères d’exposant et des CSS, au lieu d’utiliser des CSS partout (vu qu’il est impossible d’utiliser des caractères d’exposant partout).

En espérant avoir êté utile.

flattr this!

WordPress, stop believe you’re smarter than me!

According to my attempts (minimal text, empty CSS file), WordPress forces display of hyperlinks as such, even when you don’t want to. Here’s an example to prove it, a CSS that I wanted to give “as it appears in BBEdit” (whils keeping a real link):

/* http://david.latapie.name/blog/765-modifications-esthetiques */

[hreflang]:after	{
    background:transparent;
    color:#666;
    content:"\a0[" attr(hreflang)"]";
    font-size:smaller;
    text-decoration:none
}

Here’s the code that matters: <a href="#" style="color:inherit;text-decoration:none">foo</a>

I even tried with !important (usually a bad practice), but no luck.

I challenge anyone to prevent WordPress from overriding me. And I am fully open to any plugin.

I am far from the only one to complain (this link is about HTML, not CSS, but I also experienced this with HTML). (this link is about HTML, not CSS, but I also experienced this with HTML).

flattr this!

Bluebox child skeleton: definitive WordPress starter theme (so far)

Short version

Sandbox + Blueprint + child theme

Let’s call it the “Bluebox child

Long version

With the combination of these three tools, you get a clean blog layout to work with.

  • No need to worry about the layout, Sandbox takes care of it (assuming you are not looking for an exotic layout).
  • No need to worry about browser inconsistencies, Blueprint takes care of it (as far as we are talking desktop browser, I mean).
  • No need to worry about upgrade loss, child theme takes care of it.

Some extra modifications are required because the blueprint code change since the publication on michaelwender.com. I added the said modifications in comments.

Many thanks to Scott Wallick and Andy Skelton for Sandbox, Olav Bjorkoy and Christian Montoya, Joshua Clayton, Chris Eppstein and Glenn Rempe for Blueprint, Michael Wender for the tutorial on mixing the both, Ian Stewart for the tutorial on child themes and Guy James Staniforth for mixing this with the previous combination.

And now, let’s the real fun begin: customise this great skeleton to your needs!

flattr this!

Graisses de police, le support complet se fait attendre

On parle beaucoup du test Acid3, et vas-y que je te supporte tout, puisque j’ai un score de 100 % au test.

Ben voyons.

98 % des navigateurs ne gère toujours pas CSS 1.

Et je le prouve : ce n’est que maintenant qu’un navigateur, un seul, et uniquement sur une seule plateforme, sait enfin grer les gradations de polices (font-weight:700).

CSS 1 ! C’tait en 1996. Nous sommes en 2009. Treize ans. Treize ans ! Les plus jeunes de mes lecteurs n’taient même pas ns à l’poque.

Dans le même ordre d’ide : les polices tlchargeables ont onze ans (CSS 2) et, ç commence à peine se rveiller (pour le meilleur et pour le pire). Vous pouvez vrifier par vous-même.

flattr this!

Improving Leopress theme for WordPress

I love the Leopress-fr theme (adapted from Leopress 1.0), but it has several issues, some so fundamental I can neither use it nor bugfix it.

  • background is not fixed. It fixed it (pun intented): html {background:attachment:fixed}
  • I favour justify over left when it comes to text-align. I fixed this too: .post .entry {text-align:justify}
  • not widget-ready. Quite important for me and I don’t have the proficiency to fix it.
  • does not display tags in posts. Very important for me and I don’t have the proficiency to fix it.
  • ignore the a element in post! Fundamental and I don’t know how to fix this.
  • no bullet for bulleted lists. Strange, since the code is there. I have the intuition it comes from the same problem with the lack of anchors. Fundamental and I don’t know how to fix this.

The last twos problem may be related to this theme not being WordPress 2.8-ready. If, by any chance, you have some spare time…

flattr this!

Individualiser les formats d’entrée dans Drupal

Dans Drupal, je croyais que le filtrage HTML (format d’entrée ; /admin/settings/filters/ pour reprendre la terminologie Drupal) ne pouvait pas être individualisé, mais juste personnalisé. Ainsi, si on active Filtre HTML, seul un ensemble limité de HTML est autorisé.

Là où était mon erreur, c’était de croire que cet ensemble limité était défini pour l’ensemble du site. Que nenni ! Uniquement pour le format d’entrée courant. Joie !

Un exemple pour mieux comprendre :

  1. Texte brut — à la commentaires en mode texte de Dotclear
  2. XHTML filtré — un poil de HTML est autorisé — à la commentaires wiki de Dotclear, mais sans wikibarre :(
  3. XHTML assisté — pour les utilisateurs authentifés ; ils peuvent utiliser tout le XHTML qu’ils veulent (il faudrait que je vérifie ce que ça donne par rapport à l’insertion de styles CSS)
  4. XHTML libre— pareil mais sans les outils plus intelligents que l’utilisateur (ainsi, un retour à la ligne après 72 caractères, typique des geeks, ne sera pas interprété comme un retour chariot). Les gardes-fou (balise non fermée) sont cependant toujours présents.

Dans cet exemple, je ne savais pas que l’on pouvait avoir à la fois 1 (HTML filter/rien) et 2 (HTML filter/<a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>).

Source : Raw text filter.

flattr this!

Liste de meta tags

Grandement inspiré de Meta Tags Explained.

Balises Dublin Core
C’est une tentative de formalisation des meta par des documentalistes. Il y a 27 (15 + 12) balises, certaines faisant doublon avec des existantes. Ce n’est pas un problème, car les 15 valeurs sont préfixées code>DC. et l’objectif est de ne pas avoir à se reposer sur les balises « anciennes ». Rentrer dans le détail de ces balises dépasse le cadre de cet article. Sachez juste que c’est une bonne idée de renseigner les valeurs Dublin Core.
abstract
Surtout utilisé dans les cercles universitaires, c’est une courte description (10 mots). C’est entre description (pour une vraie phrase) et keywords (pour la concision). Indexé uniquement par les moteurs de recherche universitaires.
author
Prénom et nom de l’auteur (pas du webmaster qui a mis en ligne). Pas indexé.
http-equiv="bla
Il remplace l’entête HTTP idoine, il est donc à éviter si vous pouvez vous-même changer les entêtes HTTP. Le seul cas où il est toujours utile est content-language (voir plus bas).
content-language
Il remplace l’entête HTTP idoine, il est donc à éviter si vous pouvez vous-même changer les entêtes HTTP. Pas indexé.
content-script-type
Il remplace l’entête HTTP idoine, il est donc à éviter si vous pouvez vous-même changer les entêtes HTTP. Pas indexé, même les navigateurs l’ignorent.
content-type
Il remplace l’entête HTTP idoine, il est donc à éviter si vous pouvez vous-même changer les entêtes HTTP. Cependant, et contrairement à tous les autres http-equiv, il reste pertinent (et même indispensable) dans un cas de figure : la validation HTML d’une page Web hors-ligne (quand vous écrivez votre HTML sur votre machine, sans pseudo-serveur) écrit en autre chose que de l’US-ASCII (dit autrement, pour que vos é et Ç ne produisent pas une erreur). En effet, comme il n’y a pas de flux réseau, il n’y a pas d’entête HTTP et ce meta est donc la seule manière de connaître l’encodage de votre fichier. Pas indexé.
copyright
Pas indexé.
description
Description de la page (pas du site). Pour des raisons de catalogage, ne devrait pas comporter plus de 250 caractères (les moteurs de recherche, eux, recommendent même moins de 200 caractères). Elle est destinée à des humains, donc faites-là accrocheuse (ce qui peut avoir des sens variés, selon votre lectorat). Tâchez de réutiliser les mots-clés de keywords.
designer
Sert aux designers comme moyen de rappeler que c’est eux qui ont conçu la page. Ne marche bien sûr que pour du pompage de très bas niveau (qui reste cependant très populaire, OpenWeb peut en attester). Pas indexé (et limite pas pertinent).
distribution
Accepte trois valeurs : global, local et IU. Pas indexé (et limite pas pertinent). Si vous voulez réserver l’usage des pages, il y a beaucoup mieux (robots.txt, .htaccess et carrément du mot de passe ou un intranet).
expires
Quand est-ce que la page sera mise à jour. Plus indexé.
generator
Comme designer (ou, dans les courriels, X-Mailer) elles servent de pub pour le concepteur – ici, le logiciel utilisé – et, à mon avis, décridibilisent le site. Pas indexé.
googlebot
Comme robots, mais uniquement pour Google. Indexé par Google. Ne pas utiliser, car ce serait revenir au temps du optimisé pour….
icbm
Pour donner une adresse physique. C’est assez vague : est-ce l’adresse physique du serveur (faible intérêt) et dans ce cas, il faut la changer quand le serveur change de place, l’adresse de la résidence principale de l’éditeur principal, le lieu d’où est écrit une page pour un blog itinérant, le lieu dont parle la page… Ça ressemble plus à une mode qu’à autre chose. Quoiqu’il en soit, vous pouvez connaître la valeur à entrer en allant sur geourl.org/add.html.
keywords
Le plus connu et aussi le plus abusé, il n’est du coup partiquement plus utilisé.
language
Fait la même chose que content-language, mais avec le vrai nom, en anglais, de la langue (English au lieu de en). Ne pas utiliser, car html xml:lang (ou html lang si vous êtes encore en HTML) fait la même chose, en mieux — d’une manière générale, une balise meta est toujours la moins bonne des manières formalisées de faire quelque chose). Indexation inconnue, mais, comme j’ai dit, mieux vaut ne pas l’utilser.
mssmarttagspreventparsing
Un temps, Microsoft envisageait un système de smart tags qui, selon la communauté des développeurs Web, ferait plus de mal que de bien (sauf à Microsoft, bien sûr). Microsoft avait prévu de se retirer de leur « programme » d’opt-in avec cette valeur meta mise à true. Du fait du très mauvais retour dans la presse, Microsoft a annulé la chose, mais plus d’un site méfiant conserve cette valeur, au cas où. Cependant : d’une part, rien n’empêche Microsoft de n’en avoir cure (même problème que pour les robots, d’ailleurs) et d’autre part, si on commence comme ça, ça peut aller loin (les meta spécifiques aux moteurs de recherche). Indexation inconnue.
msn
A une seule valeur, noodp où la description de dmoz/ODP sera remplacée par celle de MSN Search. Indexé par MSN.
publisher
Comme generator. Pas indexé, ne pas utiliser.
rating
Noter le site, un truc pour les États-Uniens pudibonds et les Chiennes de garde. Pas indexé, ne pas utiliser — un RDF de l’ICRA a plus de sens et, encore une fois, une balise meta et la moins banne manière formalisée de faire quelque chose.
refresh
Il remplace l’entête HTTP idoine, il est donc à éviter si vous pouvez vous-même changer les entêtes HTTP (une redirection 301, ou parfois une 302). Indexation inconnue.
reply-to
Présent dans le brouillon de HTML 3, qui n’est jamais sorti et qui était bien). Malhereusement, un paradis à spam, utilisez donc plutôt link contact. Indexation inconnue, ne pas utiliser.
resource-type
Double-emploi avec la DTD.
revisit-after
Même objectif que expires. Pas indexé.
robots
Gère le comportement des robots. Valeurs : index (indexer la page), follow (suivre les liens de la page), noindex, nofollow, all (valeur par d

flattr this!