关于小悟志网站地图归档友情链接联系Feed

云上小悟 + 

首页 » 网站建设 »

MathJax换行显示技巧

网站建设
2016年3月30日 / 291次阅读
标签:MathJax

拍拍贷

文章《MathJax换行显示技巧》的特色图片

给Mathjax的js代码增加一点配置,就可以实现自动换行。(2017-10-04)

以前,麦新杰之所以一直测试都不行的原因,是因为没有在小尺寸屏幕下刷新,够蠢的吧。。。

一个长数学公式如果渲染显示出来后,在屏幕缩小的过程中,它是不会自动跟着屏幕变小换行的。这跟网页上的文字不一样,网页上的文字可以通过CSS的属性来实现自动换行。但是Mathjax数学公式不行,如果屏幕变小了,请刷新屏幕,这时再看数学公式,已经自动换行。

我们关心自动换行,主要是担心在移动端的显示效果,移动端基本上不会存在屏幕缩放的问题,因此,在第一次打开网页的时候,页面上的公式就会很好的换行呈现。前提是,你给mathjax设置了换行。

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  "HTML-CSS": { linebreaks: { automatic: true } },
         SVG: { linebreaks: { automatic: true } }
});
</script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

你的mathjax的js代码应该按照如上方式设置即可。

最后,给你看个在小屏幕下自动换行的效果图:

mathjax自动换行

mathjax自动换行

 

=========从无知变有知的分割线==========

首先申明,这只是一个MathJax显示长数学公式换行的技巧,是否适合各位站长的网页要求,还要具体情况具体分析。

本人在获得这个技巧之前,研究了MathJax自动换行的配置(在HTML-CSS里面配置linebreaks),但是如论如何都不好用,又缺搞不清楚具体配置失败的原因,网络上关于这个问题的内容几乎没有。于是决定采用迂回战术,放弃MathJax的自动换行配置,改用本文介绍的一个小技巧。

之所以要让MathJax渲染的数学公式换行,主要还是为了更好的在移动页面显示。

 

小技巧的内容如下:

1, 在使用LaTeX语法的地方,增加<div>,并定义其宽度;

这个宽度会按照100%的尺寸传递给MathJax的代码。

2, 在<div>内,只是用inline的latex语法,即只是用\(\);

主要是不想居中,因为第3点。

3, 在 = 或者 其它四则运算符号的地方,手动换行。

手动换行是核心,前面两点都是为了让手动换行之后更好看而已。

 

我使用的代码如下:

<div style="width: 90%;">

\( \cos{a}\sin{b} \\
= \frac{1}{2}{\cdot}[\sin(a+b)-\sin(a-b)] \)

\( \cos{a}\cos{b} \\
= \frac{1}{2}{\cdot}[\cos(a+b)+\cos(a-b)] \)

\( \sin{a}\sin{b} \\
= \frac{1}{2}{\cdot}[\cos(a+b)-\cos(a-b)] \)

</div>

示例页面:

三角函数积化和差公式的推导

PC和手机都可以访问,看看效果吧。

本文链接:http://www.maixj.net/wz/mathjax-huanhang-11558
云上小悟 麦新杰(QQ:1093023102)

相关文章

评论是美德

《MathJax换行显示技巧》有4条评论

无力满足评论实名制,评论对非实名注册用户关闭,有事QQ:1093023102.

  • 麦新杰

    虽然本站页面都是静态的,但是页面上的数学公式都是js动态渲染,即页面加载后再执行js,对页面上使用的LaTeX表示的数学公式进行渲染。这样的渲染,能够适应屏幕的宽度,自动换行就能够有效发挥作用。 [ ]

  • 麦新杰

    还有一个自动换行的细节,如果你的一些列数学公式通过&的方式在某个地方对其(比如在=这里对齐),自动换行会不起作用。 [ ]

  • 麦新杰

    以前的自动换行配置是对的,是测试方法不对。 [ ]

  • 按照官方说明配置,也无法实现自动换行,肯定有什么地反搞错了.......暂时不管了,还是手动换行吧。 [ ]


前一篇:
后一篇:

栏目精选


©Copyright 麦新杰 Since 2014 云上小悟独立博客版权所有 备案号:苏ICP备14045477号-1

网站二维码
拍拍贷
go to top