Text overlap issue in EPUB bullet-like lists (Readium 3.1.1)

[sakamoto-minaho]

Description:

We are encountering a rendering issue when displaying some EPUB files using Readium version 3.1.1.Specifically, certain sections that use a <p> tag combined with <span> tags to emulate numbered or bulleted lists appear overlapped and unreadable.

This issue is confirmed on multiple physical devices, but does not occur on Android Studio emulators. Additionally, when rotating the screen to landscape and then returning to portrait, the rendering corrects itself. This behavior suggests a layout recalculation issue triggered by rotation.

Here is an example of the kind of (simplified) HTML structure causing the issue:

Text rendering issue in EPUB: overlapping and unreadable content when using <p> and <span> in bullet-like structures

<div class="main">
  <div class="text-block indented">
    <p><span class="number">2.</span> <span class="bold">Consider channel creation authority.</span> Individuals can usually create channels freely, but...</p>
    <p><span class="number">3.</span> <span class="bold">Add channel descriptions.</span> Descriptions help all members understand channel purpose, enabling appropriate communication.</p>
    <p><span class="number">4.</span> <span class="bold">Create department channels.</span> It's helpful to reflect the org chart with corresponding channels.</p>
    <p><span class="number">5.</span> <span class="bold">Use naming conventions.</span> This ensures better organization and information retrieval.</p>
  </div>
</div>

CSS excerpt:

.hltr .indented { text-indent: -2em; padding-left: 2em; }

Other notes:

• This issue occurs in other sections of the EPUB using similar <p><span>...</span></p> patterns.
• All affected paragraphs use negative text-indent values with corresponding padding-left.

Expected Behavior:

The text should display cleanly without overlapping, as it does after screen rotation or on emulator.

Actual Behavior:

Text appears overlapped and unreadable in the initial portrait rendering on physical devices.

Devices Confirming the Issue (Reproducible):

The issue consistently occurs on the following physical devices:

• Pixel 9a
  • Android Version: 15
  • System WebView: Android System WebView(137.0.7151.115)
• arrows F-41B
  • Android Version: 12
  • System WebView: Android System WebView(137.0.7151.116)
• Galaxy A21
  • Android Version: 11
  • System WebView: Android System WebView(137.0.7151.115)

Devices Without the Issue (Not Reproducible):

On the following physical devices, the issue does not occur:

• AQUOS
  • Android Version: 15
  • System WebView: Android System WebView(137.0.7151.115)

[mickael-menu]

Would you mind sharing a sample EPUB exhibiting the issue as well as a screenshot of the problem? Thank you.

[sakamoto-minaho]

Thank you for your response.
Please find below the requested materials regarding the rendering issue:

---

📱 Screenshots & Details

1. Pixel 9a

• Issue Screenshot:

• HTML snippet(item/xhtml/p-017.xhtml):

<div class="gfont h-indent-2em">
<p><span class="bold">ニ</span>　<span class="bold">@lggzdilぢゼギバワについて：小務チズキセゅ美聞や仕の、今より語お白分）あ日と前気古み君だろう。</span>@ぢ赤ょだュズパヲフ解理じがネヂクイをめぢ、コシについてユギマヲ右古き時見ょ彼です。黄校ぎニヅノヒビうぶぴにおいてぺづ、あぴりじりべ彼五く美ほかた、びぼきぐぢ二読まねものだ。情事や小時せ大じどずホテしか白ぽょむ、んがげっ「社古きに水」ぴやめばぐぞぞでしょう。「見耳ひ前中」ざ日じご、思語を知日ぢ務ほどバブこ九ぽかむぷづゆ、人君昨左金ぢぱりとご、足長がプヌセあ木きなごせけくどである。をたろ短んだけゅ、きょ体下へねすゆだろう。</p>
<p><span class="bold">フ</span>　<span class="bold">ヌザヅチこ口ぴを、セヒデクニ前が悪月ぐでしょう。</span>バエズヅて小おぷ、君君けッハデヂヲでこほ口四やぬぜかこ、ヅギッについてゾポベだ三理ぬ君白てぢ見わはである。ウヤフベぼ、水とぐゾヤレネダぜ黒七きつなす、読明をと人でじょこみ古分をょまぱがり、ビクゼロン私い昨より中ぺたぷはせ手足ばに黄まか右前ぐ西きどに五左でした。</p>
<p><span class="bold">ヲ</span>　<span class="bold">ホポダュほかふ知時ほど心上だろう。</span>低あとヂベポピハち業について、思知すがへなぢ書ふてよりさりり、学十木むきずでした！　コンホツヤ持お、「右二」よ「ねざへずず」っるうぴ知作足か校ばュゾほどシぴちぜふいぢんぱわすかもしれない。</p>
</div>

• Locator position: 132

---

2. arrows F-41B (Case 1)

• Issue Screenshot:

• HTML snippet(item/xhtml/p-008.xhtml):

<div class="gfont h-indent-2em">
<p><span class="bold">1.</span>　少、心聞ぞ低考ぽばかりょ、ごがすざ時手わをが秒ぐそぺにゾに違いない。くばし醜など字知はらほどむぺだろう。</p>
<p><span class="bold">2.</span>　今私緑が、りぶしかカめうかかぐぬよりがぐわ長こょことだ。</p>
<p><span class="bold">3.</span>　なだフゼゼめ、からつやぎかおについてワナあ赤緑けです。</p>
<p><span class="bold">4.</span>　上に関してベイブわででみことだ。</p>
<p><span class="bold">5.</span>　歯ふグとフう一にわだろう。ひぬをず、Kcvoyp（でも：書社たテプテぺ気歯べしか気会づろりラグズに違いない。</p>
<p><span class="bold">6.</span>　九四わが長かほどれない。ゃしでなんてチリテビがが読です。左読ざ右八つでべぜぎなでも彼ぷむだった。</p>
<p><span class="bold">7.</span>　モエサゼだけレホラずだけのみだろう。業解せ一左ぐ手ほどねつ鼻東はズアジをあ東口んでしょう。</p>
<p><span class="bold">8.</span>　読仕白ほどおで社下はでしょう。</p>
<p><span class="bold">9.</span>　分考よ左赤そなど、おてペリツれへねざたに違いない。</p>
<p><span class="bold">10.</span>　ザゲモひ務低までそかモアトゼプほどもふふれよことだ。仕体ゆべらが作作りではをでした。</p>
</div> 

• Locator position: 52

---

3. arrows F-41B (Case 2)

• Issue Screenshot:

• HTML snippet(item/xhtml/p-017.xhtml):

<div class="gfont h-indent-2em">
<p><span class="bold">1.</span>　<span class="bold">イヌなんてび新だけ分である。</span>えぐナベセケネぬ良美ぷよりゅがにあね、ーゼッぴもゃへか八美ざ古なかもしれない。九を下こょぱづた、ジヤンンガずりぐべく少びぬぶじ、いはる木本ど美むぬのゃっはわ東さ一ゆぱん赤かれぺろくぼから美まぽとじ六ぱボハーバピい美びざゆふてりつべだことだ。ヲアボボュポタベギイエギモケシフイベべあよシリユフから、ニンテウノヅゾペニガハコドシフパスゲきぢにノセほかヨづでしっり、ずよぴこ右がめへおあ業頭いいぴおものだ。きぜマヅチヂギぞ明ぜへへめ、うぼばにおいてのろへのよず理解ぱのにれと、ットキゾテから理手ずホガーグヨハぴ西とげぷし聞北だろう。</p>
<p><span class="bold">2.</span>　<span class="bold">金ばかりゅつほかことだ。</span>彼体心うさ、ヅアモダッ持君るアなんてダサむ南学ゃこのれ醜ゅ、聞緑おなどこョネプグミた時美んみょぴぷです。ごず、美きねづぢゼホペュデぬ会三せルヲモバルあきぐど、のもぽ秒知へぢわごゅてもぼば三働多れくぎれば、ヲネネオトホょボセザッヘぬ四がやヲソボツムちひぜみ、下知にたて北よ知体せぶぶぱおかもしれない。</p>
<p><span class="bold">3.</span>　<span class="bold">作悪より学ます。</span>ぬにこじりビオニきほか足ギロロクニもさよりぱ木古ぼ上手のです。ハドエマキづだ頭歯なんてざ火君ぎやざ、ごにおいて二黒み新ゃせへぱまのだ。にょいきう、北口み校ーヌケパーばかりめ業木やま、めづむぽみやマについてパムダマぢぞとだにこをゃぜました。</p>
<p><span class="bold">4.</span>　<span class="bold">持学ごギルネなんてしみはノグばかりお業ふぶっだった。</span>良火長っ大木ゃはふけ、に関して月彼女す一人たひだきん八までヂゲヂイゃ北黄じぴぽことだ。金二すワソバエゴヘアハヘベ（字君：後会顔ぬ口年あ白めとばはせめぺ持日ず仕青下低け青理ごぬきば）、古赤るにじゃ美明がだはほびぶふぢ、ぶばたょぴ言情めらザヂジボヌが業でしょう。</p>
<p><span class="bold">5.</span>　<span class="bold">金について考緑のだ。</span>顔青口七わ見ひぞ、ワミミほかの今務れねえ会八りえ、だけづ事ゆ考ぼぐ新口六である。仕らゆぬあにつぽっな、理彼女八つ日ぎ作月下いでげんなばこナツアョけ秒心ろ、黒じれ、社醜ばかり、木東－悪下、長語－七良－考感ふくなせ北のだ。</p>
</div>

• Locator position: 130

---

📚 EPUB File

Please find the EPUB file used to reproduce the issue attached here:
📎 EPUB causing overlap issue