Pablo Prieto - Blog - windows

Le rendu des polices sous Mac et PC

Pab. — Fri, 15 Jun 2007 12:18:00 +0200

Un article très intéressant qui explique les philosophies bien distinctes que suivent Apple et Microsoft sur la manière d'afficher et de lisser les polices sur nos écrans.

En resumé, Apple respecte au mieux la forme de la police, mais en donnant alors une impression de flou, alors que Microsoft, avec sa technologie ClearType, obtient un rendu plus net mais en déformant si besoin la fonte originale.

Pourquoi ai-je un rendu différent entre Firefox Windows et Firefox Mac ?

Pab. — Wed, 13 Jun 2007 14:18:00 +0200

Vous l'avez peut-être déjà constaté, il arrive parfois que le rendu d'une page soit différent entre Firefox sous Windows et son homologue sous Mac. Certains en concluent un peu trop vite à un bug du moteur gecko ou encore que celui-ci serait différent entre les 2 plates-formes. Heureusement il n'en est rien, il s'agit bel et bien du même moteur. Alors d'ou vient cette différence ?

Voici un exemple extrêmement simple, un paragraphe de texte de 300 pixels de large :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>untitled</title>	
	<style type="text/css" media="screen">
		p{width:300px; background:#EEE;}
	</style>
</head>
<body>	
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, (...) anim id est laborum.</p>
</body>
</html>

Et voici ce que l'on obtient sous Firefox Mac (à gauche) et Firefox Windows (à droite) :

On le voit bien ici, la différence vient tout simplement d'une hauteur de ligne différente. On n'y pense jamais assez, mais la propriété line-height est fixée par défaut à "normal" lorsque le concepteur ne la précise pas, laissant alors libre le navigateur de calculer une valeur "raisonnable" pour celle-ci. Cette valeur varie selon les systèmes d'exploitation, en fonction notamment de la résolution logique.

Voici l'extrait de la norme CSS 2 concernant la valeur "normal" :

normal
Tells user agents to set the computed value to a "reasonable" value based on the font size of the element. The value has the same meaning as <number>. We recommend a computed value for 'normal' between 1.0 to 1.2.

Voici maintenant la même page avec une hauteur de ligne fixée à 1.2 :

Le rendu est maintenant uniforme sur l'ensemble des navigateurs, et conforme au résultat attendu.

Conclusion : pensez à fixer vos hauteurs de ligne !

Safari sous Windows (suite et fin)

Pab. — Mon, 11 Jun 2007 21:08:00 +0200

C'est chose faite :)

Attention, Webkit est également à jour, on passe à la version 522.10.1

Edit : Pour info, sous Mac, la beta remplace la version actuelle (mais on peut la désinstaller pour retrouver Safari 2)

Edit 2 : D'après les premiers échos, ça bug pas mal sous Windows encore

Apollo, WebKit et Windows

Pab. — Mon, 19 Mar 2007 17:37:00 +0100

Apollo vient de sortir aujourd'hui en version alpha sur le labs d'Adobe. En très bref, Apollo permet de créer des applications Internet riches (RIA) multi-plateformes en mixant Flash, HTML, CSS et JavaScript.

Une bonne nouvelle c'est que Apollo utilise WebKit pour le rendu HTML/CSS, c'est à dire le même moteur de rendu que Safari. Apollo permet donc d'avoir le moteur WebKit disponible sous Windows, ce qui est plutôt intéressant pour les designers qui veulent tester leurs pages sans avoir de mac sous la main...

Et justement, Adobe fournit dans ses exemples, une application dénommée Scout et qui permet d'afficher n'importe quelle page web au sein d'Apollo. Un bon plan pour vérifier le rendu d'un design html/css (presque) comme sous Safari ;) Grand luxe, Scout permet même d'analyser le DOM, le code source, ... un peu comme Firebug pour Firefox.

Je ne pense pas que la version de WebKit utilisée soit exactement la même que celle de Safari mais les différences de rendus sont à priori négligeables. Le moteur JavaScript en revanche n'est pas le même, donc prudence là dessus.

Pour utiliser Scout, installez d'abord Apollo puis télécharger ensuite Scout à partir de cette page (l'enregistrement sur le site d'Adobe est nécessaire).

Safari sur Windows (ou presque)

Pab. — Tue, 08 Aug 2006 12:35:00 +0200

Swift est un navigateur pour Windows basé sur le WebKit d'Apple, le moteur de rendu de Safari

C'est encore en version alpha, mais ça va intéresser tous les concepteurs qui bossent sur Windows et qui doivent tester leur rendu sur Safari.

Bon moi j'aurais préféré le moteur d'IE6 Windows sur mac ;)

C'est ici : http://www.getwebkit.org/

(via chevrel.org)