closed livingstoneonline/livingstoneonline#239

Issue with CSS in MS Viewer

awisnicki

I've discovered an issue with how CSS in the MS viewer is rendering certain text. I've been looking at this file: http://livingstoneonline.org/in-his-own-words/catalogue?query=liv_000019&view_pid=liv%3A000019&view_page=0

Please also see attached for a standalone HTML version of the transcription that is working with the same XSL and CSS as the file in the MS Viewer. liv_000019_TEI.html.zip

In particular please compare pages 380-395. In the standalone file, note that all text is properly aligned on the right:

screen shot 2017-11-06 at 22 45 44

In the viewer, the text on the right is getting bunched up:

screen shot 2017-11-06 at 22 45 24

Also, take a look at the bottom of page 736. In the standalone, the text (from a table) is presented line after line:

screen shot 2017-11-06 at 22 51 04

In the viewer, the text is getting extra space added between lines:

screen shot 2017-11-06 at 22 51 06

These same problems crop up when the file appears in the multitext viewer:

screen shot 2017-11-06 at 22 55 47

I did some amount of work on the CSS and XSL files today and updated prod with the new versions. That's not the cause of this issue, I don't believe. Stage is still using the older versions of these files and the problems are there to, so it appears they were there before I did any work.

awisnicki

It looks like the table spacing issue is also appear in other files:

screen shot 2017-11-06 at 23 10 51

awisnicki

I found another exmaple of this issue. Here some margin is being added above the horizontal lines. As you can see from the code, in this case it's being pulled in from one of your CSS files.

screen shot 2017-11-09 at 14 11 01

awisnicki

And here's another similar example. In this case, the h4 font is coming from your stylesheet:

screen shot 2017-11-09 at 14 13 11

nigelgbanks

I've handle all the issues except for the h4 I don't want to override your style sheets globally in that case, it makes more sense for your to explicitly set the font sizes, etc for those elements in your css files for each xslt.

Most of the issues stemmed from the user of a css reset sheet on the site (except for the h4 issue), of which there is non being used in your HTML page generated from the xslt. Theres really no way around it, there will be differences because they do different things, my recommendation is when you encounter a problem a difference just add a new rule to your xslt stylesheets to have it render the way you would like.

Using a css reset sheet like the one we use on livingstoneonline.org (https://github.com/necolas/normalize.css/blob/3.0.3/normalize.css) is recommend since its goal is to ensure the default styles on elements cause them to be rendered roughly equivalent regardless of what browser the user is using.

On a side note the "Unyanyembe Journal" will likely never look "correct" either embedded in the site or as a stand alone HTML file. Setting widths and margins on elements like that explicitly runs counter to how HTML and CSS is meant to work. Inline content like text is meant to flow relative to the amount of space and the users choice in fonts (families, size, and zoom level). And given that no width information is really built into the TEI the XSLTs will never know exactly how much space something needs to be placed to match the layout in the original document, so something will always be spaced too far out or too close as rules for each element applied can't know the required details.

awisnicki

OK, thanks for taking care of this. I'll investigate in more detail (and so get back to you if I have any questions about what you've written above) and follow your advice going forward. For now, please note that re: horizontal lines, you've fixed the issue for double-lines, but for single lines it is still there.

screen shot 2017-11-25 at 07 53 58

screen shot 2017-11-25 at 07 59 20

nigelgbanks

I didn't make any changes to the horizontal lines. The same as I've stated for h4 would apply to hr as well.

I don't want to override your style sheets globally in that case, it makes more sense for your to explicitly set the font sizes, etc for those elements in your css files for each xslt.

awisnicki

Ok, thanks for clarifying this. I'll take it from here.