Text Edit: absolute position contenteditable

by ScottRippey

HTML

<div contenteditable>
Lorem ipsum dolor sit amet
</div>

CSS

span {
  position: relative;
}

.span-0 {
  color: red;
}
.span-1 {
  color: orange;
}
.span-2 {
  color: yellow;
}
.span-3 {
  color: green;
}
.span-4 {
  color: blue;
}
.span-5 {
  color: violet;
}


body {
  font-size: 50px;
}

JavaScript

document.querySelectorAll("div").forEach(div => {
  var letters = div.textContent.trim().split('');
  
  div.innerHTML = letters.map((l,i) => {
    var style = "";
    style += `position: absolute; left: ${30*i}px; top: 50px`

	  return `<span class="span-${i%6}" style="${style}">${l}</span>`
  }).join('');
  
})