DjVu beágyazása HTML oldalba (embed, object)

HTML weboldalba tetszőleges helyre beágyazhatunk egy DjVu dokumentumot, hasonló módon, ahogy egy Flash fájlt. A látogatóknak egy DjVu pluginre lesz szüksége, ezért mindenképp érdemes a DjVu fájlra közvetlen letöltési linket is biztosítani.

Az alábbi megoldással a könyv nyers (formázás nélkül) szövege is bemásolható a HTML oldalba, rejtetten (megjeleníthetően), hogy ezzel elérhetővé tegyük az szöveget a keresőmotorok vagy egyéb kisegítő lehetőségek számára.

Egy alap változat:

<!DOCTYPE html>
<html>
<head><title>My DjVu Document</title></head>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
</style>
<body>
    <object classid="clsid:0e8d0700-75df-11d3-8b4a-0008c7450c4a" 
        width="100%" height="99%">
        <param name="src" value="basic.djvu" />
        <embed type="image/x.djvu" src="basic.djvu" width="100%" height="99%" />
    </object>
</body>
</html>

Ha már van OCR-ezett szövegrétegünk, érdemes lehet azt a HTML oldal aljába rejtetten belemásolni, így a keresőmotorok és DjVu plugin nélküli látogatók is elolvashatják.

Erre készítettünk egy DjVu XML - HTML átalakító XSLT fájlt. Futtatása (Linuxon az xsltproc nevű csomagot kell telepíteni, de bármilyen XSLT feldolgozó megfelelő):

djvutoxml --with-text basic.djvu basic.xml
xsltproc xml2html.xslt basic.xml >a.html

Az alábbi példa az első HTML minta kiegészítése az OCR szöveggel, linkekkel a DjVu fájl letöltésére és a plugin letöltésére.

<!DOCTYPE html>
<html>
<head><title>DjVu dokumentum címe</title></head>
<style type="text/css">
    html, body { height: 100%; margin: 0; padding: 0; }
    #text:target { display: block !important; }
</style>
<body>
<p style="margin: 0;">A DjVu fájl le is töltheto:
    <a href="basic.djvu">basic.djvu</a> vagy megtekintheto 
    <a href="#text">a nyers szöveg</a>.
</p>

<object classid="clsid:0e8d0700-75df-11d3-8b4a-0008c7450c4a" width="100%" height="95%">
    <param name="src" value="basic.djvu" />
    <embed type="image/x.djvu" src="basic.djvu" width="100%" height="95%" />

    Hiányzó bovítmény: 
    <a href="https://www.cuminas.jp/en/downloads/download/?pid=1">Caminova 
    DjVu plugin</a> (win) vagy "djvu-plugin" csomag (Linux).
</object>

<div id="text">
<!-- DjVU text dump for search engines -->

<!-- Ide kell bemásolni a fentebb létrehozott a.html tartalmát! -->

</div>
<script type="text/javascript">
    document.getElementById("text").style.display = 'none';
</script>
</body>
</html>

(CSS3 trükk: A #text-re mutató linkre kattintva a modern böngészőkben aktiválódik az a szabály, ami előhozza a szöveget, viszont az oldal letöltődésekor láthatatlan. A szöveget szándékosan utólagos JavaScript rejti el, így a JavaScriptet nem kezelő látogatóknak látható marad (pl keresőmotorok)).

A cikk legutóbb frissítve: 2014/03/01