JSFiddle - React, Tailwind, and code Playground

Testing peformatted text and different spacing widths with monospaced fonts.

by nilloc

HTML

<pre>
this is some test text
this&nbsp;is&nbsp;some&nbsp;test&nbsp;text
this&thinsp;is&thinsp;some&thinsp;test&thinsp;text
this&ensp;is&ensp;some&ensp;test&ensp;text
this&emsp;is&emsp;some&emsp;test&emsp;text<div class="big-height-test"></div>
</pre>

<div class="code">
<span class="pre">this</span><sp></sp><span class="pre">is</span><sp></sp><span class="pre">some</span><sp></sp><span class="pre">test</span><sp></sp><span class="pre">text</span><div class="height-test"></div>
</div>

<div class="widthtest" contenteditable><div class="ch-heighttest"></div>this is some test text<br>
this is <tester>so</tester> test text<br>
this is some test text<br></div>

this is some test text<br>
this is some test text<br>
this is some test text<br>
this is some test text<br>
this is some test text<br>

CSS

html{
  font-size:13px;
}

pre{
  /* visible:hidden; */
  /* color:transparent; */
  font-size:1em;
  position:relative;
  background:rgba(255, 180, 0, 0.4);
}

.code{
  background:rgba(255, 180, 0, 0.4);
  position:relative;
}

.height-test, .big-height-test{
  background:rgba(255, 180, 0, 0.4);
  width:0.6em;
  position:absolute;
  top:0;
  left:0;
  height:1.18em; /* messy :\ */
}

.big-height-test{
  height:calc(5*1.18em); /*doesn't really work..*/
}

.pre{
  font-family: monospace;
}
sp{
  display:inline-block;
  font-family: monospace;
  width:0.6em;
  content:'&ensp;';
  whitespace: pre;
}

.widthtest{
  font-size:16px;
  display:block;
  color:white;
  font-family: monospace;
  background:teal;
  width:22ch;
  /* height:2ch; */ (could it be this easy???)
}
.ch-heighttest{
  position:absolute;
  top:0;
  left:0;
  height:calc(3*2ch);
  background:#bada55;
  
}

tester{
  display:inline-block;
  background:blue;
  min-width:4ch;
  padding-bottom:3px;
  margin-bottom:-3px;
  padding-left:1ch;
  margin-left:-1ch;
  padding-right:1ch;
  margin-right:-1ch;
}

JavaScript

/*this is some test text*/