HTML affichage caractères accentuées problématique

Programmation
#1

Bonjour,

Je suis en train de traduire en français une interface d’un logiciel avec Gedit sous Debian 7.5.
Le code est du HTML.

Lorsque je visualise ce code dans Iceweasel, les caractères accentués sont bien pris en charge.

<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>

<head>
<title>À propos</title>
<link href="../../doc.css" type="text/css" rel="stylesheet">
</head>

<body>

<table width="100%" style="background-color:#dddddd;">
<tr><td width="50%"><h3><a href="ref.html">Référence</a></h3></td><td align="right"><em><a href="searchidx.html">Index</a></em></td></tr>
<tr><td colspan="2"><em> -&gt; <a href="p_workwin.html">Fenêtre de travail</a> -&gt; <a href="mhelp.html">Aide</a> -&gt; <b>À propos</b></em></td></tr>
<tr><td><em><a href="gridcompute.html"><img src="../../nav/left.gif" alt="Previous" title="Previous " border="0"/>Calculateur de grille</a></em></td><td align="right"><em><a href="previewwin.html">Imprimer la prévisualisation<img src="../../nav/right.gif" alt="Next" title=" Next" border="0"/></a></em></td></tr>
</table>

<h3>À propos</h3>
<table><tr><td valign="top">Menu :</td><td><em>? =&gt; À propos de ...</em></td></tr></table>
<center>
<img src="img/dlgabout.png"/><br />
<small><em>Fenêtre de À propos de ...</em></small><br />
</center>
<div style="font-size: 90%;">
<p>
Montre la version, les informations de copyright et la clé d'enregistrement de knipling.
</p>

</div>
<p>
Utilisez cette commande pour voir la version de <em>knipling</em>, la notice de droits d'auteur, le propriétaire d'enregistrement et la clé d'enregistrement. Dans les versions de cours de démonstration et speciales, vous verrez aussi le jour d'expiration - la version complète est normalement illimitée.
</p>

</body>
</html>
<table width="100%" style="background-color:#dddddd;">
<tr><td><em><a href="gridcompute.html"><img src="../../nav/left.gif" alt="Previous" title="Previous " border="0"/>Calculateur de grille</a></em></td><td align="right"><em><a href="previewwin.html">Imprimer la prévisualisation<img src="../../nav/right.gif" alt="Next" title=" Next" border="0"/></a></em></td></tr>
<tr><td colspan="2" align="center"><b>knipling 3.0</b></td></tr>
</table>

alors que ce code également en HTML s’emmêle les pinceaux:

<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>

<head>
<title>Sauvegarde automatique</title>
<link href="../../doc.css" type="text/css" rel="stylesheet">
</head>

<body>

<table width="100%" style="background-color:#dddddd;">
<tr><td width="50%"><h3><a href="ref.html">Référence</a></h3></td><td align="right"><em><a href="searchidx.html">Index</a></em></td></tr>
<tr><td colspan="2"><em> -&gt; <a href="p_workwin.html">Fenêtre de travail</a> -&gt; <a href="mfile.html">Fonctions de fichier</a> -&gt; <b>Sauvegarde automatique</b></em></td></tr>
<tr><td><em><a href="saveas.html"><img src="../../nav/left.gif" alt="Previous" title="Previous" border="0"/>Enregistrer sous</a></em></td><td align="right"><em><a href="title.html">Titre<img src="../../nav/right.gif" alt="Next" title="Next" border="0"/></a></em></td></tr>
</table>

<h3>Sauvegarde automatique</h3>
<table><tr><td valign="top">Menu :</td><td><em>Fichier =&gt; Sauvegarder automatiquement</em></td></tr></table>
<div style="font-size: 90%;">
<p>
Enregistre automatiquement le modèle à des intervales de temps périodiques.
</p>

</div>
<p>
Si vous activez cette fonction, votre modèle sera enregistré périodiquement. La valeur par défaut est de 10 secondes mais vous pouvez la <a href="settings.html">modifier</a>.
</p>
<p>
La fonction utilise le nom de fichier que vous avez sélectionné. S'il n'a pas encore été donné, le nom <type>temp.lac</type> est utilisé.

</p>

</body>
</html>
<table width="100%" style="background-color:#dddddd;">
<tr><td><em><a href="saveas.html"><img src="../../nav/left.gif" alt="Previous" title="Previous" border="0"/>Enregistrer sous</a></em></td><td align="right"><em><a href="title.html">Titre<img src="../../nav/right.gif" alt="Next" title="Next" border="0"/></a></em></td></tr>
<tr><td colspan="2" align="center"><b>knipling 3.0</b></td></tr>
</table>

Et pourtant les deux codes sont semblables.
Je n’y comprends rien.

Que se passe-t-il donc là ?

Merci de m’éclairer.

#2

Comment peut-on avoir la moindre idée de ce qui se passe si tu ne montres pas le résultat ?

#3

Ton soft s’appuie t-il sur le moteur de Mozilla pour le rendu ?
Quel est exactement le problème avec les accent ?
Comme dit Pascal une petite capture d’écran nous aiderais beaucoup.

#4

Oups. Je me suis emmêlé les pinceaux. J’ai créé un nouveau message par erreur :blush:
là.

Désolé.

#5

Pour chaque caractère accentué tu as utilisé les codes d’échappement ?
é -> é
à -> à
etc …

#6

Les deux code affiche bien les accents (sur mon pc).
Essaye de supprimer l’historique/cache de ton iceweasel, et ré-essaye d’afficher ta page.

ps: assemble les codes entre head en un seul head.

#7

[quote=“debianhadic”]Pour chaque caractère accentué tu as utilisé les codes d’échappement ?
é -> é
à -> à
etc …[/quote]
Non. J’ai tapé les caractères accentués directement dans le texte.

@ kripteks :

Je n’ai pas d’historique. J’ai configuré Iceweasel pour qu’il n’en conserve aucun.

Je teste et je reviens.
Chez moi, il n’y a aucun changement.

Et chose curieuse, alors que toutes les pages sont codée sur la même base de construction, quelques-unes posent problème et d’autres pas. Et ce, pendant la même session de Iceweasel.

#8

[quote=“Papy Octet”][quote=“debianhadic”]Pour chaque caractère accentué tu as utilisé les codes d’échappement ?
é -> é
à -> à
etc …[/quote]
Non. J’ai tapé les caractères accentués directement dans le texte.

[/quote]
Bienvenue dans le monde merveilleux de HTML :slightly_smiling:
Les caractères spéciaux doivent utiliser leurs équivalents HTML pour être affiché normalement sur toutes les plateformes.
Pour les textes fixes c’est long, mais ça se fait qu’une fois, pour les dynamiques (issues de BDD) il faut utiliser des méthodes d’encodages.

#9

C’est un problème d’encodage du fichier.
Pour faire afficher normalement il faut qu’il soit en unicode utf-8.

Poru cela:
Via un éditeur texte comme geany ou autre, ouvre le fichier qui a l’accent mauvaise, va dans “document -> set encoding -> unicode” choisi “unicode (utf-8)” puis sauvegarde.

Ça devra marché.

Si tu veux le faire en ligne de commande:
cp le_nom_de_ton_fichier.html test.html
iconv -f ISO-8859-1 -t UTF-8 test.html -o nouveau_fichier.html

Puis ouvre nouveau_fichier.html voir le résultat.

Si celui du dessus n’a pas marché, fait celui du dessous:
rm nouveau_fichier.html
iconv -f ISO-8859-9 -t UTF-8 test.html -o nouveau_fichier.html

#10

Même avis. C’est ton éditeur de texte qui te joue des tours.

#11

[quote=“kripteks”]…
Si tu veux le faire en ligne de commande:
cp le_nom_de_ton_fichier.html test.html
iconv -f ISO-8859-1 -t UTF-8 test.html -o nouveau_fichier.html

Puis ouvre nouveau_fichier.html voir le résultat.
…[/quote]

:041 Super ! :violin:

Ça fonctionne.
Merci.

Euh …
@ kripteks : tu as écrit 2 fois la même ligne de code 'icon v …".
C’est normal ?

Je me demande également si le fait de rajouter le code ci-dessous dans le fichier peut apporter un avantage quelconque. Et si oui, lequel ?

[code]

[/code] ... la suite du code. ...
#12

J’avais oublié de modifier la ligne, c’est fait:
iconv -f ISO-8859-[mono]9[/mono] -t UTF-8 test.html -o nouveau_fichier.html

Sinon préfère utiliser:
[mono]<!doctype html>

[/mono]

Si t’insiste à ajouté lang fait le de cet manière:
[mono][/mono] ou comme tu veux, c’est ton choix.

#13

Merci pour toutes ces précieuses infos. :023

#14

Pourquoi ISO-8859-9 (latin-5, turc) ? Tu ne confondrais pas avec ISO-8859-15 (latin-9, européen occidental) qui est une révision de l’ISO-8859-1 ajoutant notamment le symbole euro ?

#15

J’y connais pas aux iso, j’avais sous la main j’ai partagé, il me semble bien que c’était pour des fichiers türc c’est donc 9, j’aurais du y penser c’est pas adapter.

Je sais pas s’il aurait mieux fallut utiliser la 1 ou la 15.
Faut voir celui utilisé par défaut dans windows, je doutes que le fichier soit crée sous windows sans utf-8.

Le mieux reste a vérifié le type avant la conversion.

En parlant, j’ai remarqué que:
Je crée un nouveau fichier avec geany, le fichier est coché sur utf-8, je sauvegardes.

Je fais:
[mono]file -bi monfichier[/mono]
Il m’affiche:
[mono]text/plain; charset=us-ascii[/mono]

Alors qu’il aurait du m’afficher:
[mono]text/plain; charset=utf-8[/mono]

Bizarre, je vais googlé cela.
Édite: j’ai compris, ce us-ascii fait partie d’utf-8, les codes sont les mêmes, le fichier devient automatiquement utf-8 si on ajoute un caractère non-ascii comme un accent.

Donc au final, avant d’utiliser iconv vaut mieux vérifier le charset utilisé via: file -bi nomFichier
Exemple:
$ file -bi nomFichier
text/plain; charset=iso-8859-1

#16

Petite subtilité de UTF, tu peux préciser qu’il s’agit d’un fichier UTF avec une entête spéciale a ton fichier. Il s’agit du BOM.