PennController for IBEX › Forums › Support › words showing on separate lines in self-paced rading › Reply To: words showing on separate lines in self-paced rading
August 12, 2021 at 11:03 am
#7163
Keymaster
Dear August,
What you can do is execute some javascript immediately after you print your DashedSentence to wrap your sentences in an element that won’t allow linebreaks:
newController("DashedSentence", {s : "You have just begun reading the sentence. You have just finished reading."})
.print()
,
newFunction(()=>{
const container = document.querySelector(".DashedSentence-sentence");
const sentences = [[]];
container.childNodes.forEach(n=>{
if (sentences[0].length || n.nodeName!="#text")
sentences[0].push(n);
if ($(n).text() && $(n).text().match(/[.!?]$/))
sentences.unshift([]);
});
while (sentences.length){
const sentence = sentences.pop();
if (sentence.length===0) continue;
const span = document.createElement("SPAN");
span.style['margin-right'] = "0.5em";
span.style['white-space'] = "nowrap";
span.append(...sentence);
container.append(span);
}
container.style.display = 'flex';
container.style['flex-wrap'] = 'wrap';
}).call()
,
getController("DashedSentence")
.wait()
.remove()
Notice the sequence [.!?], which defines the characters that you consider to constitute sentence delimiters. Feel free to remove or add characters to that (eg. ;)
Jeremy