Japanese support and html not compatible?

Add-ons
1

Hi,
I made a japanese deck and would like to use the Japanese support add-on to add furigana. However, in order to style fields differently in front side and back side, some fields use html tags (see below). These tags are used in a script to change the styling.

But when creating automatically the Reading field from the Expression field, some tags are not copied and the automatic styling script I use can’t work.

Is there a way to make this work? If no and it is a limitation of the add-on, I will contact the add-on author, but I don’t want to disturb him if it is not necessary.

Thank you for you help.

Front side:

{{Expression}}

<script>
  const el = document.querySelector(".card")
  const style = getComputedStyle(el, "")
  const bg = style.backgroundColor
  const eqs = document.querySelectorAll(".eq")
  eqs.forEach(eq => {
    eq.style="color: "+bg
  });
</script>

Back side:

{{furigana:Reading}}

<script>
  const vbs = document.querySelectorAll(".vb")
  vbs.forEach(vb => {vb.classList.add("ub")});

  const eqs = document.querySelectorAll(".eq")
  eqs.forEach(eq => {
    eq.classList.add("u");
    const ct =  eq.textContent;
    eq.textContent = "(="+ ct +")";
  });
</script>

Style:

.card {
  font-family: arial;
  font-size: 20px;
  text-align: left;
  color: black;
  background-color: white;
}

.ub {
  text-decoration: underline;
  font-weight: bold;
}

Example of Expression field content:

この本には、くわしい説明は<span class="vb">書かれていません</span>。<span class="eq">&lt;筆者が&gt;書いていない</span>

(Here, the Expression fields contains only one tag with class “vb” or “eq” used by the styling script, but there may be several such tags in actual cards).

Corresponding example of Reading field, automatically generated:

この 本[ほん]には、くわしい 説明[せつめい]は 書[か]かれていません。&lt; 筆者[ひっしゃ]が&gt; 書[か]いていない

2

If you wish to style the reading, you’ll need to do so after it is created.