Text handling #15
Replies: 4 comments
-
Given a canvas, I also want to be able to grab its text as a single plain text blob, or as HTML. |
Beta Was this translation helpful? Give feedback.
-
Demo using Atlas |
Beta Was this translation helpful? Give feedback.
-
Proposal Canvas panel treats Question - should CP load text by default? <canvas-panel
iiif-content="https://..canvas_id.."
partof="https://..manifest_id.."
text-enabled="true"
text-selection-enabled="true">
</canvas-panel>
<div id="textyStuff" style="display:none">
Text selection: <button id="textToggle">On</button>
<br/>
<button id="textState">Show</button>
</div>
<script>
const cp = document.getElementById("cp");
// (whatever the pattern for this is)
cp.addEventListener("ready", () => {
if(cp.hasText) {
document.getElementById("textyStuff").style.display = "";
const toggler = document.getElementById("textToggle");
const textState = document.getElementById("textState");
toggler.addEventListener("click", () => {
cp.textSelectionEnabled = !cp.textSelectionEnabled;
toggler.innerText = cp.textSelectionEnabled ? "On" : "Off";
});
textState.addEventListener("click", () => {
console.log(cp.supplementingAnnotations); // all the supplementing annotations on the canvas
console.log(cp.textSelection.text);
console.log(cp.textSelection.html);
console.log(cp.textSelection.supplementingAnnotations); // just those in the current selection
});
}
});
</script> |
Beta Was this translation helpful? Give feedback.
-
Another example - how would the Mirador example work? The Mirador example is the 2d equivalent of this: It should be possible with default behaviour of cp and an additional component to wire them together, just like this: <canvas-panel
id="cp"
iiif-content="https://..canvas_id.."
partof="https://..manifest_id.."
text-enabled="true">
</canvas-panel>
<text-lines canvas-panel="cp">
</text-lines> This would produce outputs for video with captions as annos, video with captions as webvtt, same for audio, page of text with line transcription supplementing annos (it looks for and favours the If more than one source of supplementing annos is available, or pseudo-annotations (OCR data or WebVTT), the component will have a drop down at the top that allows the user to choose, using labels and languages. TODO - explore how the developer and the user intervene here. TODO - developing this super-useful component helps uncover the event model that can be used by developers TODO - document how the text-lines works as a case study. |
Beta Was this translation helpful? Give feedback.
-
How do I get the text from the canvas so I can do things with it in other parts of my application?
How do I let the user select text on the Canvas surface?
Text is one area where for practical reasons the component supports more that just IIIF and W3C.
For spatial content, the OCR formats METS-ALTO and hOCR should also be supported.
For temporal content, WebVTT should be supported.
In both cases the content in these formats can be translated into something that targets the canvas the same way W3C annos do.
Text rendering outside the canvas
See https://canvas-panel.digirati.com/developer-stories/viewer1.html
I want to obtain the text that's currently on the canvas and render it somewhere else.
I also want to be able to respond to interactions with that text and reflect it on the canvas surface.
A simple example of this is #12, but for text annotations. Consider this view in (regular) Mirador 3:
Suppose the left hand main panel is Canvas Panel.
There are three kinds of interaction going on here.
This seems like a good example to re-create using canvas panel:
The exact same component should be the basis for implementing something like https://openhypervideo.github.io/iiif-interactive-transcript/ for AV on the canvas - the anno listing component doesn't behave differently for hover, select, scroll; any of these events has a corresponding anno as data (the anno clicked on or scrolled to); the glue code navigates to and/or highlights the corresponding anno target. This might be a navigation in time.
Text rendering on the canvas
This is described in https://canvas-panel.digirati.com/developer-stories/collaboration.html, but there is a real implementation of this now - https://github.com/dbmdz/mirador-textoverlay - which works very well and solves many subtle interaction issues.
I want the user to be able to select text from the canvas, copy it to clipboard.
The selection should flow sensibly (although this is dependent on the source data - a good reason not to reinvent the Mirador text overlay, this is a hard problem).
Could this be adapted / integrated with Canvas Panel? Seems ideal not to maintain two implementations of this hard problem.
Beta Was this translation helpful? Give feedback.
All reactions