html lists - Mathjax font size shrinks when playing with `position` CSS attribute -
i want make html document list of math formulas mimicking \itemize latex environment (i.e. markers should "1), 2), etc") , have two-columns layout.
for math formulas use mathjax, markers used css trick @ https://stackoverflow.com/a/1636635/3025740 , two-columns use css property column-count adding vendor-specific properties in http://www.w3schools.com/cssref/css3_pr_column-count.asp
any 2 of these 3 mechanisms seem work fine, when mix 3 of them not: font size of math formulas (recall, rendered mathjax) way small.
here minimal code reproduce problem (tested on ubuntu 16.04 lts firefox 49.0.2)
<html> <head> <meta charset="utf-8"> <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/mathjax.js?config=tex-mml-am_chtml"> </script> <style media="screen"> ol { counter-reset: list; } ol > li { list-style: none; /*removing property fixes mathjax size breaks markers*/ position: relative; } ol > li:before { counter-increment: list; content: counter(list, decimal) ") "; position: absolute; left: -1.4em; } .twocolumns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } </style> </head> <body> <div class="twocolumns"> <ol> <li>\(2 \times 5\)</li> <li>\(4 \times (2 +11)\)</li> <li>\(4 \times 5 - 2 \times 7\)</li> <li>\(4 \times (87 - 45) + 5 \times 2\)</li> </ol> </div> </body> </html>as indicated in snippet removing position: relative; in ol > li in css fixes mathjax size issues. sadly breaks marker trick (markers disapear)
any idea how make work?
mathjax uses relatively tall box (60ex high) determine ex-height of surrounding font, , looks ff , edge both funny size of box in multi-column setting. seem override both width , height set mathjax box, , mathjax gets wrong ex-height (and sets wrong font scaling). since both ff , ie it, perhaps correct behavior html or css spec, , webkit getting wrong. haven't tried figure out.
in case, turns out adding overflow:hidden css test element used mathjax resolves problem (the browsers don't screw height in case, reasons beyond comprehension), adding
<script type="text/x-mathjax-config"> mathjax.hub.config({ commonhtml: { styles: {".mjx-ex-box-test": {overflow: "hidden"}} } }); </script> to page, or adding
.mjx-ex-box-test { overflow: hidden; } to css file should resolve issue.
Comments
Post a Comment