PDF einbinden mit dem object-Tag

object- und iframe sind nicht nur Behälter für SVG oder für Video – sie können auf ein PDF-Dokument verweisen und bieten dem Benutzer inmitten der Webseite einen Einblick in das PDF-Dokument.

PDF in Webseiten richtig einbinden

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>

Keine Unterstützung für PDF-Anzeige in object-Tag PDF laden

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.

PDF in Webseite anzeigen und steuern / Safari
Safari PDF-Menü
Firefox PDF-Menü
Chrome PDF-Menü

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.

2024-02-12 SITEMAP BLOG