Give
thickness when highlighted

Question

This is a followup to my question which enables me to highlight and show that there's a newline inside a div however this is not limited to contenteditable div/WYSIWYG. Particularly, just a normal HTML page that contains an article. I just want to have that visual feedback that there's a newline when highlighted normally.

THE QUESTION IS:

Is it possible to see the  's thickness without using Javascript and &nbsp when highlighted? Maybe some pure CSS which enable   act like a whitespace?

This question's motivation is to give   a thickness without putting EXTRA &nbsp or javascript manipulation if possible. Just give   a behavior of a non-breaking space character. Hitting two birds with one stone.

I searched for these references, Can you target a breakline with css, and this.

I already implemented a mock-up versions:

One that use JS which implements selection and range if the the   is within a range, change its style imitating a highlighted whitespace character. As far as possible, I don't want to use JS just to achieve this thing.

and one that uses &nbsp that acts like a   within a span.

Moving on,

Yes,   is just an instruction to make a new line and it's not necessarily a character - not focusable like a whitespace character just like this (run code snippet)

var sel = window.getSelection();
var newRange = document.createRange();

var spanTwo = document.getElementById("two");
var spanOne = document.getElementById("one");
var spanTextNode = spanTwo.firstChild;

newRange.setStart(spanOne,0);
newRange.setEnd(spanTextNode,spanTextNode.textContent.length);

sel.addRange(newRange);

<html>
<body>
  <span id="one">He</span>
   <span><br></span>
   <span><br></span>
   <span id="two">He</span>
</body>
</html>

The highlight breaks at the middle and continues to the id two span instead. It can be fixed by inserting &nbsp though like this (Please run snippet):

 var sel = window.getSelection();
    var newRange = document.createRange();

    var spanTwo = document.getElementById("two");
    var spanOne = document.getElementById("one");
    var spanTextNode = spanTwo.firstChild;

    newRange.setStart(spanOne,0);
    newRange.setEnd(spanTextNode,spanTextNode.textContent.length);

    sel.addRange(newRange);

    <html>
    <body>
      <span id="one">He</span>
       <span><br></span>
       <span>&nbsp<br></span>
       <span id="two">He</span>
    </body>
    </html>

Again, the question's motivation is to give   a thickness without putting EXTRA &nbsp or javascript manipulation if possible. Just giving breakline a behavior of a non-breaking space.

UPDATE Just to leave it here, further research, I found an example - it's facebook's editor (Draft.js)

Upon inspecting the DOM, it gives me:

<br data-text="true">

Which is highlight-able. I don't know if that's a fake   or a fake highlight produced by its JS rendering engine. I think that is a whitespace character at this instance because I can focus on it.

Anyway, thanks.

Give thickness when highlighted

0 Answers0

Give
thickness when highlighted