Bay 12 Games Forum

Dwarf Fortress => DF Gameplay Questions => DF Wiki Discussion => Topic started by: CLA on September 12, 2017, 12:47:13 pm

Title: Diagrams show incorrectly with Chrome
Post by: CLA on September 12, 2017, 12:47:13 pm
Diagrams of a certain type (for example here (http://dwarffortresswiki.org/index.php/DF2014:Tile) and here (http://dwarffortresswiki.org/index.php/DF2014:Pressure)) show incorrectly in Chrome. The tiles appear overlapped. Especially on the page about water pressure this becomes confusing.

Chrome version: Chrome/60.0.3112.91 (Vivaldi 1.11)
Opera 12.15 (old one with Presto engine) shows it correctly, I have no other browsers installed.

I'm not sure if it's the best choice to post here (and not on the chrome bugtracker), but some confirmation would be nice, and maybe we can fix it on our side in the meantime.
Title: Re: Diagrams show incorrectly with Chrome
Post by: lethosor on September 12, 2017, 06:07:21 pm
Are you talking about ones like these? There are multiple types of diagrams on wiki, including on the pressure page.

(https://i.imgur.com/uWDv031.png)

Title: Re: Diagrams show incorrectly with Chrome
Post by: CLA on September 13, 2017, 04:55:57 am
Yes, these diagrams. Sorry for not being more specific in the first place.
Edit:
Spoiler: screenshot (click to show/hide)
Note that the diagrams that aren't preceded with a space ("code paragraph" or whatever it's called) work correctly. The overlap also seems to be vertical only: the horizontal spacing looks correct.
Title: Re: Diagrams show incorrectly with Chrome
Post by: Doorkeeper on September 18, 2017, 06:10:35 pm
The diagrams (with preformatted text) appear fine for me on a computer with firefox, but they appear incorrectly in both firefox and chrome on a tablet. My problem is mostly with horizontal spacing. This is how DF2014:Pressure § Plumbing Schemes (http://dwarffortresswiki.org/index.php/DF2014:Pressure#Plumbing_Schemes) appears for me on pc (with firefox) (http://s26.postimg.org/m559kjf7d/1_pc.png) and on tablet (firefox (http://s26.postimg.org/fdeuhoq7t/1_ffox.png) and chrome (http://s26.postimg.org/wcnswy1fd/1_chrom.png)).

Text spacing seem to vary between browsers (and devices). The general problem seems to be that block elements on certain fonts, in certain browsers do not have fixed-width, even when they use a monospace font. Perhaps the symbols are not supported. This is how DF2014:Map legend (http://dwarffortresswiki.org/index.php/DF2014:Map legend) appears on the tablet with firefox (http://s26.postimg.org/bxmq84szd/2_ffox.png) and chrome (http://s26.postimg.org/8faqbqs3d/2_chrom.png).

On yours CLA, it looks like the block elements are two-lines high and overlapping the texts above it. Using the "line-height:" property can force each text line to a fixed height, but that wouldn't help with symbols overlapping. I tried using different monospace fonts....no avail. Wikipedia seems to haven't solved it either; see this example (http://en.wikipedia.org/wiki/Block_Elements#Example) and this one (https://en.wikipedia.org/wiki/Template:Box-drawing_sample). On the tablet with chrome, the text boxes appear misaligned for me.

DFwiki has a diagram extension (http://dwarffortresswiki.org/index.php/Dwarf_Fortress_Wiki:Diagram). We could replace all of the diagrams with <diagram>. How the diagrams will look:
Spoiler (click to show/hide)

With inverted colors:
Spoiler (click to show/hide)

It will solve the text spacing issue completely on all platforms (hopefully), though on firefox (tablet), the graphics are broken for some reason.
Title: Re: Diagrams show incorrectly with Chrome
Post by: CLA on September 19, 2017, 05:37:55 am
So, If I'm understanding that correctly, the old diagrams and your proposed solution are broken on tablet firefox anyway, but your solution at least works on all other browsers (and most importantly on both firefox and chrome, which should cover the vast majority of users), right? I can also confirm that with <diagram>, it works with both Vivaldi and old Opera (12.15).

Regardless of the display issues, I think the <diagram> environment just looks better than the "broken" one we're talking about. So yes, I'm all for replacing them if we come across any.
Title: Re: Diagrams show incorrectly with Chrome
Post by: Doorkeeper on September 19, 2017, 06:54:25 am
Sounds good. I think converting to <diagram> is the best and easiest option here.
Title: Re: Diagrams show incorrectly with Chrome
Post by: Starver on September 19, 2017, 07:43:28 am
(Noting that my own Android Chrome is displaying seemingly as intended, and was when previously checked, definitely not with the imaged overlapping. The rest of the suggestions sound sound, too, so long as you don't then 'fix' something that's not actually broken. Could there be a propblem with OP's browser add-ins, not applying to most others?)
Title: Re: Diagrams show incorrectly with Chrome
Post by: CLA on September 19, 2017, 09:25:15 am
Quote from: Starver on September 19, 2017, 07:43:28 am
Could there be a propblem with OP's browser add-ins, not applying to most others?
Tried fresh install with no extensions or user scripts to verify -- it's not a problem with addons or anything like that.