How to change text to invisible, but show underline?

Question

I made a studying tool using Javascript and PHP. There's a toggle that shows/hides keywords in a paragraph, so the user can mentally "fill in the blanks".

How I've done this so far is that the all the keywords are <u>underlined</u>, and I use the following Javascript DOM selector

document.getElementsByTagName("u");

And then I change the tag's visibility to hidden. This works as intended - the "keywords" are blanked out and the flow of the document is unaffected, since the keywords still take up the same space that they would normally take.

One downside is that in paragraphs with particularly long "keywords", the paragraph's line structure is disrupted and it looks like text is just floating randomly in space. This would be fixable if I could somehow change visibility such that the words in the keywords are hidden and the text-decoration (underline) still shows. This retains the line structure.

I thought about using Javascript to replace every character in the keyword with underscores, but two more problems pop up. One thing is that even if the number of characters stay the same, the width might change.. For example, "apple" is not the same physical length as "______". This is not ideal as the document flow would change. A second problem is that I can't think of any way to get the keywords back after converting them into underscores.

Any suggestions are welcome!

Answer 1

https://code.sololearn.com/WgiIWB3KmuL1/?ref=app

Answer 2

I thought of another way - instead of changing the visibility property, I could change the background-color to be the same as keywords. However, I'd still like some way to implement my original idea instead of using this quick workaround.

Thanks!

Answer 3

Wrap your text inside a div, add border-bottom to it and change visibility on the child. This would allow you to have a border without compomising much at all.

Since the underline tag is on the text itself you can’t get it to show if you hide the text.

Answer 4

That's useful but I can't use it in my situation. On my website, the user can add new entries through a rich text editor. The rich text editor allows the user to add a <u> tag very easily, and I can't reconfigure the rich text editor.