Bay 12 Games Forum

Please login or register.

Login with username, password and session length
Advanced search  

Author Topic: Diagrams show incorrectly with Chrome  (Read 5121 times)

CLA

  • Bay Watcher
    • View Profile
Diagrams show incorrectly with Chrome
« on: September 12, 2017, 12:47:13 pm »

Diagrams of a certain type (for example here and here) 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.
Logged
CLA - an ASCII-like Graphic Pack with simplified letter-like creature graphics. The simple and clean looks of ASCII with distinct creature graphics - best of both worlds!

http://www.bay12forums.com/smf/index.php?topic=105376.0

lethosor

  • Bay Watcher
    • View Profile
Re: Diagrams show incorrectly with Chrome
« Reply #1 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.



Logged
DFHack - Dwarf Manipulator (Lua) - DF Wiki talk

There was a typo in the siegers' campfire code. When the fires went out, so did the game.

CLA

  • Bay Watcher
    • View Profile
Re: Diagrams show incorrectly with Chrome
« Reply #2 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.
« Last Edit: September 13, 2017, 06:22:45 am by CLA »
Logged
CLA - an ASCII-like Graphic Pack with simplified letter-like creature graphics. The simple and clean looks of ASCII with distinct creature graphics - best of both worlds!

http://www.bay12forums.com/smf/index.php?topic=105376.0

Doorkeeper

  • Bay Watcher
    • View Profile
Re: Diagrams show incorrectly with Chrome
« Reply #3 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 appears for me on pc (with firefox) and on tablet (firefox and chrome).

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 appears on the tablet with firefox and chrome.

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 and this one. On the tablet with chrome, the text boxes appear misaligned for me.

DFwiki has a diagram extension. 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.
Logged

CLA

  • Bay Watcher
    • View Profile
Re: Diagrams show incorrectly with Chrome
« Reply #4 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.
Logged
CLA - an ASCII-like Graphic Pack with simplified letter-like creature graphics. The simple and clean looks of ASCII with distinct creature graphics - best of both worlds!

http://www.bay12forums.com/smf/index.php?topic=105376.0

Doorkeeper

  • Bay Watcher
    • View Profile
Re: Diagrams show incorrectly with Chrome
« Reply #5 on: September 19, 2017, 06:54:25 am »

Sounds good. I think converting to <diagram> is the best and easiest option here.
Logged

Starver

  • Bay Watcher
    • View Profile
Re: Diagrams show incorrectly with Chrome
« Reply #6 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?)
Logged

CLA

  • Bay Watcher
    • View Profile
Re: Diagrams show incorrectly with Chrome
« Reply #7 on: September 19, 2017, 09:25:15 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.
Logged
CLA - an ASCII-like Graphic Pack with simplified letter-like creature graphics. The simple and clean looks of ASCII with distinct creature graphics - best of both worlds!

http://www.bay12forums.com/smf/index.php?topic=105376.0