FAT78 - Artisan numérique
 

> Lab > "object" : la balise (...)

dimanche 29 mars 2020

"object" : la balise à presque tout VOIR

En html5, la balise "object" permet d’insérer agréablement une page html, tout en permettant d’utiliser les attributs de style css3. Exemple ci-contre, l’insertion de la feuille de musique html (générée par Harmony Assistant) à l’aide du code :

<object style="display:block; float:left; width:36vmax; height:48vmax; margin:1vmax;" data="...html" type="text/html" typemustmatch>
</object>

Avec ce codage html, la fenêtre "object" se redimensionne suivant les dimensions de la fenêtre du navigateur ... magique !

Mais aussi des documents pdf peuvent être affichés grâce à cette balise, en déclarant data="...pdf" et type="application/pdf" ... doublement magique !!!

Cette balise est "responsive" car elle accepte en style-css les dimensions de largeur et hauteur en % et aussi avec les nouveaux dimensionnements CSS3 (contrairement à la balise iframe qui exige des dimensions en px).

La norme CSS3, qui définit les styles utilisables dans HTML5, introduit des nouvelles valeurs pour le dimensionnement des objets par rapport à la taille actuelle de la fenêtre : VW, VH, et vmin, vmax. Elles permettent entre autres d’avoir une taille de police et des colonnes variables selon la résolution de l’écran. Lors de la réduction du corps de la fenêtre votre titre se réduira suivant le schéma initialement prévu.
L’unité de vh signifie "hauteur de la fenêtre", vw pour viewport width, et vmin représente celui des vh ou vw est la plus courte longueur.
Les valeurs utilisées peuvent être quelque peu déroutantes si vous n’avez pas utilisé ces unités avant. 1VH représente 1% de la fenêtre courante (la zone de contenu de la fenêtre du navigateur) de hauteur, au lieu de 100% comme vous pouvez vous y attendre.
Donc si vous voulez un élément à la hauteur de votre fenêtre, vous devrez le mettre à 100vh. Bien sûr VW fonctionne exactement de la même manière que les unités de VH.

En résumé :
1VW = 1% de la largeur de la fenêtre
1VH = 1% de la hauteur de la fenêtre
1vmin = 1VW ou 1VH, soit la valeur la plus petite
1vmax = 1VW ou 1VH, soit la valeur la plus grande
Les unités de fenêtres sont dynamiques plutôt que statiques, donc si vous redimensionnez la fenêtre du navigateur, la valeur calculée des unités changera également. Si par exemple la fenêtre de votre navigateur est 1000px de large et l’élément d’une largeur de 10vw, son affichage sera de 100px de large.


Pendant la crise mondiale due au COVID19, le net a été très fortement sollicité et parfois l’affichage des documents par le service googledocs ne fonctionnait plus. J’ai donc généralisé l’usage de la balise "object" pour afficher presque tout en créant le modèle <voirXXX>
Zip - 664 octets
voir.html.zip

Voici ce qu’il contient :

#SET{h,100%}
#SET{maxw,100%}
#SET{url,#self}
#SET{align,#ENV{align,center}}
<BOUCLE_doc (DOCUMENTS) {id_document=#ENV{id}} {tout}>
        #SET{url,#URL_DOCUMENT}
        [(#LARGEUR|>={320}|?{#SET{maxw,#LARGEUR},#SET{maxw,100%}})]
        [(#EXTENSION|=={pdf}|?{#SET{h,50vmax}})]
        <#GET{align}>
        <div class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})]' style="float:#ENV{align,center};">
        <object style="display:block;width:#ENV{largeur,100%};max-width:#GET{maxw}px;min-width:320px;height:#ENV{hauteur,#GET{h}};margin:0 auto;"
       data="#URL_DOCUMENT" play="false" autoplay="false"
       [(#EXTENSION|=={pdf}|?{type="application/pdf" typemustmatch})] >
        </object>
        </div>
        </#GET{align}>
</BOUCLE_doc>
<div style="clear:both;"> </div>
<center>
        <a href="#GET{url}" target="_blank">
                -[<u><multi>[fr]Afficher le document [it]Visualizzare il documento [en]Display document</multi></u>]-
        </a>
</center>

Ce modèle cherche donc le document XXX et détermine sa largeur réelle : seules les images en ont et cette valeur est utilisée comme largeur max de l’affichage. Pour les autres documents, qui n’ont pas de largeur (textes, pdf, sons, vidéos), la largeur 100% du conteneur est utilisée ; pour les "pdf" on attribue une hauteur d’affichage de 50vmax, sinon la hauteur d’affichage est de 100% sans aucune spécification "|hauteur=..." dans <voirXXX>
Pour la largeur d’affichage, sans spécification "|largeur=..." l’affichage se fait sur 100% de la largeur du texte de l’article ou du conteneur de <voirXXX>.
Les alignements "|align=left" ou "|align=right" sont aussi acceptés. L’alignement par défaut est "center".
L’astuce pour afficher presque tout consiste à avoir supprimé dans le code de la balise "object" le paramètre type="application/pdf" pour tous les documents non-pdf, en laissant ainsi le navigateur choisir automatiquement l’application d’affichage du document.
Les paramètres play="false" autoplay="false" permettent de ne pas lire automatiquement les audios et les vidéos (ne fonctionne pas uniformement).
Enfin, puisque les navigateurs de quelques appareils (les phones Android par exemple) semblent ignorer les documents pdf dans la balise "object", j’ai ajouté en bas de l’affichage le lien direct vers le document afin que l’affichage se fasse directement par l’application liée au suffixe du document


<voirXXX> pour un document .txt l’affiche sur 100% de largeur et 150px de hauteur

-[Afficher le document ]-

<voirXXX> pour un document .pdf l’affiche sur 100% de largeur et 50vmax de hauteur

-[Afficher le document ]-

<voirXXX> pour un document .jpg l’affiche sur 100% de largeur et 100% de hauteur, limité aux dimensions réelles de l’image

-[Afficher le document ]-

Pour un document .mp4 : il faut imposer les dimensions réelles de largeur et de hauteur (ici 640x360)

-[Afficher le document ]-

Pour un document .mp3 : il vaut mieux imposer les dimensions du contrôleur audio (ici 480x40)

-[Afficher le document ]-


SPIP | | Plan du site | Suivre la vie du site RSS 2.0