Observable aspects of my digital language art. I like to ask people to read nllf.net, some of which is driven by notebooks made here.
Public
Edited
Feb 11
{
if (demo1select == "default")
// mutable demo1style is a cell toward the end of this notebook
mutable demo1style = html``;
else
mutable demo1style = html`<style> #demo1 {white-space: break-spaces}</style>`;
return "Code in this cell changes the style of a paragraph with id='demo1' depending on your selection.";
}
{
if (demo2select == "default")
// mutable demo1style is a cell toward the end of this notebook
mutable demo2style = html``;
else
mutable demo2style = html`<style> p {white-space: break-spaces; font-family: Courier; color: red;} #demo1 {white-space: break-spaces}</style>`;
return "This cell changes all paragraphs on this page depending on your selection.";
}
import { verseTag } from "@dla/imports"
verseTag
html`<dla-verse>and no, no
return to un
returning, to tell
no,
to tell no
one
the last or just
my own
return
to
no one
</dla-verse>`
html`<style>
dla-verse {
font-family: ${fontSelection};
font-size: ${sizeSelection}px;
}
</style>`
verseText = html`<dla-verse>and no, no
return to un
returning, to tell
no,
to tell no
one
the last or just
my own
return
to
no one</dla-verse>`
verseSpanned = html`${addSpansTo(verseText)}`
offsets = wordOffsets(verseSpanned)
addSpansTo = verseElem => {
// ensure that verseTag is registered:
verseTag;
let newText = ``;
let text = verseElem.innerHTML;
let wordStart = text.search(/\S/); // nonwhitespace
while (wordStart != -1) {
newText += text.substr(0, wordStart);
text = text.substr(wordStart);
let wordEnd = text.search(/\s/); // whitespace
if (wordEnd == -1) wordEnd = text.length; // text ends with nonwhitespace
newText += `<span>` + text.substr(0, wordEnd) + `</span>`;
text = text.substr(wordEnd);
wordStart = text.search(/\S/);
}
return `<dla-verse class="verse">${newText}</dla-verse>`;
}
wordOffsets = verseSpans => {
let array = [];
if (verseSpans == ``) return array;
let vw = document.documentElement.clientWidth;
let nodes = Array.from(verseSpans.children);
nodes.forEach((node, index) => {
if (node.offsetLeft != undefined) {
array.push([(node.offsetLeft / vw) * 100, node.offsetTop]);
}
});
return array;
}
mutable demo1style = html``
mutable demo2style = html``
loop = async () => {
for (let j = 0; j < 2; j++) {
for (let i = 0; i < offsets.length; i++) {
await scorepause("u" + i);
}
}
}
scorepause = async span => {
return await Promises.delay(1000).then(() => {
let theElem = document.getElementById(`${span}`);
theElem.classList.toggle('visible');
});
}
makeStyledSpansFrom = spannedVerse => {
let s = ``;
let spans = Array.from(spannedVerse.children);
spans.forEach((span, index) => {
if (span.offsetLeft != undefined) {
let offl = offsets[index][0];
let offt = offsets[index][1];
s += `<span id="u${index}" class="text" style="left:${offl}vw;top:${offt}px">${span.innerText}</span>`;
}
});
return s;
}
mutable spans = ``
html`<style>
.textcontainer {
position: relative;
cursor: none;
min-height: 480px;
font-family: ${fontSelection};
font-size: ${sizeSelection}px;
line-height: 1.1;
}
.text {
position: absolute;
color: rgba(0,0,0,0);
transition: color 1s ease-in-out;
}
.text.visible {
color: rgba(0,0,0,255);
}
</style>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
