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

\frac-lines is not displayed in the WebKitGTK+ #1775

Open
Jenyay opened this Issue Nov 4, 2018 · 21 comments

Comments

Projects
None yet
4 participants
@Jenyay
Copy link

Jenyay commented Nov 4, 2018

Hello.

I use katex to embed equations using the WebKit engine (WebKitGTK+) under Linux.

In KaTeX 0.10.0, the \frac-lines are no longer displayed. Everything worked fine in KaTeX 0.9.0. The problem begins from 0.10.0 alpha version. Perhaps the problem in pull request #1249.

@ronkok

This comment has been minimized.

Copy link
Collaborator

ronkok commented Nov 4, 2018

@Jenyay Has the katex.css or katex.min.css file been updated to KaTeX 0.10.0?

@Jenyay

This comment has been minimized.

Copy link
Author

Jenyay commented Nov 4, 2018

@ronkok yes, i replaced KaTeX entirely.

@ronkok

This comment has been minimized.

Copy link
Collaborator

ronkok commented Nov 6, 2018

@Jenyay I don't have Linux or WebKitGTK+, so diagnosis will be slow. The first thing is to establish whether or not your KaTeX installation is generating the correct HTML. If it is, the next step will be to look at CSS problems.

Please check the HTML output of a KaTeX \frac. Nested very deep in that output, there should be the line:

<span class="frac-line" style="border-bottom-width: 0.04em;"></span>

Is that line there?

@Jenyay

This comment has been minimized.

Copy link
Author

Jenyay commented Nov 6, 2018

Yes, this line exists.

@ronkok

This comment has been minimized.

Copy link
Collaborator

ronkok commented Nov 6, 2018

Good. The HTML is correct, so we'll look for a CSS problem. KaTeX 0.10.0 has two CSS rules that apply:

.katex .mfrac .frac-line {
    display: inline-block;
    width: 100%;
    border-bottom-style: solid;
}

.katex .mfrac .frac-line {
    min-height: 1px;
}

Those rules ought to be enough to make a frac-line visible. Perhaps some other CSS rule has done an over-ride. If possible, please do an "Inspect Element" on that frac-line and find out what CSS rules are actually governing, and where they come from.

@Jenyay

This comment has been minimized.

Copy link
Author

Jenyay commented Nov 6, 2018

Most likely, I will not be able to do this, because WebKitGTK+ does not have a tool like Dev Tools. I can add some JavaScript code to the page to check something out.

@kevinbarabash

This comment has been minimized.

Copy link
Member

kevinbarabash commented Nov 11, 2018

@Jenyay it looks like there's a way to remotely debug WebKitGTK+. See, https://blogs.igalia.com/carlosgc/2017/05/03/webkitgtk-remote-debugging-in-2-18/.

@Jenyay

This comment has been minimized.

Copy link
Author

Jenyay commented Nov 11, 2018

@kevinbarabash Thank you, it is very interesting. Unfortunately, I use the old version of WebKit, but I'll try to think of something.

@Jenyay

This comment has been minimized.

Copy link
Author

Jenyay commented Dec 16, 2018

I used JavaScript code (https://stackoverflow.com/questions/9430659/how-to-get-all-the-applied-styles-of-an-element-by-just-giving-its-id) to extract styles for a frac-line.

Result is:

background-attachment:scroll
background-clip:border-box
background-color:rgba(0, 0, 0, 0)
background-image:none
background-origin:padding-box
background-position:0% 0%
background-repeat:repeat
background-size:auto
border-bottom-color:rgb(0, 0, 0)
border-bottom-left-radius:0px
border-bottom-right-radius:0px
border-bottom-style:solid
border-bottom-width:0px
border-collapse:separate
border-image-outset:0px
border-image-repeat:stretch
border-image-slice:100%
border-image-source:none
border-image-width:1
border-left-color:rgb(0, 0, 0)
border-left-style:none
border-left-width:0px
border-right-color:rgb(0, 0, 0)
border-right-style:none
border-right-width:0px
border-top-color:rgb(0, 0, 0)
border-top-left-radius:0px
border-top-right-radius:0px
border-top-style:none
border-top-width:0px
bottom:auto
box-shadow:none
box-sizing:content-box
caption-side:top
clear:none
clip:auto
color:rgb(0, 0, 0)
cursor:auto
direction:ltr
display:inline-block
empty-cells:show
float:none
font-family:KaTeX_Main, 'Times New Roman', serif
font-size:24px
font-style:normal
font-variant:normal
font-weight:normal
height:1px
image-rendering:auto
left:auto
letter-spacing:normal
line-height:29px
list-style-image:none
list-style-position:outside
list-style-type:disc
margin-bottom:0px
margin-left:0px
margin-right:0px
margin-top:0px
max-height:none
max-width:none
min-height:1px
min-width:0px
opacity:1
orphans:auto
outline-color:rgb(0, 0, 0)
outline-offset:0px
outline-style:none
outline-width:0px
overflow-wrap:normal
overflow-x:visible
overflow-y:visible
padding-bottom:0px
padding-left:0px
padding-right:0px
padding-top:0px
page-break-after:auto
page-break-before:auto
page-break-inside:auto
pointer-events:auto
position:static
resize:none
right:auto
speak:normal
table-layout:auto
tab-size:8
text-align:center
text-decoration:none
-webkit-text-decoration-line:none
-webkit-text-decoration-style:solid
-webkit-text-decoration-color:rgb(0, 0, 0)
-webkit-text-decoration-skip:ink
-webkit-text-underline-position:auto
text-indent:0px
text-rendering:auto
text-shadow:none
text-overflow:clip
text-transform:none
top:auto
transition-delay:0s
transition-duration:0s
transition-property:all
transition-timing-function:ease
unicode-bidi:normal
vertical-align:baseline
visibility:visible
white-space:nowrap
widows:auto
width:36px
word-break:normal
word-spacing:0px
word-wrap:normal
z-index:auto
zoom:1
-webkit-alt:''
-webkit-animation-delay:0s
-webkit-animation-direction:normal
-webkit-animation-duration:0s
-webkit-animation-fill-mode:none
-webkit-animation-iteration-count:1
-webkit-animation-name:none
-webkit-animation-play-state:running
-webkit-animation-timing-function:ease
-webkit-appearance:none
-webkit-backface-visibility:visible
-webkit-background-blend-mode:normal
-webkit-background-clip:border-box
-webkit-background-composite:source-over
-webkit-background-origin:padding-box
-webkit-background-size:auto
-webkit-border-fit:border
-webkit-border-horizontal-spacing:0px
-webkit-border-image:none
-webkit-border-vertical-spacing:0px
-webkit-box-align:stretch
-webkit-box-decoration-break:slice
-webkit-box-direction:normal
-webkit-box-flex:0
-webkit-box-flex-group:1
-webkit-box-lines:single
-webkit-box-ordinal-group:1
-webkit-box-orient:horizontal
-webkit-box-pack:start
-webkit-box-reflect:none
-webkit-box-shadow:none
-webkit-clip-path:none
-webkit-color-correction:default
-webkit-column-break-after:auto
-webkit-column-break-before:auto
-webkit-column-break-inside:auto
-webkit-column-axis:auto
-webkit-column-count:auto
-webkit-column-gap:normal
-webkit-column-progression:normal
-webkit-column-rule-color:rgb(0, 0, 0)
-webkit-column-rule-style:none
-webkit-column-rule-width:0px
-webkit-column-span:none
-webkit-column-width:auto
-webkit-filter:none
-webkit-align-content:stretch
-webkit-align-items:stretch
-webkit-align-self:stretch
-webkit-flex-basis:auto
-webkit-flex-grow:0
-webkit-flex-shrink:1
-webkit-flex-direction:row
-webkit-flex-wrap:nowrap
-webkit-justify-content:flex-start
-webkit-font-kerning:auto
-webkit-font-smoothing:auto
-webkit-font-variant-ligatures:normal
-webkit-grid-auto-columns:auto
-webkit-grid-auto-flow:none
-webkit-grid-auto-rows:auto
-webkit-grid-column-end:auto
-webkit-grid-column-start:auto
-webkit-grid-definition-columns:none
-webkit-grid-definition-rows:none
-webkit-grid-row-end:auto
-webkit-grid-row-start:auto
-webkit-highlight:none
-webkit-hyphenate-character:auto
-webkit-hyphenate-limit-after:auto
-webkit-hyphenate-limit-before:auto
-webkit-hyphenate-limit-lines:no-limit
-webkit-hyphens:manual
-webkit-line-align:none
-webkit-line-box-contain:block inline replaced
-webkit-line-break:auto
-webkit-line-clamp:none
-webkit-line-grid:none
-webkit-line-snap:none
-webkit-locale:auto
-webkit-margin-before-collapse:collapse
-webkit-margin-after-collapse:collapse
-webkit-marquee-direction:auto
-webkit-marquee-increment:6px
-webkit-marquee-repetition:infinite
-webkit-marquee-style:scroll
-webkit-mask-box-image:none
-webkit-mask-box-image-outset:0px
-webkit-mask-box-image-repeat:stretch
-webkit-mask-box-image-slice:0 fill
-webkit-mask-box-image-source:none
-webkit-mask-box-image-width:auto
-webkit-mask-clip:border-box
-webkit-mask-composite:source-over
-webkit-mask-image:none
-webkit-mask-origin:border-box
-webkit-mask-position:0% 0%
-webkit-mask-repeat:repeat
-webkit-mask-size:auto
-webkit-mask-source-type:alpha
-webkit-nbsp-mode:normal
-webkit-order:0
-webkit-perspective:none
-webkit-perspective-origin:18px 0.5px
-webkit-print-color-adjust:economy
-webkit-rtl-ordering:logical
-webkit-tap-highlight-color:rgba(0, 0, 0, 0.4)
-webkit-text-combine:none
-webkit-text-decorations-in-effect:none
-webkit-text-emphasis-color:rgb(0, 0, 0)
-webkit-text-emphasis-position:over right
-webkit-text-emphasis-style:none
-webkit-text-fill-color:rgb(0, 0, 0)
-webkit-text-orientation:vertical-right
-webkit-text-security:none
-webkit-text-stroke-color:rgb(0, 0, 0)
-webkit-text-stroke-width:0px
-webkit-transform:none
-webkit-transform-origin:18px 0.5px
-webkit-transform-style:flat
-webkit-transition-delay:0s
-webkit-transition-duration:0s
-webkit-transition-property:all
-webkit-transition-timing-function:ease
-webkit-user-drag:auto
-webkit-user-modify:read-only
-webkit-user-select:text
-webkit-writing-mode:horizontal-tb
-webkit-flow-into:none
-webkit-flow-from:none
-webkit-region-break-after:auto
-webkit-region-break-before:auto
-webkit-region-break-inside:auto
-webkit-region-fragment:auto
buffered-rendering:auto
clip-path:none
clip-rule:nonzero
mask:none
filter:none
flood-color:rgb(0, 0, 0)
flood-opacity:1
lighting-color:rgb(255, 255, 255)
stop-color:rgb(0, 0, 0)
stop-opacity:1
color-interpolation:srgb
color-interpolation-filters:linearrgb
color-rendering:auto
fill:#000000
fill-opacity:1
fill-rule:nonzero
marker-end:none
marker-mid:none
marker-start:none
mask-type:luminance
shape-rendering:auto
stroke:none
stroke-dasharray:none
stroke-dashoffset:0
stroke-linecap:butt
stroke-linejoin:miter
stroke-miterlimit:4
stroke-opacity:1
stroke-width:1
alignment-baseline:auto
baseline-shift:baseline
dominant-baseline:auto
kerning:0
text-anchor:start
writing-mode:lr-tb
glyph-orientation-horizontal:0deg
glyph-orientation-vertical:auto
-webkit-svg-shadow:none
vector-effect:none
@kevinbarabash

This comment has been minimized.

Copy link
Member

kevinbarabash commented Dec 23, 2018

What happens if you adjust the width of the border? I was hoping that remote debugging would allow you to hover over the element in question to help us determine if it's in the right location or not or whether it's too thin.

@Jenyay

This comment has been minimized.

Copy link
Author

Jenyay commented Dec 24, 2018

The \frac-line appears after setting "border-width" style to "1px".

@ronkok

This comment has been minimized.

Copy link
Collaborator

ronkok commented Dec 24, 2018

So KaTeX writes an inline CSS of

<span class="frac-line" style="border-bottom-width: 0.04em;"></span>

Then WebKitGTK+ apparently ignores this and applies a a border-bottom-width of 0px. It sounds to me like you should open an issue with WebKitGTK+. I don't think there is much that KaTeX can do to help here. There is no such thing as a CSS min-border-width property or I would have written one into the KaTeX CSS long ago.

@Jenyay

This comment has been minimized.

Copy link
Author

Jenyay commented Dec 24, 2018

I added CSS style "border-bottom-width: 1px;" and \frac-line appeared also.

@Jenyay

This comment has been minimized.

Copy link
Author

Jenyay commented Dec 24, 2018

With border-bottom-width >= 0.05em \frac-line also visible.

@ronkok

This comment has been minimized.

Copy link
Collaborator

ronkok commented Dec 24, 2018

@Jenyay That suggests a solution. You can write a custom definition for \frac as a macro. This definition can be written as the last argument to katex.render();

macro: {'\\frac': '{#1 \\above{0.05em} #2}'}

Or, for a single page, you can write the macro into any KaTeX field. (\gdef will persist between fields.) Then the macro can be written as:

\gdef\frac#1#2{{#1 \above{0.05em} #2}}

Why don't we define the standard frac-line to be at least 0.05em? @mbourne would like us to do that. But, well, we emulate TeX and the 0.04em value is written clearly into the TeXbook. So we're kind of stuck. You, however, are free to define it as you want.

@Jenyay

This comment has been minimized.

Copy link
Author

Jenyay commented Dec 24, 2018

The macros parameter is solution for me... almost. The visibility of the \frac-line depends on the scale of the equation. Above, I experimented with a larger font. With normal font border-bottom-width must be >= 0.07em.

@Jenyay

This comment has been minimized.

Copy link
Author

Jenyay commented Dec 24, 2018

I modified the macros:

macros: {'\\frac': '{#1 \\above{max(1px, 0.04em)} #2}'}

It works fine for me. Are there any other elements that may have similar problems?

@Jenyay

This comment has been minimized.

Copy link
Author

Jenyay commented Dec 25, 2018

Unfortunately, min () function does not work and always returns 1px. I will try to use JavaScript code to search for \frac-line with border-bottom-width=0 and replace it with border-bottom-width=1px.

@Jenyay

This comment has been minimized.

Copy link
Author

Jenyay commented Dec 28, 2018

I added the following code to the page to get around the problem

function fix_frac_line()
{
    var win = window;
    var frac_lines = document.getElementsByClassName("frac-line");
    for (var i = 0; i < frac_lines.length; i++) {
        var frac = frac_lines[i];
        if (win.getComputedStyle) {
            style = win.getComputedStyle(frac, '');
            if (style['border-bottom-width'] == '0px') {
                frac.style['border-bottom-width'] = '1px';
            }
        }
    }
};

fix_frac_line();
@kevinbarabash

This comment has been minimized.

Copy link
Member

kevinbarabash commented Feb 9, 2019

It works fine for me. Are there any other elements that may have similar problems?

Not that I'm aware of.

I added the following code to the page to get around the problem

Nice solution. It's unfortunate that min doesn't work reliably. I wonder if we should run fix_frac_line as a post-processing step or at the very least include it in contrib as an extension. 🤔

@mbourne

This comment has been minimized.

Copy link

mbourne commented Feb 10, 2019

I wonder if it might be a good idea to look at the "KaTeX must replicate LaTeX behavior" in a new way. I'm coming at this from a different direction to many, I guess. My background is HTML development, so my main interest is in making math readable and aesthetic on a Web page. LaTeX is just a means to my desired end in this process.

Those with a LaTeX background where the fraction and square root signs always successfully display in PDF or printed output no matter the font size (is that always true?) are more likely to have the mindset that KaTeX must also stick strictly to LaTeX standards.

However, as KaTeX is for Web pages, surely whatever works on Web pages should have precedence over LaTeX purity?

I get it when it comes to things like spacing of subscripts and superscripts, or how far down a square root symbol should go below the line - yes, they all should be consistent with LaTeX, and I also get it that it's important publishers can copy their LaTeX from their publications directly and not have any surprises or errors when using KaTeX. But I don't get it when sticking strictly to LaTeX specifications bumps up against browser peculiarities and the math becomes unreadable (or worse, unreliable) as a result.

Perhaps KaTEX could consider another flag (I don't think "strict" applies here), say "visibleMinThickness" (or whatever) whereby us non-LaTeX-purist publishers could choose to trigger post-processing functions such as fix_frac_line, and be confident the fractions and square roots will always show properly? (In fact, I currently employ a few such post-processing functions.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment