Taille de police différente sur Mac et Linux

S

SuperCed

Membre expert
Club iGen
20 Juin 2001
1 331
70
45
superced.rb38.eu
Nous avons des problèmes d'affichage sur notre site web sur Mac et Linux (Ubuntu) avec Firefox 3.
Sur Windows, tout est ok. Sur Safari, tout est ok aussi.
A noter aussi que nous n'avions pas de problème avec Firefox 2.

Il semble que la taille des polices soit différente selon les plateforme.

SPARTOO.COM, chaussures homme, chaussures femme, chaussures de sport, chaussures de ville

Regardez bijoux et vêtements, c'est tout décalé.
Nous avons utilisé une police de type Verdana.

Avec Arial, tout semble ok, par contre, dès que l'on met Verdana, le texte se décale.

Savez-vous d'où ça peut venir?

Voici le css http://img.spartoo.com/css/spartoo2.css

et la partie concernée est :

Bloc de code: 
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size-adjust: none;
font-stretch: ultra-expanded;
font-size: 11px;
color: #363636;
background-color: #FFF;
background-image: url(../images/bg.gif);
background-repeat: repeat-y;
background-position: center top;
background-attachment: fixed;
}

Savez-vous comment je peux avoir la même taille de partout sur toutes les plateforme ?
 
  • J’aime
Réactions: supermoquette
SuperCed a dit:
SPARTOO.COM, chaussures homme, chaussures femme, chaussures de sport, chaussures de ville
Cliquez pour agrandir...

Hummm, je vois qu'on en profite pour se faire référencer… :siffle: Sinon les tailles fixes en pixels sont déconseillées pour les tailles de caractères, c'est mieux d'utiliser les EM (taille variable). C'est surtout important pour les personnes malvoyantes qui ne peuvent pas augmenter la taille des caractères dans IE. Si ton design est bien foutu, on doit pouvoir zoomer jusqu'à 130-150% sans problèmes avec une dégradation correcte de la mise en page.

Je ne peux pas en dire plus car il y a un faux popup qui m'empêche d'aller sur le site en m'obligeant à m'inscrire. Tant pis. :)
 
Si on doit prendre en compte les personnes mal voyantes qui sont pas foutues de configurer leur navigateur correctement, on n'a pas fini de s'arracher les cheveux pour faire des sites web, et de faire faire des cauchemars aux graphistes... Les tailles variables ça n'offre aucune garantie sur la façon dont ce sera affiché dans le navigateur, et c'est justement le problème du monsieur...

Bref, normalement la taille des polices fixe la hauteur. La largeur ne peut pas vraiment être spécifiée, vue qu'elle dépend entre autre du lissage des police, qui lui est lié à la configuration du navigateur, au navigateur, et aux système d'exploitation. Donc si le problème vient de la largeur, je crains qu'il n'y ait pas de solution.
 
grumff a dit:
Si on doit prendre en compte les personnes mal voyantes qui sont pas foutues de configurer leur navigateur correctement, on n'a pas fini de s'arracher les cheveux pour faire des sites web, et de faire faire des cauchemars aux graphistes... Les tailles variables ça n'offre aucune garantie sur la façon dont ce sera affiché dans le navigateur, et c'est justement le problème du monsieur...
Cliquez pour agrandir...

Quand on fait des tailles en pixels, la configuration dans IE ne change rien du tout, la taille des polices est bloquée. Le web appartient à tout le monde, pourquoi faire chier les malvoyants alors qu'il suffit de passer aux tailles en EM? :rolleyes:

Et je le répète, un bon design doit pouvoir supporter un agrandissement des polices et une absence de polices. On n'est pas dans le monde de l'imprimerie où tout est figé, sinon on met des pdfs en ligne et c'est bon…
 
gloup gloup a dit:
Quand on fait des tailles en pixels, la configuration dans IE ne change rien du tout, la taille des polices est bloquée. Le web appartient à tout le monde, pourquoi faire chier les malvoyants alors qu'il suffit de passer aux tailles en EM? :rolleyes:
Cliquez pour agrandir...
Pourquoi faire chier le reste du monde parce que des malvoyants pourrait être éventuellement susceptibles de ne pas savoir installé firefox ?
Tiens et d'ailleurs IE il permet même pas d'imposer une feuille de style ? Il me semble que rien que par la législation américaine il doit être obligé de respecter un certain nombre de choses. Lui ou l'OS qui le fait tourner.

Et je le répète, un bon design doit pouvoir supporter un agrandissement des polices et une absence de polices. On n'est pas dans le monde de l'imprimerie où tout est figé, sinon on met des pdfs en ligne et c'est bon…
Cliquez pour agrandir...
Va dire ça à un graphiste.
 
grumff a dit:
Pourquoi faire chier le reste du monde parce que des malvoyants pourrait être éventuellement susceptibles de ne pas savoir installé firefox ?
Cliquez pour agrandir...

Je suis désolé mais on ne peut pas imposer à des personnes un navigateur en particulier. Si ils utilisent IE, il n'y a aucune raison de les emmerder pour ça, alors qu'il suffit d'une simple règle de trois pour avoir un équivalent en pixels (pour les personnes bien voyantes bien entendu).

  • étant donné que la valeur par défaut des navigateurs est de 16 points (équivalents à 16 pixels)
  • donc, en général, 1em = 16 pixels
  • donc 11 pixels = (11/16)* 1em = 0,68em
grumff a dit:
Tiens et d'ailleurs IE il permet même pas d'imposer une feuille de style ? Il me semble que rien que par la législation américaine il doit être obligé de respecter un certain nombre de choses. Lui ou l'OS qui le fait tourner.
Cliquez pour agrandir...

Ce sont surtout les sites qui doivent être codés correctement, ça s'appelle l'accessibilité et les tailles variables sont le minimum à respecter. ;)

grumff a dit:
Va dire ça à un graphiste.
Cliquez pour agrandir...

J'espère qu'il y en a qui liront ce sujet. :D
 
Le problème avecx les em, c'est que ça va pêter tout le graphisme.

Donc on évite ce genre de choses, on oublie les mal voyant, et on pense déjà à essayer d'avoir un design correct sur Mac et Linux.

Donc pas de solution à priori?

Je veux absolument garder des tailles fixes, même si c'est pas bien pour les mal voyant.

Plus tard, on s'adaptera peut-être...
 
gloup gloup a dit:
Hummm, je vois qu'on en profite pour se faire référencer… :siffle:
Cliquez pour agrandir...

Heureusement, on a pas besoin de MacG pour se faire bien référencer...
Et c'est MacG qui m'a rajouté le descriptif, moi j'avais juste mis l'adresse. Le forum est allé chercher le titre.

D'autre part, pour ceux qui disent qu'il y a un pop up au premier plan, oui, c'est normal, il s'agit des ventes privées du jour et je ne peux pas les enlever comme ça.

Par contre, ce soir à minuit, ça va dégager, donc vous pourrez tous tester sans le popup.
 
SuperCed a dit:
Le problème avecx les em, c'est que ça va pêter tout le graphisme.

Donc on évite ce genre de choses, on oublie les mal voyant, et on pense déjà à essayer d'avoir un design correct sur Mac et Linux.

Donc pas de solution à priori?

Je veux absolument garder des tailles fixes, même si c'est pas bien pour les mal voyant.

Plus tard, on s'adaptera peut-être...
Cliquez pour agrandir...

Dommage. :( Mais c'est vrai que ce sont des trucs qui doivent se penser au départ… ;)
 
gloup gloup a dit:
Dommage. :( Mais c'est vrai que ce sont des trucs qui doivent se penser au départ… ;)
Cliquez pour agrandir...

Ben en général, quand on lance un site de eCommerce, on a pas mal de choses à penser, et on pense vraiment pas en premier aux mal voyants et à l'accessibilité.

Donc ça m'aide pas à avoir ma réponse tout ça.
 
Salut,

gloup-gloup me fait du pied... :D

Bon, un certain nombre d'âneries sont dites ici...

Superced ->
Je suis freelance et suis à ta disposition. Mon dada c'est justement ce genre de petits soucis. Mais cela à un coût.

Je m'excuse, pour la pub, auprès de mes confrères.

Si un graphiste n'est pas capable de vous faire un design qui supporte un facteur d'agrandissement de 150 %... changez de graphiste et de monteur html au passage. Ceci dis rien qu'a voir le petit bout de css on voit le problème.

Grumff ->
T'as raison, supprimons les ascenseurs dédiés aux handicapés pendant que l'on y est ; c'est vrai quoi, mettre 100 000 € dans un ascenseur pour deux pelés trois tondus...

Il existe des techniques pour répondre à la question de l'agrandissement et plus globalement à la question de la dégradation du site (ici le mot important est dégradation). La création d'un site internet ne s'arrête pas à la porte des biens portants. Qu'on se le dise.

Comme le signale gloup-gloup, le web est pour tous le monde, et sans tomber dans un humanisme "tous le monde il est beau tous le monde il est gentil", il nous appartient au niveau de la conception du site (si tant est que ce mot est un sens pour certains) de prévoir qu'il puissent être vu par des personnes souffrant de handicap ; il existe des référentiels en ce sens. Un peu à la manière d'un architecte qui prévoit, sur plan, une plateforme d'accès pour un édifice.

Ils nous appartient d'imposer ces idées auprès de nos clients.

J'ajouterais, que ces personnes sont des consommateurs comme les autres. Si je vous dis que plus d'un internaute sur trois à une déficience visuelle... aujourd'hui qui peut se permettre de se passer de 33% de traffic ? Qui oserait prétendre que ce chiffre laisse indifférent ?

Enfin pour finir, les personnes souffrant de handicap sont justement celles qui sont le plus susceptibles d'utiliser et d'acheter sur internet pour des raisons facile à comprendre. Pour peux qu'on leur en donne les moyens techniques.


il y a donc un argument morale + un argument économique

Messieurs ;)
 
Ben il paraît que l'utilisation des polices avec taille en EM pose moins de problèmes que celles avec taille en pixels au niveau affichage, mais désolé je n'ai plus la source de l'info. Sinon, tu fais un essais en appliquant la règle de trois donnée plus haut et tu regardes ce que ça donne, normalement ça ne devrait pas bouger ta mise-en-page.

P.S. : fredmac75 ;)
 
Superced ->
Si ton texte se décale, c'est normal. La verdana et l'arial n'ont pas la même chasse, ni la même hauteur pour un même corps et pour une même lettre. Un graphiste un temps soit peu "éclairé", devrait pouvoir expliquer cela sans s'excuser.

Ouvre illustrator, choisi une lettre en verdana et une en arial en 150px (la même hein...), passe en mode "fil de fer"... que constates tu ?

il me semble que tu inverses la problématique. Ca n'est pas au texte de se conformer au contenant (la graphie), mais l'inverse. Ma proposition d'une graphie "extensible" est donc cohérente.
;)
 
gloup gloup a dit:
À propos du code html : il y aurait aussi des trucs à améliorer au niveau sémantique. C'est important, pas seulement pour l'accessibilité, mais aussi pour les moteurs de recherche.
Cliquez pour agrandir...

oui = non compréhension du concept de doctype = 57 warnings sur la seule page d'accueil = une page d'un Mo

Ce site ne sera donc pas accessible aux culs de jattes :D
(qu'ils me pardonnent cette blague oh combien facile)
 
SuperCed a dit:
Ben en général, quand on lance un site de eCommerce, on a pas mal de choses à penser, et on pense vraiment pas en premier aux mal voyants et à l'accessibilité.

Donc ça m'aide pas à avoir ma réponse tout ça.
Cliquez pour agrandir...

Commercialement, c'est assez dingue de réflechir comme çà! Tu pourrais froisser une clientèle potentielle non négligeable!
 

Sujets similaires

I
Popup video
Réponses
1
Affichages
2K
Développement web
WebD
WebD
omzen
Firefox / Safari = language CSS différent ?
Réponses
7
Affichages
4K
Développement web
momo-fr
momo-fr
I
Plein de lien sur une image de fond
Réponses
9
Affichages
2K
Développement web
lugdanum
L
phelibre
xhtml en body
Réponses
4
Affichages
2K
Développement web
phelibre
phelibre
Y
Problème défilement des ancre avec script jquery sous Safari
Réponses
6
Affichages
5K
Développement web
momo-fr
momo-fr
Haut Bas
Back