IIIF Kasane

Structure, sharing and embedding

How Kasane shows the structure of book-like material (tables of contents, two-page spreads, Collections), how to share a view by URL, and how to embed the viewer in other sites. Every example opens as is.

Structure

The structure written in the manifest is reflected on screen as it is.

Table of contents (Range)

The table of contents in the manifest’s structures appears, nested as written, in the Contents tab. Choosing an entry opens that page.

Example: IIIF Cookbook 0024 (a book with a table of contents)

Open in the viewer →

Two-page spreads (behavior: paged)

A manifest with behavior "paged" shows the cover alone and the rest as two-page spreads. With viewingDirection right-to-left, the pages turn from right to left.

Example: Wellcome Collection, “Wunder der Vererbung”

Open in the viewer →

Collection

Opening a Collection lists the manifests in it (here, two volumes) as thumbnails. Choose one to open it.

Example: Wellcome Collection, Richard Owen’s monograph on fossil reptiles (2 volumes)

Open in the viewer →

Sharing by URL

Add these parameters to the viewer URL to choose the resource, page and tab to open. Send the URL, and others open the same view.

ParameterMeaningTry
iiif-content=<manifest URL>The resource to open (the URL of a manifest or Collection).Open in the viewer
canvas=<n>Which canvas to open first (counting from 1). A canvas URI also works.Open in the viewer
tab=<id>The tab to open on the right (metadata, structure, annotations, inference and others).Open in the viewer
pos=<n>Which item of a curation (IIIF Curation Viewer format) to open (counting from 1).Open in the viewer
iiif-content=<content state>An IIIF Content State annotation (base64url). It can point at a page and a region on it, which is outlined when the viewer opens.Open in the viewer

Combine parameters with &. For example, canvas 6 with the metadata tab open:

https://kasane.ldas.jp/en/viewer/?iiif-content=https%3A%2F%2Fiiif.wellcomecollection.org%2Fpresentation%2Fv3%2Fb18035723&canvas=6&tab=metadata

To point at a region on a page, use an IIIF Content State annotation. The last example in the table passes the following annotation, encoded as base64url, in iiif-content.

{
  "@context": "http://iiif.io/api/presentation/3/context.json",
  "type": "Annotation",
  "motivation": [
    "contentState"
  ],
  "target": {
    "type": "SpecificResource",
    "source": {
      "id": "https://iiif.wellcomecollection.org/presentation/b18035723/canvases/b18035723_0008.JP2",
      "type": "Canvas",
      "partOf": [
        {
          "id": "https://iiif.wellcomecollection.org/presentation/v3/b18035723",
          "type": "Manifest"
        }
      ]
    },
    "selector": {
      "type": "FragmentSelector",
      "value": "xywh=883,82,1064,849"
    }
  }
}

IIIF Content State API 1.0

Embedding in other sites

The iiif-viewer tag embeds the Kasane viewer in a page of your own site. Paste the code below into your HTML and it works; nothing is needed on the server.

The frame above is an HTML page with the code below pasted into it, unchanged.

Code to copy

<script type="module" src="https://kasane.ldas.jp/element/v0.1.0/iiif-viewer.js"></script>

<iiif-viewer
  iiif-content="https://kasane.ldas.jp/manifests/sample-manifest.json"
  locale="en"
  theme="auto"
  style="display: block; height: 32rem"
></iiif-viewer>

Attributes

iiif-content
A manifest URL, or a content state. With a content state, the tag only opens the resource for now; the page and region in it are not applied.
locale
Display language (ja / en).
theme
Colour scheme (light / dark / auto).
options
JSON. For now, only the tab to open first (e.g. '{"tab":"metadata"}'; metadata or annotations).
  • The tag fills the height you give it. Set the height with CSS (36rem if you don't).
  • Colours can be changed from outside with CSS variables such as --iiif-viewer-primary.
  • The server of the material you show must allow other sites to read it (CORS).
  • The v0.1.0 in the script URL is the version of the tag.