points pas à la bonne hauteur

**Paenitentia** · 05/08/2012, 16h20

Bonjour à tous,

J'ai réalisé un site internet qui fonctionne très bien sur Internet Explorer, Mozilla Firefox, Google Chrome, Safari et Opera sous Windows. Je rencontre toutefois un problème d'affichage lorsque je teste mon site avec une tablette Samsung Galaxy Tab 2 ou encore un téléphone Samsung Galaxy 3. Il s'agit du navigateur fourni par défaut sur ces deux outils. Je ne repère qu'une différence, que voici :

Au lieu d'être positionnés en bas de la ligne, mes points se situent au milieu. J'ai l'impression que le navigateur fait comme si ma police était de taille normale, alors que ce n'est pas le cas (les points ne sont pas au milieu lorsque le texte est de taille normale).

Est-ce que quelqu'un sait comment pallier à se problème ?

Voici mon code source :

HTML5 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<article>
		<h2>Bonjour…</h2>
		<p>…et bienvenue sur mon site.</p>
	</article>

CSS3 (uniquement les propriétés qui influencent le code pour plus de clarté) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
* {
	margin: 0;
	padding: 0;
}
 
section article h2 {
	font: 400 1.875em/1.5 'Playfair Display', Georgia, serif;
}
 
section.right article p {
	font: 0.875em/1.6 'Muli', Verdana, Helvetica, sans-serif;
	text-align: justify;
}
 
section.right {
	display: inline-block;
	width: 45%;
	padding-right: 3%;
}
 
article {
	margin-bottom: 3.125em;
}

Merci par avance pour toute aide apportée.

**NoSmoking** · 05/08/2012, 16h30

Bonjour,
as tu essayé avec des "vrais" points ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<article>
	<h2>Bonjour…</h2>
	<p>…et bienvenue sur mon site.</p>
	<h2>Bonjour...</h2>
	<p>...et bienvenue sur mon site.</p>
</article>

**Paenitentia** · 05/08/2012, 16h44

Ça fonctionne en mettant des vrais points... -_-

Merci beaucoup. Est-ce que tu connais la cause de ceci ? Pourquoi le code des trois points ne se met pas au bon niveau ?

**NoSmoking** · 05/08/2012, 22h35

Est-ce que tu connais la cause de ceci ?

je présume que c'est un problème de traitement des caractères un peu spéciaux, mais comment ???

A essayer aussi en utilisant l'entité HTML … pour voir.

**thelvin** · 06/08/2012, 10h17

Ça pourrait être une fantaisie de la fonte.

Il est probable que le téléphone ne connaisse pas les fontes 'Playfair Display' et Georgia, il se rabat donc sur serif, c'est-à-dire la fonte serif par défaut que le navigateur veut utiliser.

Or certaines fontes mettent les points de suspension au milieu, parce qu'elles sont faites pour une écriture où les points de suspension doivent être au milieu, comme l'écriture idéographique.

Cette simple page, ici, reproduit le même comportement avec firefox (sous Windows) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<!DOCTYPE html>
<meta charset="utf-8" />
<h1 lang="ja" style="font-family: serif">Hello…</h1>

Pourquoi ? D'abord je lui ai demandé d'afficher le texte en fonte serif, donc de choisir lui-même une fonte serif.
Ensuite, je lui ai dit que c'est du texte japonais, il va donc en tenir compte pour faire son choix.
Par défaut et sous Windows, pour afficher du texte japonais en fonte serif, Firefox choisit 'MS PMincho', une fonte japonaise, dont les trois points de suspension sont au milieu.

Il est possible que le téléphone, lui aussi, fasse un choix de fonte exotique pour une raison quelconque, conduisant au même résultat.
Dans ce cas-là, … ne changerait rien, et il n'y a pas grand-chose à faire vu que c'est surtout une question de configuration du téléphone.
À la rigueur, tu peux essayer de forcer un peu plus de fontes, pour en trouver une gérée par le téléphone, avant de te rabattre sur serif.

points pas à la bonne hauteur

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager