HTMLのTextAreaで、全角空白とタブを可視化したい

Question

下の画像は、テキストエディタの画像ですが、
1～3行目の四角は全角空白を、4～6行目の矢印はタブを表しています。

HTMLのTextAreaで同じ表示にしたいのですが、どのようにすれば実現可能でしょうか。

Answer 1

全角空白に関しては、そういうWebフォントを用意すれば簡単に実現可能です。

タブはフォントではないので同じ手は使えません。何とかしてタブが表示されている位置を計算して、その場所にアイコンなどをうまく重ねてやる、などする必要があります。簡単ではないしょう。

Answer 2

テキストエリアにはそういう機能がないので難しいでしょう
仮想的な表示用領域をつくって無理表現することはできそうですが

てきとうなサンプル

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  ta.addEventListener('input',()=>{
    v=ta.value.replace(/　/g,"□").replace(/\n/g,"↓<br>").replace(/\t/g,"&gt; 　")+"[EOF]";
    d.innerHTML=v;
  });
  const e = new CustomEvent("HTMLEvents");
  e.initEvent('input', true, true );
  ta.dispatchEvent(e);
});
</script>
<div style="display:flex;justify-content:left;">
<textarea id="ta" rows="20" cols="40" style="font-famly:monospace">
　　　あ
　　　　　　い
　　　　　　　　　う
	え
		お
			か</textarea>
<div id="d"></div>
</div>

Answer 3

int32_tさん、yambejpさん、ありがとうございます。
TextAreaでは無理そうなので、仕様上無理として諦めようと思います。

ベストアンサーはお二人ともにさせて頂きたいのですが、一人しか選べませんので、サンプルを頂けたyambejp様にさせて頂きます。