Ruby works alone, but conflicts with line breaks in review screen

[ShiSi14]

Hi,

I’m using AnkiDroid 2.23.3 with a custom template that supports Japanese furigana using <ruby>/<rt>.

Ruby works correctly on Android when used alone.

Recently, I added support for line breaks inside fields. On:

• Anki Desktop → everything works
• AnkiDroid preview (eye icon) → everything works

However, in the actual review screen on AnkiDroid:

• Line breaks work
• Ruby works when used alone
• But when ruby and line breaks are used together, ruby fails to render correctly

So the two features seem to conflict only in the review screen (not in preview).

Is this a known limitation of the review renderer?
Is there a recommended way to structure ruby + line breaks so they can work together reliably?

Thank you very much for any advice!

---

Back Template

<!-- 中文 -->
<div class="main-text">
  {{中文}}
</div>

<hr>

<!-- 日文（ruby） -->
<div class="main-text jp-ruby">
  {{日文注音版}}
</div>

<!-- 左对齐信息区 -->
<div class="info-block">

  {{#词性}}
  <div class="info-item">
    <b>词性：</b>{{词性}}
  </div>
  {{/词性}}

  {{#例句}}
  <div class="info-item example-block">
    <b>[例]</b><span class="jp-ruby example-text">{{例句}}</span>
    {{#例句翻译}}
    <div class="example-translation">{{例句翻译}}</div>
    {{/例句翻译}}
  </div>
  {{/例句}}

  {{#例句2}}
  <div class="info-item example-block">
    <b>[例]</b><span class="jp-ruby example-text">{{例句2}}</span>
    {{#例句2翻译}}
    <div class="example-translation">{{例句2翻译}}</div>
    {{/例句2翻译}}
  </div>
  {{/例句2}}

  <!-- 词典链接 -->
  <div class="info-item dictionary-link">
    🔍 <a href="https://www.weblio.jp/content/{{日文注音版}}" target="_blank">
      在线词典（Weblio）
    </a>
  </div>

  <!-- 记忆备注 -->
  {{#记忆备注}}
  <div class="info-item note-text jp-ruby">
    {{记忆备注}}
  </div>
  {{/记忆备注}}

</div>

---

Styling

/* ===== 全局 ===== */
.card {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Segoe UI", sans-serif;
  font-size: 26px;
  line-height: 1.8;
  text-align: left;
}

/* ===== 主词 ===== */
.main-text {
  font-size: 44px;
  margin: 18px 0;
  font-weight: 500;
}

/* ===== 信息块 ===== */
.info-block {
  text-align: left;
  margin-top: 22px;
  font-size: 26px;
}

.info-item {
  margin-bottom: 14px;
}

/* ===== 例句 ===== */
.example-text {
  font-size: 32px;
  line-height: 1.7;
  white-space: pre-wrap;
  margin: 0;
  padding: 0;
}

/* ===== 例句翻译 ===== */
.example-translation {
  color: #444;
  font-size: 28px;
  line-height: 1.7;
  white-space: pre-line;
  margin: 0;
  padding: 0;
  margin-top: 2px;
}

/* ===== ruby ===== */
ruby {
  ruby-position: over;
}

rt {
  font-size: 0.65em;
  color: #555;
}

/* ===== 记忆备注 ===== */
.note-text {
  font-size: 28px;
  color: #444;
  margin-top: -50px;
  white-space: pre-line;
}

/* ===== 查词链接 ===== */
.dictionary-link {
  margin-top: 4px;
}

a {
  font-size: 24px;
  color: #2a4d9e;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

---

Script

<script>
function applyRuby(html) {
  if (!html) return "";

  return html.replace(
    /([\u4e00-\u9fa5]+)\[([^\]]+)\]/g,
    function(_, kanji, kana) {
      return (
        '<ruby class="ruby-unit">' +
          '<rb>' + kanji + '</rb>' +
          '<rt>' + kana + '</rt>' +
        '</ruby>'
      );
    }
  );
}

document.querySelectorAll(".jp-ruby").forEach(el => {
  el.innerHTML = applyRuby(el.innerHTML);
});
</script>

[ShiSi14]

[ZornHadNoChoice]

Enable the new study acreen from the settings.

Also, why are you reinventing the wheel? See furigana field replacement.

[ShiSi14]

Thank you very much for taking the time to answer what was probably a very simple question.

I don’t actually know how to program — my template was generated with the help of ChatGPT — so your explanation was extremely helpful to me.

I truly appreciate your help.