Dur Comme Faire

Cette fois ça se passera le jeudi 19 mai au Barbitur'Hic, 26 rue Nicolas Leblanc à Lille, à partir de 20h00. Comme d'habitude, tout le monde est le bienvenu quelque soit le niveau de geekitude.

Pour s'inscrire, il faut aller sur le site d'AperoPHP.

Le site de la chaine MCM est touché à son tour par l'affichage de messages d'erreur PHP.

Après quelques recherches sur Internet, j'ai découvert un article expliquant une manière de déterminer la luminosité d'une couleur. Je me suis donc empressé d'améliorer ma fonction qui permet de déterminer la couleur d'un texte en fonction de celle du fond.

Le principe est simple : on donne un poids différent à chacune des composantes de la couleur selon l'importance qu'elle a dans la perception que nous avons de la luminosité. La formule suivante retourne une valeur comprise entre 0 et 255. 0 étant la plus faible luminosité possible et 255 la plus forte.

luminosité = ((rouge x 299) + (vert x 587) + (bleu x 114))
                  / 1000

Ma fonction devient donc :

function couleurTexte($couleur)
{
    $rouge      = hexdec(substr($couleur, 1, 2));
    $vert       = hexdec(substr($couleur, 3, 2));
    $bleu       = hexdec(substr($couleur, 5, 2));
    $luminosite = (($rouge * 299) + ($vert * 587) + ($bleu * 114))
                      / 1000;
    return ($luminosite > 127) ? '#000000' : '#FFFFFF';
}

Tandis que mon plugin Smarty devient ceci :

<?php
/**
* Smarty plugin
* @package Smarty
* @subpackage plugins
*/

/**
* Smarty {text_color} function plugin
*
* Type:     function<br>
* Name:     text_color<br>
* Date:     April 15, 2005<br>
* Purpose:  determinate the text color depending on the
                 background color<br>
* Input:
*         - bkg   = color of the background
*         - light = color for the light text (optional,
                       white is default)
*         - dark  = color for the dark text (optional,
                        black is default)
*
* Examples:<br>
* <pre>
* {text_color bkg=#FF0000}
* {text_color bkg=#FF00DE light=#CCCCCC dark=#333333}
* </pre>
*
* @link http://smarty.php.net/manual/en/language.function.
         text_color.php {text_color}
*       (Smarty online manual)
* @author Jean-Marc Fontaine <jmf at durcommefaire dot net>
* @version  1.1
* @param array
* @param Smarty
* @return string
*/
function smarty_function_text_color($params, &$smarty)
{
    if (substr($params['bkg'], 0, 1) != '#') {
        return 'inherit';
    }
   
    $red          = hexdec(substr($params['bkg'], 1, 2));
    $green        = hexdec(substr($params['bkg'], 3, 2));
    $blue         = hexdec(substr($params['bkg'], 5, 2));
    $brightness   = (($red * 299) + ($green * 587) + ($blue * 114))
                         / 1000;
    $dark_color   = isset($params['dark']) ? $params['dark'] :
                                '#000000';
    $ligth_color  = isset($params['light']) ? $params['light'] :
                               '#FFFFFF';

    return ($brightness > 127) ? $dark_color : $ligth_color;
}

/* vim: set expandtab: */

?>

Un comparatif montre que dans certains cas, la nouvelle méthode améliore grandement la lisibilité du texte.

Récemment, j'ai été confronté à un problème a priori simple. Dans une application PHP, les utilisateurs peuvent choisir une couleur à associer à un élement. Dans la liste des éléments, cette couleur est utilisée comme couleur de fond. Cela est très pratique car très visuel seulement cela peut poser un problème de lisibilité lorsque la couleur de fond est trop proche de celle du texte.

Il y a bien la solution de demander à l'utilisateur une couleur pour le texte en plus de la couleur de fond mais cela est contraignant, d'autant plus qu'il est facile d'automatiser cela.

Toute l'astuce tient dans un chiffre : 102. En effet, c'est la valeur décimale clé pour le canal vert de la couleur. Si la valeur est inférieure ou égale à 102, le texte doit être de couleur claire, sinon de couleur foncée. Cela peut se traduire ainsi en PHP :

function couleurTexte($couleur)
{
    $vert = hexdec(substr($couleur, 3, 2));
    return ($vert > 102) ? '#000000' : '#FFFFFF';
}

Cette fonction reçoit le code hexadécimal de la couleur de fond et retourne le code de la couleur du texte.

Enfin, pour les utilisateurs de Smarty, j'ai écrit ce petit plugin qui implémente cette fonctionnalité de manière un peu plus évoluée :

<?php
/**
* Smarty plugin
* @package Smarty
* @subpackage plugins
*/

/**
* Smarty {text_color} function plugin
*
* Type:     function<br>
* Name:     text_color<br>
* Date:     April 4, 2005<br>
* Purpose:  determinate the text color depending on the
                 background color<br>
* Input:
*         - bkg   = color of the background
*         - light = color for the light text (optional,
                       white is default)
*         - dark  = color for the dark text (optional,
                        black is default)
*
* Examples:<br>
* <pre>
* {text_color bkg=#FF0000}
* {text_color bkg=#FF00DE light=#CCCCCC dark=#333333}
* </pre>
*
* @link http://smarty.php.net/manual/en/language.function.
         text_color.php {text_color}
*       (Smarty online manual)
* @author Jean-Marc Fontaine <jmf at durcommefaire dot net>
* @version  1.0
* @param array
* @param Smarty
* @return string
*/
function smarty_function_text_color($params, &$smarty)
{
    if (substr($params['bkg'], 0, 1) != '#') {
        return 'inherit';
    }
   
    $green       = hexdec(substr($params['bkg'], 3, 2));
    $dark_color  = isset($params['dark']) ? $params['dark'] :
                                '#000000';
    $ligth_color = isset($params['light']) ? $params['light'] :
                               '#FFFFFF';

    return ($green > 102) ? $dark_color : $ligth_color;
}

/* vim: set expandtab: */

?>

La série des gros sites mal configurés s'allonge on dirait :