From 6d2cada96efe3ba7439397d0a1506bf300f0f4cc Mon Sep 17 00:00:00 2001 From: poire-z Date: Thu, 30 Jan 2020 12:25:48 +0100 Subject: [PATCH] Wikipedia Save as EPUB: better gallery rendering Switch Wikipedia galleries from floats to inline-block. Also remove some crengine bugs workaround code as these bugs have been fixed for a long time. --- frontend/ui/wikipedia.lua | 118 +++++++++++++++++--------------------- 1 file changed, 53 insertions(+), 65 deletions(-) diff --git a/frontend/ui/wikipedia.lua b/frontend/ui/wikipedia.lua index 58e7c57f6..cfc0d6e45 100644 --- a/frontend/ui/wikipedia.lua +++ b/frontend/ui/wikipedia.lua @@ -965,6 +965,7 @@ h1.koreaderwikifrontpage, h5.koreaderwikifrontpage { p.koreaderwikifrontpage { font-style: italic; font-size: 90%; + text-indent: 0; margin: 1em 2em 1em 2em; } hr.koreaderwikifrontpage { @@ -1036,19 +1037,44 @@ body > div > div.thumb img { height: 100% !important; } -/* Style gallery and the galleryboxes it contains */ -.gallery { - width: 100%; - margin-top: 1em; +/* Some other (usually wide) thumbnails are wrapped in a DIV.center: + * avoid having them overflowing in web mode (no issue in other modes). + * (Use "width: auto", as crengine does not support "max-width:") */ +body > div > div.center > div.thumb * { + -cr-only-if: allow-style-w-h-absolute-units; + width: auto !important; } -/* galleryboxes about the same topic may be in multiple gallery containers, - * make the floating galleryboxes continuous */ -.gallery + .gallery { - clear: none; - margin-top: 0; + +/* Style gallery and the galleryboxes it contains. +/* LI.galleryboxes about the same topic may be in multiple UL.gallery + * containers, and Wikipedia may group them by 3 or 4 in each container. + * We'd rather want them in a single group, so they can be laid out + * taking the full width depending on render mode and screen dpi. + * So, make UL.gallery inline, and all its children inline-block. + * The consecutive inline UL.gallery will be wrapped by crengine + * in a single autoBoxing element, that we style a bit, hoping + * Wikipedia properly have all its 1st level elements "display:block" + * and we do not style other autoBoxed inlines at this level. */ +body > div > ul.gallery, +body > div > autoBoxing > ul.gallery { + display: inline; /* keep them inline once autoBoxed */ } -.gallery + * { +body > div > autoBoxing { /* created by previous style */ + width: 100%; + margin-top: 1em; + margin-bottom: 1em; clear: both; + /* Have non-full-width inline-blocks laid out centered */ + text-align: center; +} +body > div > ul.gallery > *, +body > div > autoBoxing > ul.gallery > * { + /* Make all ul.gallery children inline-block and taking 100% width + * so they feel like classically stacked display:block */ + display: inline-block; + width: 100%; + /* Have gallerycaption and galleryboxes content centered */ + text-align: center; } .gallerycaption { font-weight: bold; @@ -1059,31 +1085,29 @@ li.gallerybox { /* Style gallerybox just as main thumbs */ list-style-type: none; border: dotted 1px black; - margin: 0.5em 2.5em 0.5em 2.5em; - padding: 0.5em 0.5em 0.2em 0.5em; - padding-top: ]].. (include_images and "0.5em" or "0.15em") .. [[; - text-align: center; + margin: 0.5em 2.5em 0.5em 2.5em !important; + padding: 0.5em 0.5em 0.2em 0.5em !important; + padding-top: ]].. (include_images and "0.5em" or "0.15em") .. [[ !important; text-indent: 0; font-size: 90%; - page-break-inside: avoid; - /* Allow them to float (even if "display: inline-block" would be nicer) */ - float: left; + vertical-align: top; /* align them all to their top */ + /* No float here, but use these to distinguish flat/book/web modes */ + -cr-only-if: -float-floatboxes; + width: 100% !important; /* flat mode: force full width */ -cr-only-if: float-floatboxes; - /* Remove our wide horizontal margins if floating */ + /* Remove our wide horizontal margins in book/web modes */ margin: 0.5em 0.5em 0.5em 0.5em !important; -cr-only-if: float-floatboxes -allow-style-w-h-absolute-units; /* Set a fixed width when not in "web" mode */ - width: 25% !important; -} -li:dir(rtl).gallerybox { - float: right; + width: 25% !important; /* will allow rows of 3 */ + /* In web mode, allow the specified widths in HTML style attributes */ } li.gallerybox p { /* Reset indent as we have everything centered */ text-indent: 0; } li.gallerybox div.thumb { - /* Remove thumb styling, which we set on the gallerybox */ + /* Remove thumb styling, which we have set on the gallerybox */ border: solid 1px white; margin: 0; padding: 0; @@ -1098,10 +1122,10 @@ li.gallerybox * { width: 100% !important; } li.gallerybox div.thumb img { - /* Make float's inner images 100% of their container's width + /* Make inline-block's inner images 100% of their container's width * when not in "web" mode (same as previous, but with height */ -cr-only-if: float-floatboxes -allow-style-w-h-absolute-units; - width: 100% !important; + width: 100% !important; height: 100% !important; } @@ -1212,32 +1236,9 @@ table { -- external link for us, so let's remove this link. html = html:gsub("]*>%s*(<%s*img [^>]*>)%s*", "%1") - --- @todo do something for
  • so they are no more - -- a
  • (crengine displays them one above the other) and can be displayed - -- side by side - - -- For some
    , which include nested divs, although - -- perfectly balanced, crengine seems to miss some closing
    and we - -- end up having our image bordered box including the remaining main wiki text. - -- It looks like this code is supposed to deal with class= containing multiple - -- class names : - -- https://github.com/koreader/crengine/commit/0930ec7230e720c148fd6f231d69558832b4d53a - -- and that it may stumble on some cases. - -- It's all perfectly fine if we make all these div with a single class name - -- html = html:gsub([[
    ]], [[
    ]]) - -- - -- But we may as well make all class= have a single name to avoid other problems - -- (no real risk with that, as we don't define any style for wikipedia class names, - -- except div.thumb that always appears first). - html = html:gsub([[(<[^>]* class="[^ "]+)%s+[^"]*"]], [[%1"]]) - - -- crengine seems to consider unknown tag as 'block' elements, so we may - -- want to remove or replace those that should be considered 'inline' elements - html = html:gsub("]*>", "") - -- crengine does not support the family of tags for displaying formulas, - -- which results in lots of space taken by individual character in the formula, each - -- on a single line... + -- which results in lots of space taken by individual character in the formula, + -- each on a single line... -- Also, usally, these tags are followed by a tag pointing to a -- SVG version of the formula, that we took care earlier to change the url to -- point to a PNG version of the formula (which is still not perfect, as it does @@ -1264,27 +1265,14 @@ table { html = html:gsub([[href="/wiki/([^"]*)"]], cleanWikiPageTitle) -- Remove href from links to non existant wiki page so they are not clickable : - -- PageTitle____on + -- PageTitle____on -- (removal of the href="" will make them non clickable) html = html:gsub([[]* class="new"[^>]*>]], [[]]) -- Fix some other protocol-less links to wikipedia (href="//fr.wikipedia.org/w/index.php..) html = html:gsub([[href="//]], [[href="https://]]) - -- crengine does not return link if multiple class names in () - -- it would be no problem as we can't follow them, but when the user tap - -- on it, the tap is propagated to other widgets and page change happen... - -- html = html:gsub([[ (if it starts a line) or after (if it - -- ends a line or a block) by wrapping it with U+200B ZERO WIDTH SPACE which will - -- make the DOM tree walking code to find a link stop at it. - -- html = html:gsub("(<[aA])", "\xE2\x80\x8B%1") - -- html = html:gsub("()", "%1\xE2\x80\x8B") - -- Fixed in crengine lvtinydom. - if self.wiki_prettify then -- Prepend some symbols to section titles for a better visual feeling of hierarchy html = html:gsub("

    ", "

    "..h1_sym.." ")