Code Monkey home page Code Monkey logo

Comments (8)

Frenzie avatar Frenzie commented on June 8, 2024

Which render mode is that? See the bottom menu.

Screenshot_20240327_120954

from koreader.

future-figs avatar future-figs commented on June 8, 2024

I see the same behavior in flat, book, and web.

Legacy does center the lines, but the spacing seems larger than it should be:
image

I also checked with different styles (epub.css / html5.css / fb2.css) and didn't see any effect.

from koreader.

Frenzie avatar Frenzie commented on June 8, 2024

You'll probably need to provide the full context in HTML and CSS rather than just that one div.

from koreader.

future-figs avatar future-figs commented on June 8, 2024

I used the Calibre ebook editor to create a minimal working example:
divTest.zip
image

There is no CSS file needed in the epub to reproduce the issue.

from koreader.

Frenzie avatar Frenzie commented on June 8, 2024

Awesome, thanks. Btw, you can also just use that start.xhtml file without any EPUB surroundings.

My main hypothesis would be that there's a problem with the div being empty, but it's too late too investigate properly, plus @poire-z will know better regardless. You can see the rendering is better by putting   inside.

Also on a mostly unrelated note since it's a problem regardless, not setting those top and bottom borders on the <blockquote> itself strikes me as a bit awkward as an author.

from koreader.

poire-z avatar poire-z commented on June 8, 2024

Probably some issue/bug with margins collapsing. I'll investigate.

from koreader.

poire-z avatar poire-z commented on June 8, 2024

I think this is the expected rendering, right?:
image

A bit hard to get into my old code dealing with vertical margins collapsing.
I think this solves the issue, also with other various combinations of margins/border in nested empty or not empty block elements, comparing to Firefox:

--- a/crengine/src/lvrend.cpp
+++ b/crengine/src/lvrend.cpp
@@ -5896,7 +5896,3 @@ public:

-    int addContentLine( int height, int flags, int baseline=NO_BASELINE_UPDATE, bool is_padding=false ) {
-        // As we may push vertical margins, we return the total height moved
-        // (needed when adding bottom padding that may push inner vertical
-        // margins, which should be accounted in the element height).
-        int start_c_y = c_y;
+    void addContentLine( int height, int flags, int baseline=NO_BASELINE_UPDATE, bool is_padding=false ) {
         int line_dir_flag = direction == REND_DIRECTION_RTL ? RN_LINE_IS_RTL : 0;
@@ -5978,3 +5974,2 @@ public:
         }
-        return c_y - start_c_y;
     }
@@ -8562,5 +8557,20 @@ void renderBlockElementEnhanced( FlowState * flow, ldomNode * enode, int x, int
                 if (padding_bottom>0) {
-                    int padding_bottom_with_inner_pushed_vm = flow->addContentLine(padding_bottom, RN_SPLIT_BEFORE_AVOID, 0, true);
-                    h += padding_bottom_with_inner_pushed_vm;
-                    bottom_overflow -= padding_bottom_with_inner_pushed_vm;
+                    // We may push any inner vertical margin: gather how much we moved
+                    int c_y = flow->getCurrentAbsoluteY();
+                    flow->addContentLine(padding_bottom, RN_SPLIT_BEFORE_AVOID, 0, true);
+                    int padding_bottom_with_inner_pushed_vm = flow->getCurrentAbsoluteY() - c_y;
+                    if (h <= 0) {
+                        // Empty block: any pushed vertical margin can be put outside this block
+                        // Note: this different behaviour seems needed for this bottom padding/border
+                        // to be drawn at the expected position. Not really sure what happens, it
+                        // might be that pushVerticalMargin() shifts or not our node differently if
+                        // it happens to have no content and didn't call other flow methods...
+                        h += padding_bottom;
+                    }
+                    else {
+                        // We have some content/height: any pushed vertical margin
+                        // is inside and part of our block height
+                        h += padding_bottom_with_inner_pushed_vm;
+                        bottom_overflow -= padding_bottom_with_inner_pushed_vm;
+                    }
                 }

Not super sure though (haven't checked if things would get better or worse with floats), so my hesitating comments :/

from koreader.

Frenzie avatar Frenzie commented on June 8, 2024

That seems to look right, yes. Margin collapsing can be annoying for authoring CSS as well.

from koreader.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.