Google Play Books and Nested Lists - Some Weird Display Issue

[rsuchwani]

Hello Guys,

So I have this ePub which I'm preparing for Google Play Books and other ePub platforms. Thing is, the Play Books display some 'orphan' or 'empty' list markers across pages. All these markers are of 'nested lists'.

I'm at loss at what can cause this and how to get rid of these issues.

Can anybody here help in solving this issue?

Many thanks.

For reference, the PDF has the screenshots with an explanation of the issue is attached.

[KevinH]

Probably incorrectly nested ul tags. What does the xhtml look like (copy paste inside code tags here or snap a screen capture) near where the problem occurs?

[JSWolf]

Just a note, it would be easier to attach the screenshots instead of making a PDF.

[rsuchwani]

Originally Posted by KevinH

Probably incorrectly nested ul tags. What does the xhtml look like (copy paste inside code tags here or snap a screen capture) near where the problem occurs?

Originally Posted by JSWolf

Just a note, it would be easier to attach the screenshots instead of making a PDF.

@KevinH and @JSWolf

My sincere apologies for not being prompt in responding, I was badly held up in personal matters.

Here is the code of those specific list items.

<ul class="blacksqlg" style="margin-top: 0;">
                <li class="bsqlg"><b>Allergische Sofortreaktionen (nach 5 – 15 Minuten)</b> Bei Kindern selten.
                <ul class="whitesqlg" style="margin-top: 0;">
                    <li class="wsqlg">Im Falle von Atemnot (Asthma) oder Blutdruckabfall mit evtl. Bewusstlosigkeit
                        <ul class="darkarrw" style="margin-top: 0;">
                            <li class="darw">ist die Ambulanz (Schweiz 144) bzw. der Notarztwagen (EU 112) zu rufen und
                                <ul class="arrwright" style="margin-top: 0;">
                                    <li class="arrt">falls zur Hand, Adrenalin (Epipen Autoinjetor) spritzen.<br/>
                                        <span class="fs-s">Verdacht auf lebensgefährliche Allergie, siehe unten Elternwissen.</span></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="wsqlg">Im Falle von Hautausschlag am Körper ausserhalb der Stichstelle mit Quaddeln (Nesselfieber = Urticaria, Foto am Ende der Datei <a href="0GB2-nose-wings.xhtml"><u>hier</u></a>)
                        <ul class="darkarrw" style="margin-top: 0;">
                            <li class="darw">ist <span class="chelsa-gem">eine Ärztin / ein Arzt</span> in den Folgetagen zu konsultieren.<br/>
                                <span class="fs-s">Im Moment keine Gefahr, aber es ist abzuklären ob eine Allergie vorliegt, zwecks Abgabe von Notfallmedikamenten wie Epipen bei einem späteren Stich. (Elternwissen).</span></li>
                        </ul>
                    </li>
                </ul>
                </li>
                <li class="bsqlg"><b>Allgemeine Giftwirkung Bienenstich</b> (beginnt nach 1 - 2 Stunden):<br/>
                    <b>Kind &lt; 2 Jahre</b> ab 10 Bienenstiche ► Überwachung im Spital.<br/>
                    <b>Kind 2 - 5 Jahre</b> ab 30 Bienenstiche ► Überwachung im Spital.<br/>
                    <b>Kind 5 - 10 Jahre</b> ab 50 Bienenstiche ► Überwachung im Spital.<br/>
                    <span class="fs-s">Eine Biene kann beim Stich mehr Gift als eine Hornisse und wesentlich mehr als eine Wespe entladen.</span></li>
                <li class="bsqlg"><b>Lokale Giftreaktion bei Stichen am Hals und im Mund</b> (beginnt nach 1 - 2 Stunden).<br/>
                    Stiche am Hals und im Mund können zu einer Schwellung des Kehlkopfs und zum Ersticken führen.
                <ul class="darkarrw" style="margin-top: 0;margin-bottom: 0;">
                    <li class="darw">Bei Stichen am Hals oder im Mund ist eine Überwachung im Spital zwingend.</li>
                </ul>
                <ul class="arrwright" style="margin-top: 0;">
                    <li class="arrt">Als Sofortmassnahme bzw. zur Verzögerung der Giftwirkung Eis lutschen.</li>
                </ul>
                </li>
                <li class="bsqlg"><b>Verzögerte allergische Lokal</b>reaktion (beginnt nach 12 - 24 Stunden, ist nach 36 bis 48 maximal und bildet sich danach spontan zurück.) Teils massive <b>Schwellung und Rötung</b> an der Stichstelle, die über Stunden und Tage einen Farbwechsel von dunkelrot zu blau zu grün und zu gelb zeigen kann.<br/>
                    <span class="fs-s">Das Blut an der Stichstelle zersetzt sich wegen des Giftes.</span>
                <ul class="arrwright" style="margin-top: 0;">
                    <li class="arrt">Darf von den Eltern mit Kühlen und <u><a href="7ms-analgesic-drugs.xhtml">Schmerzmitteln</a></u> behandelt werden.</li>
                </ul>
                </li>
                  <li class="bsqlg">Verzögerte Giftwirkung mit <b>roten Striemen</b> herzwärts der Stichstelle.
                      <ul class="arrwright" style="margin-top: 0;">
                        <li class="arrt">Bei gutem <a href="0GA1a-gen-instruction.xhtml">Allgemeinzustand</a> darf zugewartet werden.<br/>
                            Es ist eine Entzündung der Lymphgefässe durch das Gift. Im Gegensatz dazu sind rote Striemen herzwärts einer eiternden Wunde (evtl. nach Kratzen bei Mückenstich) eine Entzündung durch Bakterien mit der Gefahr, dass sich Bakterien auf dem Blutweg in anderen Organen absiedeln (= Sepsis = fälschlich Blutvergiftung). Aber im Gift der Bienen etc. überleben keine Bakterien.</li>
                      </ul>
                  </li>
              </ul>

Please note that I've used custom symbols in my list markers because the book demands them.

Also, the first thing I did is to make sure all the nested lists are correctly put.

The issue I'm describing is not only with the shared chapter screenshots but also with all the nested lists in the book.

[RbnJrg]

Try suppresing the <br/> tags and, to force a new line, use the property "display: block". For example:

You have something like (watch the text in red):

<li class="darw">ist <span class="chelsa-gem">eine Ärztin / ein Arzt</span> in den Folgetagen zu konsultieren.<br/><span class="fs-s" style="display: block">Im Moment keine Gefahr, aber es ist abzuklären ob eine Allergie vorliegt, zwecks Abgabe von Notfallmedikamenten wie Epipen bei einem späteren Stich. (Elternwissen).</span></li>

Remove the <br/> tag so that you have the following (watch the text in red):

<li class="darw">ist <span class="chelsa-gem">eine Ärztin / ein Arzt</span> in den Folgetagen zu konsultieren.<span class="fs-s" style="display: block">Im Moment keine Gefahr, aber es ist abzuklären ob eine Allergie vorliegt, zwecks Abgabe von Notfallmedikamenten wie Epipen bei einem späteren Stich. (Elternwissen).</span></li>

Of course, instead of styling inline, you can create a class like:

.block {
   display: block;
}

and to employ it as follow:

<li class="darw">ist <span class="chelsa-gem">eine Ärztin / ein Arzt</span> in den Folgetagen zu konsultieren.<span class="fs-s block">Im Moment keine Gefahr, aber es ist abzuklären ob eine Allergie vorliegt, zwecks Abgabe von Notfallmedikamenten wie Epipen bei einem späteren Stich. (Elternwissen).</span></li>

I think that the <br/> tags could be the cause of your issues.

Regards

[Hitch]

Originally Posted by rsuchwani

@KevinH and @JSWolf

My sincere apologies for not being prompt in responding, I was badly held up in personal matters.

Here is the code of those specific list items.

(snip the code for brevity)

Please note that I've used custom symbols in my list markers because the book demands them.

Also, the first thing I did is to make sure all the nested lists are correctly put.

The issue I'm describing is not only with the shared chapter screenshots but also with all the nested lists in the book.

Custom symbols, in my experience, is what kills lists. eBook HTML doesn't support anything but the regular old HTML symbols, so...if it were me, I'd try it with regular symbols and regular classes and see if it works. If it does, you instantly have your answer.

When we use custom symbols, at my shop, we have to hand-code the CSS for the list elements, because otherwise, as I said, they don't work. I'm 98% sure that's right; I haven't double-checked with my crews this morning about it, but last time I was involved in a discussion with them around this topic, that was the case.

Hitch

[JSWolf]

You did not post the relevant CSS. Please post a sample ePub that shows your problem. That would be easiest to look at.

[rsuchwani]

Originally Posted by Hitch

Custom symbols, in my experience, is what kills lists. eBook HTML doesn't support anything but the regular old HTML symbols, so...if it were me, I'd try it with regular symbols and regular classes and see if it works. If it does, you instantly have your answer.

When we use custom symbols, at my shop, we have to hand-code the CSS for the list elements, because otherwise, as I said, they don't work. I'm 98% sure that's right; I haven't double-checked with my crews this morning about it, but last time I was involved in a discussion with them around this topic, that was the case.

Hitch

I too am not in favor of having too much 'custom' list in the book, but the book in question is very unique in this aspect and the content requires all these custom list markers to guide the reader to the specific context.

For testing purposes, I've used the regular, old, and generic HTML list markers and symbols and they displayed fine. But as I mentioned above, the custom list marker serves a much more crucial role here.

[rsuchwani]

Originally Posted by JSWolf

You did not post the relevant CSS. Please post a sample ePub that shows your problem. That would be easiest to look at.

Although I've attached the sample ePub in response to @RbnJrg's comment, I think the moderator will take time to approve it. I'm attaching the ePub here again.

[rsuchwani]

Originally Posted by RbnJrg

Try suppresing the <br/> tags and, to force a new line, use the property "display: block". For example:

You have something like (watch the text in red):

<li class="darw">ist <span class="chelsa-gem">eine Ärztin / ein Arzt</span> in den Folgetagen zu konsultieren.<br/><span class="fs-s" style="display: block">Im Moment keine Gefahr, aber es ist abzuklären ob eine Allergie vorliegt, zwecks Abgabe von Notfallmedikamenten wie Epipen bei einem späteren Stich. (Elternwissen).</span></li>

Remove the <br/> tag so that you have the following (watch the text in red):

<li class="darw">ist <span class="chelsa-gem">eine Ärztin / ein Arzt</span> in den Folgetagen zu konsultieren.<span class="fs-s" style="display: block">Im Moment keine Gefahr, aber es ist abzuklären ob eine Allergie vorliegt, zwecks Abgabe von Notfallmedikamenten wie Epipen bei einem späteren Stich. (Elternwissen).</span></li>

Of course, instead of styling inline, you can create a class like:

.block {
   display: block;
}

and to employ it as follow:

<li class="darw">ist <span class="chelsa-gem">eine Ärztin / ein Arzt</span> in den Folgetagen zu konsultieren.<span class="fs-s block">Im Moment keine Gefahr, aber es ist abzuklären ob eine Allergie vorliegt, zwecks Abgabe von Notfallmedikamenten wie Epipen bei einem späteren Stich. (Elternwissen).</span></li>

I think that the <br/> tags could be the cause of your issues.

Regards

I've replaced <br/> with the 'block' element but the result is the same. I've attached the sample ePub below with the complete CSS, maybe you can find something which is causing this issue?

[Hitch]

Originally Posted by rsuchwani

I too am not in favor of having too much 'custom' list in the book, but the book in question is very unique in this aspect and the content requires all these custom list markers to guide the reader to the specific context.

For testing purposes, I've used the regular, old, and generic HTML list markers and symbols and they displayed fine. But as I mentioned above, the custom list marker serves a much more crucial role here.

Well, I understand, but please hear what I'm saying--my company has formatted over 6,000 eBooks and I've never found a SIMPLE way to make custom symbols align. It's the custom symbols that are messing you up.

We typically have to hand-code everything, to make them work. Is that what you're asking? How to hand-code them? So that they look remotely okay?

It maybe, might, work in ePUB3, the way you're doing it, but if you play to use this in ePUB2 or in Kindle, fugeddaboutdit. AFAIK, GooglePlay uses, what, ePUB2, gang?

Wolfie, Tex, any of you know what GP is using?

Hitch

[JSWolf]

I did notice one thing with the sample ePub. The font size does not change. Also,the CSS is a real frigging mess.I've not looked that closely, but it's a disaster.

I would expect Google Play Books app to handle ePub 3 as they accept that for sale. But I'm not sure as I've never used the app.

[MicroDrie]

Originally Posted by JSWolf

I did notice one thing with the sample ePub. The font size does not change. Also,the CSS is a real frigging mess.I've not looked that closely, but it's a disaster.

I would expect Google Play Books app to handle ePub 3 as they accept that for sale. But I'm not sure as I've never used the app.

When I look at the CSS file in the EPUB, I notice also a few other things.

First, the EPUB does not contain any fonts that a CSS rule can reference.

Second, a lot of different font types are mentioned, but there is no reference where they can be downloaded by the EPUB in the CSS file.

Third, the CSS before content definition contains a graphic character without referencing a specific font.

The question is which font is now active when the EPUB reader starts rendering a page? The answer to this is: Where the emperor is not there, he loses his rights. The EPUB reader then checks whether an alternative font has been mentioned that the EPUB reader is familiar with. The more exotic the font is, the greater the chance that an EPUB reader will not have that font on board. Then the EPUB reader should fall back error-free to a font that is present.

Then there's the next problem, what if the fallback font doesn't have the graphic character? He can then display a graphic block as an error character indicator, but how does the rendering proceed? It is very difficult to create a one-fit-all error handling routine. That graphical character does occupy one position on the screen, but in the code it can be several positions. There is a good chance that the result will look very different from the expected layout because rendering is out of sync with the CSS code.

I think different roles in an emergency each require graphical markup for that specific role. I've added and modified the awesome font to be able to use it in an EPUB. In page 1U3 I could replace all formatting code with a character of font-awesome. But font-awesome doesn't have a dot in a square used on it. Before we get to that, I'm very curious if page 1U3 still misrepresents the contents of "Unfälle: Giftstich" in the attached EPUB to see if we're on the right track to solve the issue.

[rsuchwani]

Originally Posted by Hitch

Well, I understand, but please hear what I'm saying--my company has formatted over 6,000 eBooks and I've never found a SIMPLE way to make custom symbols align. It's the custom symbols that are messing you up.

We typically have to hand-code everything, to make them work. Is that what you're asking? How to hand-code them? So that they look remotely okay?

It maybe, might, work in ePUB3, the way you're doing it, but if you play to use this in ePUB2 or in Kindle, fugeddaboutdit. AFAIK, GooglePlay uses, what, ePUB2, gang?

Wolfie, Tex, any of you know what GP is using?

Hitch

Hitch, I do hear you, as I mentioned in my previous response that I'm not in favor of using custom list markers but given the necessity of using them in this book, I can't avoid it.

But my question is not regarding the alignment or how to display them, my issue is specific to GP's display habit here. It's weird that all the list markers (from level 1 to whichever level's list on the next page) are displaying (without the list content). See the original issue screenshots.

Spoiler:

Notice the 'orphan hanging' arrow at the beginning of the page and the list item? It's like that with every 'nested list' in the book.

And yes, I did hand-code everything.

The sample I've shared is in ePub3 format, and the book is completely compliant with ePub3 standards. And yes, GP supports ePub3.

[rsuchwani]

Originally Posted by JSWolf

I did notice one thing with the sample ePub. The font size does not change. Also,the CSS is a real frigging mess.I've not looked that closely, but it's a disaster.

The font size does change when the text size is adjusted according to the preference of the readers. What you've seen at the start of the CSS is the 'absolute reference font size'.

And the CSS is the very practical one. Granted that there are many things that usually don't get used often, but given the complexity of the book, it is an absolute requirement.

Originally Posted by JSWolf

I would expect Google Play Books app to handle ePub 3 as they accept that for sale. But I'm not sure as I've never used the app.

GPB handles ePub3 just fine, have formatted many books in the past without any hiccups, just this issue perplexed me that I want to find some solution with the help of you guys.