最近做H5应用,遇到了一个棘手的问题,怎么在网页上排版中学题目。问题关键在于,现在的中学题目,具有太丰富的形式,在网页设计的时候,有许多情形要考虑,列几条:
- 题目篇幅太长,一般还带有阅读材料,主要体现在语文和英语上
- 图文混排,格式比较杂
- 理科还有各种公式之类的
- 选项多样,单选,多选
这么看来,在线教育的题库,确实是个比较重要的问题。
在做这个的时候,发现一些小的技巧可以解决许多理科排版上的问题,拿出来分享一下。当然,粗暴一点,通过文字+图片的形式,其实可以解决所有的题目排版的,就是比较费功夫。
一些简单的数学排版
上标
用途:平方、立方及n次方等
排版:使用html的sup标签
a<sup>n</sup>
示例:
下标
用途:脚标
排版:使用html的sub标签
a<sub>n</sub>
示例:
根号
用途:平方根
排版:使用√+上划线合成
√<span style="text-decoration:overline;">5</span>
示例:
上划线和下划线
用途:强调、变量命名等
排版:及text-decoration
<u>x+y</u>
<span style="text-decoration:overline;">a</span>
示例:
分数
分数只能通过斜杠来表示,例如1/2, 1/3, 1/4 ……
一些html字符实体
html语法中,带有不少字符实体,举一些例子。这些符号都可以直接通过html标签来描述。
显示 | 描述 | 名称 | 编号 |
---|---|---|---|
“ | quotation mark | " | " |
‘ | apostrophe | ' | ' |
& | ampersand | & | & |
< | less-than | < | < |
> | greater-than | > | > |
± | plus-or-minus | ± | ± |
× | multiplication | × | × |
÷ | division | ÷ | ÷ |
更多HTML字符实体,参考这里。
其他可用字符
注意观察,平时在网页上也会经常看到一些特殊的字符,例如π, ⋂,∀,∃等,这些都是Unicode或者UTF8字符,也可以使用。
对于一些简单场景下的应用,使用这样的数学符号来偷懒还是可以的。如果是比较专业的场景,例如做教育类、题库类的,应该想更全面的办法。