Contiguous █ character produces colored line in HTML

Question

I was trying some things when I found this result:

let s = "";
for (let y = 0; y < 224; y++) {
  for (let x = 0; x < 361; x++) {
    s += '█';
  }
  s += "\n"
}
document.getElementById('r').innerText = s;

#r {
  width: 1024px;
  height: 896px;
  font-size: 4px;
}

<div id="r">
</div>

You should see some white vertical lines along with the █ character which fills the div; this is caused by a little space in the char itself.

But more interesting, if I try this in JSBin or in a plain page, the lines appear to be colored, with what appears to be a rainbow-like palette.

I would like to know what causes this behaviour (I'm not trying to achieve something specific; I just would like to know why this happens).

Could you post a screenshot of what color you are seeing? On my display it seems to appear as black still when running on JSBin — Dakota Maker, Aug 08 '18 at 13:26
@DakotaMaker I'm seeing this on the jsbin https://i.imgur.com/IrnOBJY.jpg — Tschallacka, Aug 08 '18 at 13:28
I agree with Arthur Wietzorek's answer that it is probably a (sub)pixel-thing. — Bram Vanroy, Aug 08 '18 at 13:29
@DakotaMaker I'd think it's more related to your screen than your browser. If it's a subpixel rendering thing, it may be related to high DPI screens. — Bram Vanroy, Aug 08 '18 at 13:31
This seems to be chrome-specific. I can reproduce on the latest build of chromium and google chrome but not on firefox or edge. — Tom M, Aug 08 '18 at 13:31
@TomM: I'm also seeing this [on FireFox](https://i.stack.imgur.com/TDaPX.png). Not on IE. — Cerbrus, Aug 08 '18 at 13:34
@Cerbrus I can confirm. Firefox on 80% zoom displays colored lines for me too. — Tom M, Aug 08 '18 at 13:37
Possible related question: [Sub-Pixels calculated and rendered differently among browsers](https://stackoverflow.com/q/34676263/1220550) — Peter B, Aug 08 '18 at 13:37
it reminds me another problem : https://stackoverflow.com/questions/51294240/why-is-a-div-longer-than-several-spans-with-the-same-content-only-in-chrome/51294909#51294909 — Temani Afif, Aug 08 '18 at 13:37
@DakotaMaker: imgur uploads expire. They disappear. stack.imgur uploads _never_ expire. Don't change the uploaded image! — Cerbrus, Aug 08 '18 at 13:40
Sorry @Cerbrus https://imgur.com/a/LQfanST this is what I was seeing and I was unaware that imgur uploads expire — Dakota Maker, Aug 08 '18 at 13:44
@DakotaMaker: That's because imgur seems to have some localized issues. That will get fixed eventually. — Cerbrus, Aug 08 '18 at 13:45

Ahorn · Answer 1 · 2018-08-08T13:36:52.180

7

I gonna have a wild guess and say its a browser specific shader thing. If you zoom in and out the colors change, so it seems that there are too few pixels to correctly show the white line. Practically the shader wants to display multiple things at the same time in one pixel, a mix of white and black, which apparently gives a different color depenting on the position on the screen?

Or maybe its even on purpose and someone thought such a shader that mixes colors of adjacent pixels to smooth everything looks better.

EDIT: To sum up some comments, it seems that this depends on the browser your using as well as on your hardware/system, as everybody seems to get different results on different browsers. Playing around with the zoom in the browser also yields different results, for me, in Firefox, there are white horizontal lines, but on some zoom levels the vertical rainbow lines appear, too.

edited Aug 08 '18 at 13:36

answered Aug 08 '18 at 13:27

Ahorn

649
4
19

Yea, the gap is less than a pixel in width. – Cerbrus Aug 08 '18 at 13:28
To add credence to this, the colours don't appear in Firefox - https://i.imgur.com/BzuMw6M.png – Elle H Aug 08 '18 at 13:31
@DerekH In Firefox i have these lines on some zoom levels, but mostly horizontal, white lines – Ahorn Aug 08 '18 at 13:34
@Cerbrus I am sure the white line is a part of the character – Temani Afif Aug 08 '18 at 13:40
@TemaniAfif: seems to depend on the browser rendering the character. – Cerbrus Aug 08 '18 at 13:41

Contiguous █ character produces colored line in HTML

1 Answers1