Hello Jeremy,
I was trying to have a chunk-by-chunk SPR experiment in Chinese. I set manual line breaks <br> for each item and have dashes for replacement for each chunk. It works fine on most browsers but on some browsers I ran into the display issue. Since the Chinese character takes up two bytes so I used two underscores __ in my code for replacement. On my own browser, the two underscores __ will be displayed as one gray lines, which is good. Yet on some browsers the lines will be displayed as separate underscores. Can you possibly tell me what I could do to improve this?
I used the function as this:
// Dashed function to allow for manual line breaks
dashed = (name,sentence) => [
newText(name,””).css({display:’flex’,’flex-direction’:’row’,’flex-wrap’:’wrap’,’line-height’:’4em’,’max-width’:’70em’,’min-width’:’70em’}).print()
,
…sentence.split(/[*<>]+/).map( (w,i) => (w==”br”?
newText(“”).css(“width”,”100vw”).print(getText(name))
:
newText(name+’-‘+i, w.replace(/./g,’__’))
.css({margin:”0em 0.2em”,’font-family’:’monospace’,”font-size”:”20pt”,”color”:”gray”})
.print(getText(name))
// newText(name+’-‘+i, w.replace(/([^.,?:;!\s])/g,’-‘))
// .css({margin:”0em 0.2em”,’font-family’:’monospace’,”font-size”:”large”})
// .print(getText(name))
))
,
newKey(name+’-start’, ” “).log().wait()
,
…sentence.split(/[*<>]+/).map((w,i)=>(w!=”br”?[
getText(name+’-‘+i).text(w).css({“color”:”black”})
,
newKey(i+”-“+w,” “).log().wait()
,
getText(name+’-‘+i).text(w.replace(/./g,’__’)).css({“color”:”gray”})
]:null))
]
In my other experiment, I used : newController(“DashedSentence”, {s: row.Sentence, mode:”self-paced reading”, display: “dashed”, blankText: “#”,showAhead: true, showBehind: true}) . This function seems to align best with the lines and words. But that experiment doesn’t require line breaking and the item is not very long.