Vertical alignment of images broken with Parsoid on export
Closed, ResolvedPublic2 Estimated Story Points
Actions

Assigned To

Authored By

	Inductiveload
	Jan 22 2021, 12:46 PM

Description

Recently, images have had their vertical alignment CSS stripped and replaced with classes like .mw-valign-middle

This breaks some constructs at enWS, such as https://en.wikisource.org/wiki/Template:Custom_rule, which needs vertical-align:middle (and actually does export surprisingly well).

I have worked around it for now by adding the following to the https://en.wikisource.org/wiki/MediaWiki:Epub.css:

/*
 * Parsoid vertical alignment classes
 */
.mw-valign-middle {
  vertical-align: middle;
}
.mw-valign-baseline {
  vertical-align: baseline;
}
.mw-valign-sub {
  vertical-align: sub;
}
.mw-valign-super {
  vertical-align: super;
}
.mw-valign-top {
  vertical-align: top;
}
.mw-valign-text-top {
  vertical-align: text-top;
}
.mw-valign-bottom {
  vertical-align: bottom;
}
.mw-valign-text-bottom {
  vertical-align: text-bottom;
}

Is this CSS right?
Should Parsoid CSS be injected by the export tool rather than making the individual wikis add stuff to their Epub.css

Related Objects

Mentioned In: T330949: Simple CSS for ebooks on Wikisource (ePub, pdf)
Mentioned Here: T330949: Simple CSS for ebooks on Wikisource (ePub, pdf)

Event Timeline

Inductiveload created this task.Jan 22 2021, 12:46 PM

Restricted Application added a project: Community-Tech. · View Herald TranscriptJan 22 2021, 12:46 PM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Inductiveload renamed this task from Vertical alignment of images broken with Parsoid to Vertical alignment of images broken with Parsoid on export.Jan 22 2021, 12:54 PM

@Inductiveload Thank you for filing this ticket! Is there an example of a particular image in an ebook export that is impacted/displayed improperly because of this change? A specific example would be nice to add to this ticket, if possible. Thanks!

ifried moved this task from New & TBD Tickets to Needs Discussion on the Community-Tech board.Jan 26 2021, 5:23 PM

Anything with the {{custom rule}} template at enWS would be broken without the patch in Epub.css:

E.g. https://en.wikisource.org/wiki/Pride_and_Prejudice/Chapter_1

@Inductiveload Apologies, I don't see any images in the link you provided. Can you clarify exactly where I should be looking to reproduce the issue, from a user perspective? Thanks!

@ifried The diamond-shaped rule segment and the lines around it are the images:

2021-02-01_234304_636x269_screenshot.png (269×636 px, 18 KB)

Note, it'll work at enWS, because there's a patch in the MediaWiki:Epub.css.

@Inductiveload So, if I understand correctly, the link you provided actually would not have the issue because it is from enWS, correct? I was not able to reproduce the issue when I tested, so this may explain why. And, if so, do you perhaps have an example on a wiki that is not enWS, so we could test it and verify the behavior? Thanks!

itWS seems not to (currently) have the patch in their Epub.css

This is an example there: https://it.wikisource.org/w/index.php?title=Utente:Inductiveload/Sandbox&oldid=2743839

The code is

<div class="__custom_rule" style="border-collapse:collapse; border-spacing:0 0; text-align:center; margin: 1em auto 1em auto; background-color:transparent; "><!-- 
 -->[[File:Rule Segment - Span - 50px.svg|middle|link=|alt=]]<!-- 
 -->[[File:Rule Segment - Diamond - 6px.svg|middle|link=|alt=]]<!--
 -->[[File:Rule Segment - Span - 50px.svg|middle|link=|alt=]]<!-- 
 --></div>

and it comes out like this:

Here's the EPUB:

Utente Inductiveload_Sandbox.epub65 KBDownload

dmaza set the point value for this task to 2.Feb 17 2021, 12:34 AM

ifried moved this task from Needs Discussion to Older: Team Work on the Community-Tech board.May 3 2021, 10:53 PM

Samwilson mentioned this in T330949: Simple CSS for ebooks on Wikisource (ePub, pdf).Mar 1 2023, 11:43 PM

Should Parsoid CSS be injected by the export tool rather than making the individual wikis add stuff to their Epub.css

It sounds like importing the whole stylesheet from MediaWiki would be too much, and also might introduce bugs because of some selectors perhaps not being supported by ereaders. So instead, we've added the main alignment styles to WS Export's stylesheet.

I think this is resolved now. See T330949 for more details (perhaps we should've merged these tasks before now, sorry; they are basically the same I think).

https://en.wikisource.org/w/index.php?title=MediaWiki%3AEpub.css&diff=13099413&oldid=11696769

	F34093218: Utente Inductiveload_Sandbox.epub
	Feb 5 2021, 10:59 PM

	F34093220: 2021-02-05_225905_146x23_screenshot.png
	Feb 5 2021, 10:59 PM

	F34084414: 2021-02-01_234304_636x269_screenshot.png
	Feb 1 2021, 11:43 PM

Vertical alignment of images broken with Parsoid on exportClosed, ResolvedPublic2 Estimated Story PointsActions

Description

Related Objects

Event Timeline

Vertical alignment of images broken with Parsoid on export
Closed, ResolvedPublic2 Estimated Story Points
Actions