Das object-Tag ist nicht nur ein Behälter für SVG oder für Video – das object-Tag kann auf ein PDF-Dokument verweisen und bietet dem Benutzer inmitten der Webseite einen Einblick in das Dokument.
<object style="width:100%; height: auto; aspect-ratio: 21/29" data="/…/spektralfarbzug.pdf"> </object>
HTML object ist heute ohne großen Aufwand responsiv und CSS kann Breite und Höhe über das Seitenverhältnis mit aspect-ratio bestimmen. Die Browser steuern ihre eigenen Steuerelemente für das PDF bei, so dass der Benutzer das PDF vergrößern kann.
iframe und PDF einbinden und anzeigen
Mit HTML5 gibt es für ein iframe keinen alternativen Inhalt zwischen öffnendem und schließenden iframe-Tag. Das Seitenverhältnis beim iframe wird genauso wie beim object-Element über die CSS-Eigenschaft aspect-ratio gesteuert.
<iframe style="width:100%; aspect-ratio: 381/212" height="auto" src="plan.pdf"></iframe>
PDF mit embed in Webseite einbetten
embed gibt es auch noch … oder wieder. Das historische embed-Tag kam zurück, weil die Rückwärts-Kompatibilität ein hehres Ziel der Standards ist.
<embed style="width:100%; aspect-ratio: 381/212" height="auto" src="plan.pdf"></embed>
Im Grunde genommen ist es egal, ob object, iframe oder embed das PDF anzeigt. Einzig das altertümliche Data-Attribut des object-Tags fällt aus dem Rahmen.
Doppelseitiges PDF
Wenn das Dokument doppelseitig angelegt wurde (z.B. ein Buch), wird es auch doppelseitig angezeigt. Weder object noch iframe oder embed können aus dem PDF eines einseitig angelegten Dokuments eine doppelseitige Anzeige erzeugen.
<iframe style="width:100%; aspect-ratio: 4734/3081" height="auto" src="/Kap08_Problemzonen.pdf"></iframe>
Erst in den Menüs der Browser kann der Benutzer bei mehrseitigen PDFs eine doppelseitige Ansicht herstellen. Allerdings sind die Eingriffsmöglichkeiten jedes Browsers anders – siehe Ansicht der PDF-Menüs.
PDF im Spaltensatz und PDF auf mobilen Geräten
Der klassische Spaltensatz wie z.B. in Zeitschriften ist als PDF auf dem Monitor ein Problem für den Leser, der die Seite zuerst herunterscrollen und dann wieder heraufscrollen muss. Im Spaltensatz angelegte Dokumente sind ok für Benutzer, die das PDF herunterladen und ausdrucken, aber zum Lesen auf dem Monitor sind sie wenig geeignet.
Auf mobilen Geräten wird das PDF soweit verkleinert, dass es kaum lesbar ist. PDF-Dokument speichern und drucken gehört für die meisten Benutzer von mobilen Geräten nicht zur Routine. Obendrein müssen PDF-Dokumente vollständig geladen sein, bevor sie angezeigt werden. Die Anzeige eines PDF mit 4, 8 oder mehr MB auf den kleinen Monitoren von Handys sollte also lieber zugunsten eines Links und evtl. Thumbnail einer Seite unterbleiben.
Damit das PDF zur Homepage führt
Das Einbetten ist aber nur die halbe Miete – das PDF selber sollte einige Regeln beachten. PDF wird von den Suchmaschinen genauso aufgenommen und indexiert wie eine Webseite. Es kommt also vor, dass Besucher auf dem PDF landen und nicht auf der Webseite, die das PDF linkt.
Jedes PDF muss also für einen Weg nach Hause sorgen – einen Link aufweisen, der zur Webseite führt. Für diejenigen, die PDFs ausdrucken, muss der Link abtippbar sein, also u.U. auch einen Shortcode für die Webseite anlegen.
Ein Datum wäre auch nicht schlecht, denn unzählige PDFs bleiben lang über ihre Zerfallszeit auf dem Webspace liegen. Das Datum muss auch nicht gleich 4.1.2018 8:25:12 lauten, es reicht schon April 2018. Mit einem relativ aktuellen Datum ist ein Besucher viel eher geneigt, dem Link im Fuß oder im Kopf des PDFs zu folgen.
Mehr zum Anzeigen von externen Dokumenten
- PDFs mit den wichtigen Informationen versorgen
- HTML object Externe Ressourcen (Webseiten, PDF, SVG) einbetten
- HTML iframe Externe Ressourcen einbetten wie mit dem object Tag, aber mehr Sicherheitsfunktionen als object