Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Text indent wrong/unset after floating span #424

Open
johnbeard opened this issue Feb 26, 2021 · 3 comments
Open

Text indent wrong/unset after floating span #424

johnbeard opened this issue Feb 26, 2021 · 3 comments

Comments

@johnbeard
Copy link

In the following example, the two "lorem" spans should both have a hanging indent:

  <p style="border:1px solid red; text-indent:-2em; padding-left:4em; ">
	<span style="float:left; margin-left:-2em;">1</span>
        <span style="display:block;">Lorem ipsum...</span>
	<span class="line" style="display:block;">Lorem ipsum...</span>
</p>

E.g. Sigil:
2021-02-26_172137_371x340_screenshot

However, only the second one is working in Koreader/Crengine:
2021-02-26_172211_1071x646_screenshot

Presumably something is "unsetting" the indent because of the float?

Here's the epub:
untitled.epub.zip
@poire-z
Copy link
Contributor

poire-z commented Feb 26, 2021

Not sure why.
Adding a blue border on the float shows:
image

So, it's an empty float with its content fully outside of it - because:

  1. margin-left -2em
  2. the inherited text-indent:-2em .. which makes that -4em

Might want to try discriminating which of these causes the issue :)

It's possible we don't really ignore the empty space (like an anchor) of such a float, and position things as if it were a 0.001px filled float, but well... (That feels like a hard constraint of my floats implementation that I'm probably not to keen on adding complexity to handle this edge case.)
Also, negative text-indent is a bit hacky.
So, combine all these edges cases, and we surely have issues :/

@johnbeard
Copy link
Author

johnbeard commented Feb 26, 2021 •
edited
Loading

Hmm, changing to text-indent: 0; on the <span>1

  <p style="border:1px solid red; text-indent:-2em; padding-left:4em; ">
	<span style="border: 1px solid blue; float:left; margin-left:-4em; text-indent:0;">1</span>
        <span style="display:block;">Lorem ipsum...

gives this:
2021-02-26_183216_1071x237_screenshot

So it looks like something's being "shoved" in either case.

@poire-z
Copy link
Contributor

poire-z commented Feb 26, 2021

If you want to see the float "anchor", the internal element that gets positionned in the paragraph (the float content itself is positionned relative to it), you can add in your HTML <head>:

<head>
  <style>floatBox { border: 1px solid green; }</style>

image

So, the floatBox seems positionned where a float should be (at the padding edge), but then, it seems like it serves as a hard limit for the text left edge. Which, by principle, seems good as a way to avoid content overriding other content (which is a quite generic handling in crengine), as we're not dealing explicitely with empty floats and the fact text overriding some empty box would not be a problem).
It's not clear in the code how these interacts (looks like text-indent set the current like x - and then, after adding a float, we get an updated x accounting for this float (which is possibly the "shover").

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@johnbeard @poire-z