Discussion :

[emmanuelbe]

Bonjour,

Prenons déjà le cas d'une page HTML extrêmement simplement simple : des titres et des paragraphes.

Pourquoi quand j'affiche cette page sur un ordi, une tablette, un smartphone est-ce que le navigateur ne justifie pas le contenu dynamiquement en fonction de la taille de l'écran ?

Sur ma liseuse Kobo quand je lis un document au format epub, la justification se fait en fonction de la taille des caractères que j'ai choisi, c'est quand même beaucoup plus pratique. Je ne suis pas sur mais je crois que epub utilise html en interne.

Il y a quelques mois sur le navigateur de l'Iphone (Safari ?) est apparu un bouton "Lecteur" à côté de la barre d'adresse, c'est bien pratique. Est-ce que c'est une fonctionnalité qui a vocation a être implémenté dans les autres navigateurs ou est-ce que c'est une initiative individuel d'apple ?

Merci pour vos réponses

[Bisûnûrs]

Fichtre. J'ai rien compris.

[JérémieL]

Bonjour,

Je ne comprends pas ta question non plus... La largeur d'un texte justifié s'adapte bien, dans le cas d'une page toute simple, en fonction de la largeur de l'écran qui l'affiche. Pourquoi dis-tu que ce n'est pas le cas ?

Bien sûr, un texte est justifié à condition d'utiliser la règle CSS text-align: justify;, ce qui n'est pas toujours une bonne pratique.

Quant à la fonctionnalité Reader/Lecteur de Safari, c'est bien sûr une initiative des développeurs de Safari, mais qui s'appuie, je pense, sur les éléments sémantiques du HTML5 (la balise article notamment).
Des extensions existent pour ajouter cette fonctionnalité dans d'autres navigateurs (Firefox, Chrome).

[emmanuelbe]

Pardon de ne pas être clair, en fait j'essaie de comprendre l'algorithme de principe de rendu d'une page HTML. J'ai un peu regardé sur internet mais j'ai pas compris grand chose.

J'ai fait quelques essais que je décris ci-dessous peut-être que ça aidera à me faire comprendre.

J'ai pris mon journal HTML qui est un fichier dans lequel je note ce que je souhaite retenir de mes surfs. Le fichier est créé sous l'éditeur HTML Amaya sous le profil XHTML Transitional. Le fichier est vraiment très simple: des titres, des paragraphes, des liens, etc

Si j'affiche ce fichier HTML sous chrome j'observe qu'il y a un ascenseur horizontal, pourquoi ? Comment est choisie la taille de la page dans laquelle le fichier HTML est rendu ? J'ai fait le test sous internet explorer le comportement est le même. Si je redimensionne la fenêtre de chrome ou d'internet explorer, je constate que les paragraphes simples sont bien rejustifiés pour aller à ligne quand cela est nécessaire. L'ascenseur horizontal montre que le rendu se fait toujours dans la même page virtuel un peu plus grande que mon écran.

Maintenant j'affiche ce fichier HTML sous le Safari de mon iphone. Les caractères sont minuscules, le texte est illisible donc je zoom. Et la je constate que la justification du texte ne se fait pas selon la taille de l'écran de l'Iphone et de la taille des caractères qui résultent de mon zoom. Et la lire le texte devient un enfer, je lis le début de ma ligne puis je scroll horizontalement vers la droite pour lire la fin de la ligne. Lorsque j'ai fini ma ligne je scroll horizontalement vers la gauche pour lire le début de la prochaine ligne. Autant dire que c'est inutilisable. Le bouton "Lecteur" qu'à introduit Apple dans Safari permet de répondre au problème mais je ne sais pas sous quel(s) critère(s) il s'affiche. Sur ma page HTML toute simple il ne s'affiche pas. Les liseuses d'ebook type Kobo, Kindle ont le comportement que j'attends : le texte est justifié dynamiquement à l'affichage en fonction de la taille de l'écran et d'une taille de caractère choisie par l'utilisateur.

En fait j'aurai peut-être du commencer par décrire mon problème de départ : je voudrais faire un site internet tout simple (titres + paragraphes) que l'on puisse lire facilement que l'on soit sur un ordi ou un téléphone. Bien sur je voudrais ne pas avoir à dupliquer le contenu. Idéalement que l'on puisse aussi envoyer une page du site par mail et qu'un utilisateur puisse le lire sans avoir à zoomer.

Pardon d'avoir été un peu long, j'espère que c'est un peu plus clair comme ça.

[Bisûnûrs]

Mouais, heu, une page en ligne ou un peu de code nous aiderait mieux à la compréhension. Un informaticien est un homme de terrain, pas un homme de lettre et se contentera plus aisément d'un peu de technique que de longs discours.

[thelvin]

C'est très certainement ton utilisation de Amaya qui est mauvaise. Par exemple, si ta page s'affiche avec un scroll horizontal, c'est parce que tu as mis une image très très large, ou que tu as demandé à Amaya qu'un paragraphe ou autre chose s'affiche dans une boîte dont tu as contraint toi-même la largeur, et qui dépasse celle de l'écran.

Quand on ne contraint pas de largeur et que les images ne sont pas plus large que l'écran, le rendu HTML s'arrange toujours pour que ça tienne dans l'écran.

[Invité]

bonjour,
la réponse est "responsive design"... ou pas.
l'adaptabilité d'un site au media se prevoit et se programme... ou pas.

Je t'invite donc à faire une recherche sur :

• "responsive design"
• "media queries"

concernant ta création de site web, ma "Gestion-Affichage de Nouvelles" t'offre une base de départ.
il faudra juste penser à mettre les dimensions en %.