CODEWITHSUNDEEP
cssmathjax
vrracing
vrracing

Reputation: 23

Scale MathJax to fit responsive div

Trying to make an AngularJS directive with a responsive div containing MathJax (asciimath in this case) that scales to fit the available space within the div. The directive and size calculations all work perfectly and it works in isolation. However, in a real app the MathJax doesn't scale. I've narrowed it down to the hosting app setting font-size for *.

The MathJax scaling trick is based on this post by Davide Cervone. I have created a stripped down demonstration CodePen.

Everything works as expected. Note that this demo doesn't include the scaling calculations or any Angular-goodness as it isnt necessary to illustrate the issue.

If you remove the comments from the * font-size...

    * {
      /* font-size: 9px; */
    }

The scaling on the second MathJax will be overridden and the equation with shrink.

I've tried using a style on the div and span to set the scale, I've tried making the css more explicit like this...

    .divination .MathJax *  {
        font-size: 600%  !important;
    }

all to no avail.

Because this directive will be used in other people's apps, we have no control over them setting the * style.

I appreciate any thoughts or insights yall may have on making this work.

Jim

Upvotes: 0

Views: 863

Answers (1)

Davide Cervone
Davide Cervone

Reputation: 12205

Try

.divination {
  font-size: 200% ! important
}
.divination * {
  font-size: inherit
}

That works for me in your codepen.

Upvotes: 2

Related Questions