Responsive CSS on Apple Books

[Scott Voyles]

Hi folks,

did my best to find an existing thread on this topic, so I hope I'm not duplicating here. I'm wrapping up my latest product and usually do my proofreading on my Kobo Libra Color - so far all fine. I moved the built epub file over to Apple Books to do a little proofreading on the go and was a little disappointed in the mobile styling for drama. Here are a couple of screenshots:

This is from my recent (unpublished) production of Leopardi essays:

And this one from the release Short Plays of George Bernard Shaw:

I realize it may be challenging to see white against a white background, but I hope the point is clear. Seems we're missing a great opportunity to provide a better reading experience to users who might be on mobile devices (or it might be localized to Apple devices... I've not done extensive device testing).

I'm assuming this is a known issue? What devices are we targeting specifically (only e-ink?), and shouldn't readers on Apple Books be included?

[Vince Rice]

> On Jan 30, 2026, at 7:33 AM, Scott Voyles <zeit...@gmail.com> wrote:
>
> I realize it may be challenging to see white against a white background, but I hope the point is clear. Seems we're missing a great opportunity to provide a better reading experience to users who might be on mobile devices (or it might be localized to Apple devices... I've not done extensive device testing).

No, the point isn’t clear, and you don’t actually say what the point is. Nor did you indicate what device you’re on.

I read exclusively on Apple Books. This is what it looks like in portrait mode on my phone. I don’t see any problem.

[Alex Cabal]

I think an argument could be made that on very, very small screens it's
a little cramped to the right. This could especially be a problem for
long speaker names with no break opportunities.

I could envision a media query for small screens that moved speakers to
the top of a block, instead of to the side, and then making the actual
dialogue full width. I'm open to suggestions for implementations or PR
proposals.

[Scott Voyles]

The problem for me is exactly as Alex points out - the "persona" table data cell takes up to 50% of the available screen width, valuable reading real estate which could be put to better use. I'm open to looking into it, if someone would point me to the correct repo/files.

[Alex Cabal]

Actually this was pretty easy to mock up. The following media query
improves things on very small displays. For `together` classes we can't
really merge them horizontally since the structure itself is vertical so
we make an approximation and add a fake "stage direction" in the form of
a pseudo-element.

@media(max-width: 500px){
[epub|type~="z3998:drama"] td,
[epub|type~="z3998:drama"] td[epub|type~="z3998:persona"],
[epub|type~="z3998:drama"] td:last-child{
display: block;
padding: 0;
text-align: initial;
width: 100%;
}

[epub|type~="z3998:drama"] td[epub|type~="z3998:persona"]{
margin-top: 1.5em;
}

/* `together` rows get a pseudo-stage-direction. */
[epub|type~="z3998:drama"] tr.together
td[epub|type~="z3998:persona"]::after{
content: " (Together.)";
font-variant: normal;
font-style: italic;
}

[epub|type~="z3998:drama"] .together td:last-child{
border: none;
padding: 0;
}

/* Rows that are only stage direction get a top margin. */
[epub|type~="z3998:drama"] td:first-child:not([epub|type]) + td{
margin-top: 1.5em;
}
}

I'm playing around with
https://github.com/standardebooks/george-bernard-shaw_short-plays/blob/master/src/epub/text/the-fascinating-foundling.xhtml

Thoughts/opinions from anyone?

[Scott Voyles]

Just curious - how do you test? Directly in the browser? Do you have a local dev setup?

[Vince]

I added the media query to the local.css in a local copy and built it.

On the first page, the query only provides two more lines, and I would argue the persona gets lost (it’s too small relative to the rest of the text when it’s coexistent with it).

[Jon Erdman]

When I've seen print books that are typeset with the persona above the dialogue, the persona names have generally been centered. Maybe that would help with the problem of the persona getting lost. Maybe could also add a small margin on the bottom to provide some visual separation?

[Alex Cabal]

I don't think there's ever going to be a perfect solution since it all
depends on the length of the speaker and also the dialogue. I do think
there's a point where it becomes too tight. We could try lowering it to
400px.

On 1/30/26 3:03 PM, Vince wrote:
> I added the media query to the local.css in a local copy and built it.
>
> On the first page, the query only provides two more lines, and I would argue the persona gets lost (it’s too small relative to the rest of the text when it’s coexistent with it).
>
>
>
>

> But where there’s a lot of back and forth, there’s no advantage at all, and I think the current look is easier to see who’s saying what and what they’re saying. In short, I prefer the current display over the media query. Totally subjective, of course.
>
>
>
>

[Scott Voyles]

Interestingly, the Dramatists Guild suggest the "persona" should be centered (see p. 2): https://www.dramatistsguild.com/sites/default/files/2020-01/General-SFI-Formatting-Guidelines-Complete.pdf

[Alex Cabal]

That's fine, but that formatting guide is for MS Word documents
exchanged between industry professionals, not the same as publishing a
play for general readers.

> --
> You received this message because you are subscribed to the Google
> Groups "Standard Ebooks" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to standardebook...@googlegroups.com
> <mailto:standardebook...@googlegroups.com>.
> To view this discussion visit https://groups.google.com/d/msgid/
> standardebooks/87fb2f37-7bea-42d3-bd88-52638067c340n%40googlegroups.com
> <https://groups.google.com/d/msgid/standardebooks/87fb2f37-7bea-42d3-
> bd88-52638067c340n%40googlegroups.com?utm_medium=email&utm_source=footer>.

[Vince]

I have no idea what my phone’s (iPhone 11) width is.

I tried it with Jon’s suggestion of centering the persona; I also bolded it, which I figure won’t fly, but I just wanted to see. With those additions, I cut the margin top down to 1em; I don’t think personas needs the extra space when they're more visible.

It’s better, IMO, but this particular page points out another issue with this method (this happened on the initial media query as well, I just didn’t show a page where it did): the persona can get separated from the text from one page to the other. This occurs here both at the top and the bottom of the page. I still prefer our current display, but I do think this one (with the bold) is better than the initial query.

[Alex Cabal]

Could add break-after: none or something like that

[Vince]

I didn’t change it for this test, but I don’t think the stage directions need the extra .5em, either—a top margin of 1em is fine.

> <IMG_5656.png>

>
>> On Jan 30, 2026, at 3:09 PM, 'Alex Cabal' via Standard Ebooks <standar...@googlegroups.com> wrote:
>>

[Vince]

There’s just “break-after: avoid” and that doesn’t make any difference.

> On Jan 30, 2026, at 3:22 PM, Vince <vr_se...@letterboxes.org> wrote:
>

[Jon Erdman]

If an example from a physical book that is formatted with centered personas would be helpful, I happen to have such an example handy:

https://catalog.hathitrust.org/Record/001028754

[Emma Sweeney]

We adhere to the Chicago Manual of Style's guidelines for play formatting, which state that character names should be aligned flush left.

Emma

[Asher Smith]

How would this interact with the (currently shelved) proposal to reformat drama as <div> elements rather than tables?

[Alex Cabal]

Don't know, that proposal is abandoned.

On 1/31/26 5:19 AM, Asher Smith wrote:
> How would this interact with the (currently shelved) proposal to

> reformat drama as <div> elements rather than tables <https://github.com/
> standardebooks/tools/issues/780>?

>
> On Saturday, January 31, 2026 at 1:52:50 AM UTC Emma Sweeney wrote:
>
> We adhere to the Chicago Manual of Style's guidelines for play
> formatting, which state that character names should be aligned flush
> left.
>
> Emma
> On Friday, January 30, 2026 at 5:15:41 PM UTC-5 homes...@gmail.com
> wrote:
>
> If an example from a physical book that is formatted with
> centered personas would be helpful, I happen to have such an
> example handy:

> https://catalog.hathitrust.org/Record/001028754 <https://
> catalog.hathitrust.org/Record/001028754>

>
> On Friday, January 30, 2026 at 4:38:42 PM UTC-5 Vince wrote:
>
> There’s just “break-after: avoid” and that doesn’t make any
> difference.
>
> > On Jan 30, 2026, at 3:22 PM, Vince
> <vr_se...@letterboxes.org> wrote:
> >
> > I have no idea what my phone’s (iPhone 11) width is.
> >
> > I tried it with Jon’s suggestion of centering the
> persona; I also bolded it, which I figure won’t fly, but I
> just wanted to see. With those additions, I cut the margin
> top down to 1em; I don’t think personas needs the extra
> space when they're more visible.
> >
> > It’s better, IMO, but this particular page points out
> another issue with this method (this happened on the initial
> media query as well, I just didn’t show a page where it
> did): the persona can get separated from the text from one
> page to the other. This occurs here both at the top and the
> bottom of the page. I still prefer our current display, but
> I do think this one (with the bold) is better than the
> initial query.
>

> --
> You received this message because you are subscribed to the Google
> Groups "Standard Ebooks" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to standardebook...@googlegroups.com
> <mailto:standardebook...@googlegroups.com>.
> To view this discussion visit https://groups.google.com/d/msgid/

> standardebooks/7ef3db9f-35b4-4bc7-9666-2193c5fd1da9n%40googlegroups.com
> <https://groups.google.com/d/msgid/
> standardebooks/7ef3db9f-35b4-4bc7-9666-2193c5fd1da9n%40googlegroups.com?
> utm_medium=email&utm_source=footer>.

[Alex Cabal]

OK, after some more thought I'm reducing the media query to 400px and
I'm happy with the result. I've updated the corpus to include this new
CSS, and the next version of the manual as well.

On 1/30/26 7:52 PM, Emma Sweeney wrote:
> We adhere to the Chicago Manual of Style's guidelines for play
> formatting, which state that character names should be aligned flush left.
>
> Emma
> On Friday, January 30, 2026 at 5:15:41 PM UTC-5 homes...@gmail.com wrote:
>
> If an example from a physical book that is formatted with centered
> personas would be helpful, I happen to have such an example handy:

> https://catalog.hathitrust.org/Record/001028754 <https://
> catalog.hathitrust.org/Record/001028754>

>
> On Friday, January 30, 2026 at 4:38:42 PM UTC-5 Vince wrote:
>
> There’s just “break-after: avoid” and that doesn’t make any
> difference.
>
> > On Jan 30, 2026, at 3:22 PM, Vince <vr_se...@letterboxes.org>
> wrote:
> >
> > I have no idea what my phone’s (iPhone 11) width is.
> >
> > I tried it with Jon’s suggestion of centering the persona; I
> also bolded it, which I figure won’t fly, but I just wanted to
> see. With those additions, I cut the margin top down to 1em; I
> don’t think personas needs the extra space when they're more
> visible.
> >
> > It’s better, IMO, but this particular page points out another
> issue with this method (this happened on the initial media query
> as well, I just didn’t show a page where it did): the persona
> can get separated from the text from one page to the other. This
> occurs here both at the top and the bottom of the page. I still
> prefer our current display, but I do think this one (with the
> bold) is better than the initial query.
>

> --
> You received this message because you are subscribed to the Google
> Groups "Standard Ebooks" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to standardebook...@googlegroups.com
> <mailto:standardebook...@googlegroups.com>.
> To view this discussion visit https://groups.google.com/d/msgid/

> standardebooks/8854d4ca-3a92-4428-8ccf-ef800febdda7n%40googlegroups.com
> <https://groups.google.com/d/msgid/
> standardebooks/8854d4ca-3a92-4428-8ccf-ef800febdda7n%40googlegroups.com?
> utm_medium=email&utm_source=footer>.

[Asher Smith]

Alex, you include the following in the responsive CSS:

/* `together` rows get a pseudo-stage-direction. */
[epub|type~="z3998:drama"] tr.together td[epub|type~="z3998:persona"]::after{
content: " (Together.)";

font-style: italic;
font-variant: normal;
}

While I think that will work most of the time, there are definitely edge cases in the corpus. In particular, many GBS plays include a similar thing already, such as this group of lines from The Apple Cart:

<tr>

<td/>

<td>

<i epub:type="z3998:stage-direction">Together.</i>

</td>

</tr>

<tr class="together">

<td epub:type="z3998:persona">Nicobar</td>

<td>Yes yes: the crisis!</td>

</tr>

<tr class="together">

<td epub:type="z3998:persona">Crassus</td>

<td>Yes yes: come along!</td>

</tr>

<tr class="together">

<td epub:type="z3998:persona">Pliny</td>

<td>The crisis: out with it!</td>

</tr>

I can't imagine that there's a good way to check if a stage direction already exists in the CSS, though.

[Alex Cabal]

In that case, I would argue that the "(Together)" stage direction is
already redundant since they're listed as speaking together with the
black bar. So it goes from redundant on a large screen, to still
redundant on a small screen. That stage direction could probably be
removed. This only occurs 7 times in a total of 6 plays in the corpus.

On 2/5/26 7:23 AM, Asher Smith wrote:
> Alex, you include the following in the responsive CSS:
> /* `together` rows get a pseudo-stage-direction. */
> [epub|type~="z3998:drama"] tr.together td[epub|
> type~="z3998:persona"]::after{
> content: " (Together.)";
> font-style: italic;
> font-variant: normal;
> }
>
> While I think that will work most of the time, there are definitely edge
> cases in the corpus. In particular, many GBS plays include a similar

> thing already, such as this group of lines from /The Apple Cart/:
>
> <tr>
> <td/>
> <td>
> <iepub:type="z3998:stage-direction">Together.</i>
> </td>
> </tr>
> <trclass="together">
> <tdepub:type="z3998:persona">Nicobar</td>

> <td>Yes yes: the crisis!</td>
> </tr>
> <trclass="together">

> <tdepub:type="z3998:persona">Crassus</td>

> <td>Yes yes: come along!</td>
> </tr>
> <trclass="together">

> <tdepub:type="z3998:persona">Pliny</td>

> <td>The crisis: out with it!</td>
> </tr>
>
> I can't imagine that there's a good way to check if a stage direction
> already exists in the CSS, though.
>

> --
> You received this message because you are subscribed to the Google
> Groups "Standard Ebooks" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to standardebook...@googlegroups.com
> <mailto:standardebook...@googlegroups.com>.
> To view this discussion visit https://groups.google.com/d/msgid/

> standardebooks/dea8025a-97b4-406a-a40d-9e603bed1b32n%40googlegroups.com
> <https://groups.google.com/d/msgid/standardebooks/dea8025a-97b4-406a-
> a40d-9e603bed1b32n%40googlegroups.com?utm_medium=email&utm_source=footer>.

[Alex Cabal]

Correction, it only occurs 4 times in the corpus!

[Asher Smith]

That's perhaps a poor example - there are plenty of non-redundant ones where the stage direction is genuinely adding something.

You received this message because you are subscribed to a topic in the Google Groups "Standard Ebooks" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/standardebooks/L44KFCOKlsc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to standardebook...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/standardebooks/d3770858-4be0-4384-915b-46dc1d73c761%40standardebooks.org.

[Alex Cabal]

I only found 4 examples:

george-bernard-shaw_fannys-first-play/src/epub/text/act-3.xhtml
Line 923: <i epub:type="z3998:stage-direction">Together.</i>

george-bernard-shaw_saint-joan/src/epub/text/scene-6.xhtml
Line 418: <i epub:type="z3998:stage-direction">Together.</i>

george-bernard-shaw_the-apple-cart/src/epub/text/act-1.xhtml
Line 1076: <i epub:type="z3998:stage-direction">Together.</i>

karel-capek_r-u-r_paul-selver_nigel-playfair/src/epub/text/act-1.xhtml
Line 1054: <i epub:type="z3998:stage-direction">Together.</i>

Are there any more?

On 2/5/26 1:14 PM, Asher Smith wrote:
> That's perhaps a poor example - there are plenty of non-redundant ones
> where the stage direction is genuinely adding something.
>
> On Thu, 5 Feb 2026, 19:13 'Alex Cabal' via Standard Ebooks,
> <standar...@googlegroups.com

> <mailto:standardebooks%2Bunsu...@googlegroups.com>
> > <mailto:standardebook...@googlegroups.com
> <mailto:standardebooks%2Bunsu...@googlegroups.com>>.

> > To view this discussion visit https://groups.google.com/d/msgid/

> <https://groups.google.com/d/msgid/>
> > standardebooks/dea8025a-97b4-406a-
> a40d-9e603bed1b32n%40googlegroups.com <http://40googlegroups.com>
> > <https://groups.google.com/d/msgid/standardebooks/
> dea8025a-97b4-406a- <https://groups.google.com/d/msgid/
> standardebooks/dea8025a-97b4-406a->
> > a40d-9e603bed1b32n%40googlegroups.com?
> utm_medium=email&utm_source=footer <http://40googlegroups.com?

> utm_medium=email&utm_source=footer>>.
>
> --
> You received this message because you are subscribed to a topic in
> the Google Groups "Standard Ebooks" group.
> To unsubscribe from this topic, visit https://groups.google.com/d/

> topic/standardebooks/L44KFCOKlsc/unsubscribe <https://
> groups.google.com/d/topic/standardebooks/L44KFCOKlsc/unsubscribe>.

> To unsubscribe from this group and all its topics, send an email to
> standardebook...@googlegroups.com

> <mailto:standardebooks%2Bunsu...@googlegroups.com>.

> To view this discussion visit https://groups.google.com/d/msgid/
> standardebooks/

> d3770858-4be0-4384-915b-46dc1d73c761%40standardebooks.org <https://
> groups.google.com/d/msgid/standardebooks/
> d3770858-4be0-4384-915b-46dc1d73c761%40standardebooks.org>.
>
> --

> You received this message because you are subscribed to the Google
> Groups "Standard Ebooks" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to standardebook...@googlegroups.com
> <mailto:standardebook...@googlegroups.com>.
> To view this discussion visit https://groups.google.com/d/msgid/
> standardebooks/

> CACu8gWUx7Jy%3DYrvTWEGFjOLC4Mo%3D7b0xRhCYMs9_nFg5nQkqug%40mail.gmail.com
> <https://groups.google.com/d/msgid/standardebooks/
> CACu8gWUx7Jy%3DYrvTWEGFjOLC4Mo%3D7b0xRhCYMs9_nFg5nQkqug%40mail.gmail.com?utm_medium=email&utm_source=footer>.

[Asher Smith]

Just doing a very quick search through the ones that I have produced:

Fanny’s First Play

<tr class="together">

<td/>

<td>

<i epub:type="z3998:stage-direction">Yelling.</i>

</td>

</tr>

You Can Never Tell

<tr class="together">

<td/>

<td>

<i epub:type="z3998:stage-direction">All four speaking simultaneously.</i>

</td>

</tr>

and

<tr class="together">

<td/>

<td>

<i epub:type="z3998:stage-direction">All together.</i>

</td>

</tr>

Man and Superman

<tr class="together">

<td rowspan="5" epub:type="z3998:persona">The Others</td>

<td>

<i epub:type="z3998:stage-direction">Shouting.</i>

</td>

</tr>

Getting Married

<tr class="together">

<td/>

<td>

<i epub:type="z3998:stage-direction">All three clamoring together.</i>

</td>

</tr>

I’m sure there are some more in those plays, and I’ve not looked through the corpus as a whole.

[Alex Cabal]

Sure, those I think are fine with the new CSS as-is. They are more
detailed stage direction; the new CSS adds "(Together)" after a persona
on small screens; and it makes sense to do that there because when
personas are at the block level, we don't know which personas the stage
direction applies to. I don't think anything has to be changed in these
cases.

However in the 4 items I listed, I think the stage direction *is*
redundant (and not just in the new CSS) because in both cases it's just
"(Together)" followed by "(Together)".

On 2/5/26 2:42 PM, Asher Smith wrote:
> Just doing a very quick search through the ones that I have produced:
>

> /Fanny’s First Play/

> <tr class="together">
> <td/>
> <td>
> <i epub:type="z3998:stage-direction">Yelling.</i>
> </td>
> </tr>
>

> /You Can Never Tell/

> <tr class="together">
> <td/>
> <td>
> <i epub:type="z3998:stage-direction">All four speaking simultaneously.</i>
> </td>
> </tr>
> and
> <tr class="together">
> <td/>
> <td>
> <i epub:type="z3998:stage-direction">All together.</i>
> </td>
> </tr>

> /Man and Superman/

> <tr class="together">
> <td rowspan="5" epub:type="z3998:persona">The Others</td>
> <td>
> <i epub:type="z3998:stage-direction">Shouting.</i>
> </td>
> </tr>

> /Getting Married/

> <tr class="together">
> <td/>
> <td>
> <i epub:type="z3998:stage-direction">All three clamoring together.</i>
> </td>
> </tr>
>
> I’m sure there are some more in those plays, and I’ve not looked through
> the corpus as a whole.
>

> --
> You received this message because you are subscribed to the Google
> Groups "Standard Ebooks" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to standardebook...@googlegroups.com
> <mailto:standardebook...@googlegroups.com>.
> To view this discussion visit https://groups.google.com/d/msgid/

> standardebooks/84FFDD46-1432-4E24-BFBD-CFA66593A53B%40gmail.com
> <https://groups.google.com/d/msgid/standardebooks/84FFDD46-1432-4E24-
> BFBD-CFA66593A53B%40gmail.com?utm_medium=email&utm_source=footer>.

[Asher Smith]

I don’t disagree, but in the two examples that I produced it didn’t seem consistent to remove just that one while leaving others, especially because most of the together dialogues didn’t have that at all and so the inclusion felt intentional, dramaturgical somehow.

[B Keith]

Not sure how relevant this is since not a lot of people are stubborn like me but Kobo does not like @media (max-width: xxxpx)  in a standard epub. it will ignore all the css if it encounter a max-width. I reported it to Kobo but they just told me to use kepubs :-)

_________

Gaudeamus igitur iuvenes dum sumus

-- 
You received this message because you are subscribed to the Google Groups "Standard Ebooks" group.

To unsubscribe from this group and stop receiving emails from it, send an email to standardebook...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/standardebooks/62b0eb75-c333-46ce-9a12-5eab4824be46%40standardebooks.org.

[Alex Cabal]

Plain epubs on Kobo trigger the ADE renderer which is very bad. Not much
works on ADE.

On 2/9/26 11:46 AM, B Keith wrote:
> Not sure how relevant this is since not a lot of people are stubborn
> like me but Kobo does not like @media (max-width: xxxpx)  in a standard

> epub. it will ignore *all* the css if it encounter a max-width. I

>> foundling.xhtml <https://github.com/standardebooks/george-bernard-
>> shaw_short-plays/blob/master/src/epub/text/the-fascinating-
>> foundling.xhtml>

>> c333-46ce-9a12-5eab4824be46%40standardebooks.org <https://
>> groups.google.com/d/msgid/standardebooks/62b0eb75-
>> c333-46ce-9a12-5eab4824be46%40standardebooks.org>.

>
> --
> You received this message because you are subscribed to the Google
> Groups "Standard Ebooks" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to standardebook...@googlegroups.com

> <mailto:standardebook...@googlegroups.com>.

> To view this discussion visit https://groups.google.com/d/msgid/

> standardebooks/669AA1B4-D35A-4A4A-8AC2-F3C0DC1BCABD%40gmail.com
> <https://groups.google.com/d/msgid/standardebooks/669AA1B4-
> D35A-4A4A-8AC2-F3C0DC1BCABD%40gmail.com?utm_medium=email&utm_source=footer>.