-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How is the height (or width) set for the ruleSpan
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should .frac-line
have its min-height
set in a similar fashion?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
frac-line
already has that min-height
set. That was the purpose of PR #931.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for refreshing my memory. 😅
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
@ronkok thanks for making these changes. |
Change
frac-line
andvertical-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-height
CSS.