Question

我正在寻找一种使用HTML / CSS显示传统长除法符号的方法（有点像这里显示的那样：http://barronstestprep.com/blog/wp-content/uploads/2013/04/longdiv1.png）。

这个（http://www.fileformat.info/info/unicode/char/27cc/index.htm）基本上是我需要的，但我不认为很多人会在他们的计算机上安装正确的字体来看它（至少我没有）。

我也试过这个（下面），但它在Chrome和FF上不能始终显示......

4<span style="text-decoration: overline;"><span style="font-size: 14px">)</span>84</span>

这应该用长除法框显示84÷4。

想法？

Answer 1

<span style="border-right: 1px black solid; border-radius: 0px 0px 10px 0px">
    4 
</span>
<span style="border-top: 1px black solid; ">
    84 
</span>

Demo

Answer 2

在某些传统中，“长师”的概念和符号在学校教授算术是传统的，并且它用于以图形方式解释整数除法步骤的语境中。除了使用图像之外，没有可靠的方法在HTML和CSS中执行此操作，包括整个长除法作为过程的大图像或分段，例如，一个只包含一个数字，一个长除法运算符和另一个数字（如问题中提到的jpg）。这就是例如http://www.mathsisfun.com/long_division.html这样做。页面http://en.wikipedia.org/wiki/Long_division使用预先格式化的文本，来自Ascii字符的构造符号，如“）”和“_”，但结果是原始的并且不健壮（例如，在屏幕阅读器中变成乱码）。

使用图片时，您应该写一个alt文字，用口头表达这个想法。这在某种程度上取决于背景，但我担心它需要很长，如alt="long division with divisor 4, dividend 84"。

仅使用HTML和CSS构建长分区是相当无望的，因为HTML和CSS在数学符号中涉及必要的二维性（即，不是简单的线性字符序列的数学表达式）的任何事情都是无能为力的。甚至构造一个square root expression，带有一个延伸到radicand的vinculum，需要或多或少地容易失败的技巧，并且显示这样的表达式类似于，但基本上比长除法表达式更简单。

字符U + 27CC LONG DIVISION理论上会让你写一个长除法表达式，即使是纯文本，因为它是在Unicode标准中定义的，因此它“以图形方式延伸到被除数”。然而，由于几个原因，这在很大程除了有限的字体覆盖率（可以使用带有@font-face的可下载字体处理），该方法还缺乏软件支持。 “以图形方式延伸红利”的想法并不容易实现。虽然浏览器可以（当使用合适的字体时）正确渲染84⟌4，但是它们会失败84 with42（符号延伸到“4”之后但不超过“2”）。原因似乎是在包含U + 27CC的字体中，可能会使用预先规则来实现，这些规则意味着运算符似乎延伸到下一个数字，但是要使其延伸到下一个 >数字（数字序列），需要高于简单字体级别的软件支持。

Answer 3

在HTML5中，您可以直接使用 MathML 。 MathML 3支持<mlongdiv>元素：

<figure>
  <math>
    <mlongdiv>
      <mn>4</mn>
      <mn></mn>
      <mn>84</mn>
    </mlongdiv>
  </math>
  <figcaption>
    This will display as a long division in browsers that support MathML 3.
  </figcaption>
</figure>

对于MathML 2，您可以使用基于LaTeX的Javascript解决方案，例如MathJax。这是一个long division example，它使用MathJax TeX解析器来解析\longdiv{84}{4}形式的输入。

长除法符号（HTML和/或CSS）

3 个答案: