Change frac-line from border to full span #976
Conversation
Change `frac-line` and `vertical-separator`. Instead of using span borders, fill entire span using a `box-shadow`. This change will enable more dependable engagement of the `min-height` CSS.
|
FYI: I'd be wary of using box-shadow for anything since in Windows high contrast mode, browsers remove all box shadows (and also background colors/images). I've totally been bitten by this when working on making accessible web UIs. |
|
Pity. I already knew that background colors were a bad idea when printing. I suppose I could use an SVG image. Well, this will take a little longer. |
|
Is this true even if the settings are marked |
|
|
|
@marcianx It's at least sometimes relevant, but maybe only in ms-specific rules... See #716 (comment) |
|
Interesting. I want to avoid But regarding box-shadow, as @edemaine points out, the KaTeX CSS already includes I just finished writing the code for a frac-line via inline SVG image. The code works fine, but I have not made a commit. First, I'll check if box-shadow works when high-contrast is set and also works when printing. |
|
High contrast results are in. The image on the left is the box-shadow method. On the right is the inline SVG image.
Thank you to @marcianx for the warning about high contrast. |
|
Well, now there’s a working PR and, thanks to @marcianx, we have overcome one hurdle. At this point, I am the wrong person to do any further detailed testing on this work. I have not been able to reproduce the problem on my own screen and I have never mastered Docker for the Screenshotter tests. Any help would be appreciated. |
|
Both the box-shadow and SVG methods in this PR fix the issue for my old Android webView clients, that would previously not render any fraction lines up to and including API 19 (KitKat). Previously I had to tweak the line thicknesses manually to make fraction lines appear, but they all show up without further intervention after I started using the fraclinespan branch. |
|
@trimbonz Cool! Thank you for the test and for the report. |
|
@ronkok I can regenerate the screenshots. |
regenerate screenshots after switching to SVG for fraction bars
| ["preserveAspectRatio", "xMinYMin slice"], | ||
| ]; | ||
| const svg = new domTree.svgNode([pathNode], attributes); | ||
| return buildCommon.makeSpan([className, "hide-tail"], [svg], options); |
There was a problem hiding this comment.
How is the height (or width) set for the ruleSpan?
There was a problem hiding this comment.
The hide-tail class contains the CSS overflow: hidden;. So the height that gets rendered is the line.style.height set by buildHTML.makeLineSpan().
Class frac-line has always contained the CSS width: 100%;, so the width is being set the way it always has been set.
There was a problem hiding this comment.
Clarification: My response above pertained to \frac, \overline, and \underline. I did not change \rule in this PR, so it is still using a top-border to render a line.
| @media screen and (-webkit-min-device-pixel-ratio: 2.0), | ||
| screen and (min-resolution: 192dpi) { | ||
| min-width: 0.5px; | ||
| } |
There was a problem hiding this comment.
Should .frac-line have its min-height set in a similar fashion?
There was a problem hiding this comment.
frac-line already has that min-height set. That was the purpose of PR #931.
There was a problem hiding this comment.
Thanks for refreshing my memory. 😅
|
@ronkok thanks for making these changes. |
Change
frac-lineandvertical-separator. Instead of using span borders to render the lines, fill an entire span using abox-shadowSVG.This change will enable more dependable engagement of the
min-heightCSS.