search

magpie-ea / magpie-modules

the reusable front-end bits in the _magpie modules
MIT License
7 stars 1 forks source link

CSS for self-paced reading 'underlines' differs in effect on chrome and firefox #68

Open n-kall opened 4 years ago

n-kall commented 4 years ago

In the speaker-knowledge experiment (https://github.com/magpie-ea/magpie-speaker-knowledge) the 'target' sentences need to be on a new line. I accomplished this by adding <br/> in the corresponding places in the trial data: e.g.

sentence: `This | is | the | first | example | paragraph.<br/> | You | will | see | two | more | examples | for | practice.`

Then customising the CSS like so, in order to actually show the new lines:

.magpie-spr-sentence .spr-word {
    display: inline;
}

This solution work for Firefox, but not for Chrome.

In Chrome, the word that 'includes' the break does not get underlined.

Firefox: image

Chromium: image

JannisBush commented 4 years ago

Confirmed the "bug" and it is even worse. When chrome adds an automatic line break because of limited space, then the last word (for in the following example) does not get underlined either.

image

The reason seems to be that chrome binds the new line character (<br>) to the start of the newline whereas firefox binds the new line character to the end of the old line. (The underline thus has a length of 0 in chrome)

We can probably add a special symbol in the input ( e.g. | #br# |) and change the spr view to parse it into a line break to fix the first problem. To fix the second issue we probably would have to rethink the complete underlining process and do not use the ::after property.