Fill the browser window with random digits

Question

I would like to fill the visible window in a webpage with random digits. The way I am currently trying to do this involves a long string of random digit first, and then using the following property on a div:

 #mydiv{
      font-family: "Inconsolata", monospace;
      word-break: break-all;
      font-size: 3em;
      color: #202020;
      height: 100%;
      width: 100%;
      overflow-y:hidden;
      }

https://jsfiddle.net/4ztpbnm0/1/

It works(ish) on Chrome, but it takes a very noticeable amount of time to reflow after resizing the browser window. Is there any way to make this seamless?

"but it takes a very noticeable amount of time to reflow after resizing the browser window. Is there any way to make this seamless?" - I haven't noticed that while resizing the jsfiddle you provided. — nicael, Jun 18 '16 at 20:05
Did you noticed that your final string length is `11072`, not 173*6? — vp_arth, Jun 18 '16 at 20:08
@nicael, this rerender freeze appeared only with horizontal resize. — vp_arth, Jun 18 '16 at 20:10
@vp_arth That's what I've tried, but the window seems to be resizing smoothly, as usual. — nicael, Jun 18 '16 at 20:13
@nicael, what browser/version you use? I get about 5sec of freeze with chromev51 — vp_arth, Jun 18 '16 at 20:15
@vp_arth Safari 9.1.1. Or does OP mean it only lags for Chrome? — nicael, Jun 18 '16 at 20:15
Horizontal resizing is very smooth on Firefox 44.0 running on the same machine, but the height constraint is not respected. — Arthur B., Jun 18 '16 at 20:31
If I force the height with max-height firefox is still smooth, and chrome still lags — Arthur B., Jun 18 '16 at 20:33

mgiuffrida · Accepted Answer · 2016-06-18T22:44:53.593

5

Use overflow-wrap: break-word instead of word-break: break-all.

https://jsfiddle.net/746g71wb/

word-wrap was recently renamed to overflow-wrap, so to support other browsers you may want to specify both:

word-wrap: break-word;
overflow-wrap: break-word;

Possibly relevant Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=591793

edited Jun 18 '16 at 22:44

answered Jun 18 '16 at 22:29

mgiuffrida

3,299
1
26
27

score 0 · Answer 2 · edited May 23 '17 at 10:29

I suggest using an SVG background image (supported by all current browsers). You can add as many 'random' digits to the SVG tile as you like to make it look convincing:

body {
  background-color: black;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='400px' width='385px'><text x='0' y='0' font-size='40px' font-family='monospace' fill='%23202020'><tspan x='0' dy='40px'>0011010101010100</tspan><tspan x='0' dy='40px'>0101001010100101</tspan><tspan x='0' dy='40px'>1010101000010001</tspan><tspan x='0' dy='40px'>0101010101000100</tspan><tspan x='0' dy='40px'>0010110101010101</tspan><tspan x='0' dy='40px'>0101000010101010</tspan><tspan x='0' dy='40px'>1010101101110101</tspan><tspan x='0' dy='40px'>1010010010010110</tspan><tspan x='0' dy='40px'>0100110101010101</tspan><tspan x='0' dy='40px'>1011100010111001</tspan></text></svg>");
}

Its performance is super fast even on an ~8 year old laptop. If you are serious about randomness, generate the SVG via JavaScript and fill it with completely random digits.

See also Is there a way to use use text as the background with CSS?

score -1 · Answer 3 · edited Jun 19 '16 at 00:22

-1

Instead of concatenating the string, use an array. It's much faster.

bgtext = [];
for (var i = 0; i < 173; ++i) {
  bgtext.push(Math.random() < 0.5 ? '1' : '0');
}

for (var i = 0; i < 6; ++i) {
  bgtext.push(bgtext.join(''))
};

function loadbg() {

 bgtext = bgtext.join('');

  document.getElementById('background').innerHTML = bgtext;
}
loadbg();

<body>
  <div id="background">
  </div>
</body>

edited Jun 19 '16 at 00:22

zondo

19,901
8
44
83

answered Jun 18 '16 at 20:25

Eduardo Lovatti

26
2

I'm aware this will make the loading a little bit faster, but this isn't what I'm concerned about. Resizing is still super slow. – Arthur B. Jun 18 '16 at 20:28
no difference, if not slower. Issue is not while generate, it's while rerender view on resize. No js code running here. – vp_arth Jun 18 '16 at 20:29

Fill the browser window with random digits

3 Answers3