简单易用的生成高等数学方程公式的纯CSS样式

当前位置:主页 > CSS3库 > UI界面设计 > 简单易用的生成高等数学方程公式的纯CSS样式
简单易用的生成高等数学方程公式的纯CSS样式
分享:

    插件介绍

    MathCSS是一款简单易用的可生成高等数学公式的纯CSS样式。通过MathCSS可以将特定HTML结构渲染为非常复杂的高等数学公式,如积分、求和、乘积等。

    浏览器兼容性

    浏览器兼容性
    时间:11-18
    阅读:
简要教程

MathCSS是一款简单易用的可生成高等数学公式的纯CSS样式。通过MathCSS可以将特定HTML结构渲染为非常复杂的高等数学公式,如积分、求和、乘积等。MathCSS的特点有:

  • 快速生成积分、求和、乘积等高等数学公式。
  • MathCSS不依赖于JS,渲染速度快。
  • 响应式设计
  • 特定的数学符号不必使用unicode编码。

由于MathCSS使用纯CSS来渲染数学方程公式,因此它会有一些局限性。如果你希望用户能够和公式进行互动,建议你使用MathJax

使用方法

使用MathCSS需要在页面中引入math.css文件。

<link href="path/to/math.css" rel="stylesheet">                
              
HTML结构

一个数学方程公式应该包含在一个带equation属性的容器中:

<div equation>
   <!-- 你的方程式将写在这里 -->
</div>               
              
积分、求和与乘积

MathCSS可以非常容易的渲染出下面的一些数学方程公式:积分方程、二重积分方程、三重积分方程、乘积方程和求和方程。

积分方程

<div equation>
    <div integral>

    </div>
</div>                
              

如果要指定区间和输入值,可以使用upperboundlowerboundof属性。

<div integral>
    <div upperbound>
        5x
    </div>
    <div lowerbound>
        39x
    </div>
    <div of>
        35x + 45
    </div>
</div>                
              

upperboundlowerboundof属性只在integraldoubleintegraltripleintegralproductsummation中有效。

upperboundlowerbound属性的定位方式是绝对定位,所以它们的顺序是无所谓的。

分数、导数和偏导数

分数(fraction):

<div equation>
    <div fraction>

    </div>
</div>                
              

要指定上下数值,可以使用topbottom属性:

<div fraction>
    <div top>
        5x
    </div>
    <div bottom>
        39x
    </div>
</div>                
              

导数和分数是否相似,只需要添加一个<term>标签。

<div derivative>
    <div top>
        dx 
    </div>
    <div bottom>
        dy
    </div>
</div>

<div term>
    35x + 45
</div>                
              
HR的使用

通过使用HTML内置的<hr>标签,可以非常容易的添加一些常用的数学符号。

例如你想显示一个积分,它的上限为无穷大,下限为2π,中间为35x + 45,那么可以写为:

<div integral>
    <div upperbound>
        <hr infty>
    </div>
    <div lowerbound>
        2<hr pi> + 6
    </div>
    <div of>
        35x + 45<hr pi>
    </div>
</div>               
              

得到的结果如下所示:

积分数学公式

标签<hr pi><hr infty>会自动显示。注意使用的时候不要带</hr>闭标签。

操作符和值:

partialpminftyapproxneqleqgeq

离散数学:

forallexistsnexistsinnotinandorcapcupcongruent
subsetleftsubsetrightnotsubsetleftnotsubsetrightsubsetorequaltoright
subsetorequaltoleftnotsubsetorequaltoleftnotsubsetorequaltoright

希腊字母:

pialphabetalambdadelta

关于MathCSS更加详细的用法请参考:https://github.com/mathexl/math-css