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