Contact

R, Statistics and Visualization

Responsive Design for MathJax and Tables

Websites that require mathematics and tables increasingly need to be usable on mobile devices; an article on this site for an arcane accounting topic is pulled up on cell phones and tablets surprisingly frequently. Presumably, in the middle of a meeting of an accounting team meeting near the end of the quarter, someone starts frantically searching on “level yield loan fee amortization” and comes up with the article Effective Interest (Yield) Loan Fee Amortization. This article includes both a very wide table that originally caused iPhones to choose a font that was about 2 points or so. I found a way to force a smaller font for tables only based upon the screen resolution, but this was not entirely satisfactory, as the MathJax formula line-length still forced a small font size.

After some months of intermittent searching, I finally found the markup that makes tables and MathJax formulas usable on mobile devices:

 <div style="overflow-x:auto;"> <table> </table> </div> 

or in the case of MathJax,

 <div style="overflow-x:auto;"> MathJax markup </div> 

Table Example

The table below is enclosed in the <div style="overflow-x:auto;"> block as shown above:

Table 1: Example Loan Principal and Fee Amortization for Three Periods
Level Yield Amortization Detailed Calculation Level Yield Level Yield Simplified Calculation
Period Principal Payment Interest Applied Principal Fee Balance Fee Pseudo Payment Fee Pseudo Interest Applied Fee Principal Amortization Expense Level Yield Asset Yield After Fee Amortization Amortization Expense Reduction to Contract Yield Simplified Calculation of Amortization Expense Reduction to Contract Yield Simplified Calculation of Amortization Expense
0$10,000.00-$198.01$58.33-$139.68$1,000.00-$19.80$5.83-$13.97$11,000.006.360.640.64-$13.97
1$9,860.32-$198.01$57.52-$140.49$986.03-$19.80$5.75-$14.05$10,846.356.360.640.64-$14.05
2$9,719.83-$198.01$56.70-$141.31$971.98-$19.80$5.67-$14.13$10,691.816.360.640.64-$14.13

MathJax Example

The MathJax output below is enclosed in the <div style="overflow-x:auto;"> block as shown above:

\begin{aligned} \text{fee amortization}&=&\text{principal reduction}*\frac{\text{fee balance}}{\text{principal balance}} \\ &=&139.68*\frac{1000}{10000} \\ &=&13.97 \end{aligned}

This web site uses cookies to provide user authentication and improve your user experience through the use of Google Analytics and Matomo Analytics. It also uses contact information for email and phone communcation. For details, see the Privacy Policy.
{"extraction_info": {"found_math": true, "script_math_tex": 0, "script_math_asciimath": 0, "math_annotations": 0, "math_alttext": 0, "mathml": 0, "mathjax_tag": 0, "mathjax_inline_tex": 2, "mathjax_display_tex": 0, "mathjax_asciimath": 1, "img_math": 0, "codecogs_latex": 0, "wp_latex": 0, "mimetex.cgi": 0, "/images/math/codecogs": 0, "mathtex.cgi": 0, "katex": 0, "math-container": 0, "wp-katex-eq": 0, "align": 0, "equation": 0, "x-ck12": 0, "texerror": 0, "math_score": 0.5881293416023254, "perplexity": 9046.206174734974}, "config": {"markdown_headings": false, "markdown_code": true, "boilerplate_config": {"ratio_threshold": 0.18, "absolute_threshold": 10, "end_threshold": 15, "enable": true}, "remove_buttons": true, "remove_image_figures": true, "remove_link_clusters": true, "table_config": {"min_rows": 2, "min_cols": 3, "format": "plain"}, "remove_chinese": true, "remove_edit_buttons": true, "extract_latex": true}, "warc_path": "s3://commoncrawl/crawl-data/CC-MAIN-2019-18/segments/1555578553595.61/warc/CC-MAIN-20190422115451-20190422140549-00011.warc.gz"}