Skip to content
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

CommonHTML fraction rendering results in overlap with surrounding punctuation #1393

Closed
barillax opened this issue Feb 18, 2016 · 11 comments

Comments

Projects
None yet
5 participants
@barillax
Copy link

commented Feb 18, 2016

Test cases:

Here's a fraction $ \dfrac{11}{100} $.
Here's a fraction $ \dfrac{11}{100} $!

Notice that the punctuation ending the sentence will overlap with the fraction due to the position: absolute fraction bar not contributing to the width of MathJax span.

There are ways to hack around this, such as manually inserting \space onto the end of the MathJax, but it wasn't necessary in the HTML-CSS processor previously. Suggestions for better workarounds are welcome!

@pkra

This comment has been minimized.

Copy link
Member

commented Feb 18, 2016

I'm unable to reproduce this. Please provide a live sample and information on browser and OS versions. For more suggestions, see also https://github.com/mathjax/MathJax/blob/master/CONTRIBUTING.md#bug-reports

@barillax

This comment has been minimized.

Copy link
Author

commented Feb 18, 2016

Sorry about that. OS/Browser info:

Mac OS X 10.11.2
Chrome 48.0.2564.109
MacBook Pro Retina Display

I used the demo on MathJax.org to test and reproduce. Here's a screenshot on Imgur.

@pkra pkra added Investigate and removed Cannot Reproduce labels Feb 18, 2016

@pkra

This comment has been minimized.

Copy link
Member

commented Feb 18, 2016

Thanks for the follow up. For mathjax.org, this is caused by CSS interference (bootstrap's aggressively resetting box-sizing after every element).

ping @dpvc

@barillax

This comment has been minimized.

Copy link
Author

commented Feb 18, 2016

Oh interesting! We're using bootstrap on our site, too, so perhaps that's why we're hitting the same problem.

I assume bootstrap compatibility is somewhat important. Is there a known way to "unbreak" this in bootstrap?

@theblang

This comment has been minimized.

Copy link

commented Feb 18, 2016

We are seeing this as well. You can definitely notice the difference by toggling the box-sizing: border-box style on and off in chrome debugger.

@booleanbetrayal

This comment has been minimized.

Copy link

commented Feb 18, 2016

.MJXc-stacked {
    box-sizing: content-box;
}

Maybe?

@barillax

This comment has been minimized.

Copy link
Author

commented Feb 18, 2016

I added:

.mjx-chtml {
    &, 
    span {
        box-sizing: initial;
    }
}

and that also seemed to fix it. Sound safe?

@booleanbetrayal

This comment has been minimized.

Copy link

commented Feb 18, 2016

that SASS looks good! 👍

@pkra pkra added Accepted and removed Investigate labels Apr 15, 2016

@pkra pkra added this to the MathJax v2.x.x milestone Apr 15, 2016

dpvc added a commit to dpvc/MathJax that referenced this issue Jun 7, 2016

@dpvc

This comment has been minimized.

Copy link
Member

commented Jun 7, 2016

The issue1393 branch of my fork of MathJax adds CSS to the CommonHTML output to prevent the bleed-through of the box-sizing CSS set by bootstrap.

dpvc added a commit that referenced this issue Jul 6, 2016

Merge pull request #1510 from dpvc/issue1393
Prevent CSS bleedthrough for box-sizing (set by Bootstrap CSS).  #1393
@dpvc

This comment has been minimized.

Copy link
Member

commented Jul 6, 2016

==> Merged

@dpvc dpvc added Merged and removed Ready for Review labels Jul 6, 2016

@dpvc dpvc closed this Jul 6, 2016

dpvc added a commit to mathjax/MathJax-test that referenced this issue Aug 15, 2016

@dpvc

This comment has been minimized.

Copy link
Member

commented Aug 15, 2016

==> In testsuite

MathMLToDisplay/issue1393.html

@dpvc dpvc added the Test Available label Aug 15, 2016

@dpvc dpvc removed the Test Needed label Aug 15, 2016

@dpvc dpvc added v2.7 Fixed and removed Merged labels Jan 5, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.