Right alignment of some lines looks bad on large screens

[aslagle]

It's caused by this line in the CSS: https://github.com/standardebooks/alfred-lord-tennyson_idylls-of-the-king_gustave-dore/blob/master/src/epub/css/local.css#L32

I think it's meant to align with the right edge of the other lines, but it doesn't work:

[acabal]

You're right, it's supposed to align to to the right edge of the stanza. On smaller screens this works because the stanzas are usually about as wide as the screen, but on larger screens that's not the case and it winds up looking weird like here.

I'm not sure how to approach this--any suggestions?

[acabal]

We might be able to solve this by adding [epub|type~="z3998:poem"] p.right{ display: inline-block; }

I'm not able to test this for a few more weeks, but if you're able to test, let me know how it looks!

[aslagle]

It looks to me like adding display: inline-block does the same thing as removing text-align: right - the line is on the left, indented.

I think that's better than how it looks now, but you might be able to get the right alignment by setting a max-width based on the length of the lines. 16em seems about right for the line I tried but I'm not sure if it would be consistent for the whole book.

[acabal]

I'd rather not set a max-width based on line length, that might be dependent on the font the reader is using. Using display: inline-block fixes the issue in Firefox, so standards-based CSS seems to correctly render it. Now the question is, do we want to enshrine a hack in our epub to fix this, or should we just set display: inline-block and wait for the reading software to catch up to standards?

Which reading system are you using to test this?

[aslagle]

I'm using a web-based reader I'm working on (https://github.com/NYPL-Simplified/webpub-viewer - Demo is here).

When you say display: inline-block fixes it in Firefox, you mean it aligns it to the left with an indent, instead of to the right? That's what it does in my reader, in Firefox and Chrome, and that's fine. Removing text-indent: right does the same thing for me. What would the hack be?

[acabal]

No, I mean that in desktop FF, adding display: inline-block to the .right class pushes the first line indent all the way to the right, but not farther than the widest line in that block. That's the effect from the original text that we're trying to recreate.

This is because with inline-block the element is only as wide as necessary to contain its children. display: block, the default, makes it fill the width of the containing page, which is why the first line appears aligned too far right on very wide screens. I assume this will render the same in other modern browsers (though I'm traveling at the moment and don't have time to test just now.)

You mentioned text-indent, did you mean text-align like you wrote earlier?

[aslagle]

Yeah, I meant text-align, sorry. And you're right, adding display: inline-block works, I must have tested it on the wrong element before. That seems like the right solution then.

Unfortunately it looks like it messes up the CSS columns that I use for pagination in my reader, so that a page can end in the middle of a line. But that seems like a reading system or browser CSS column bug, so I'll have to look into it more.

Thanks!

[acabal]

OK, I'll add that style in then. CSS columns in general are a rendering disaster, good luck with that :)

Depending on what the problem is and what your rendering engine is, you might consider adding break-inside: avoid; to column children to prevent Webkit from cutting them up stupidly. I had to deal with a problem like that recently.

[acabal]

Forgot to add, thanks for catching and reporting this! :)