6

我正在寻找一种使用 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。

想法？

4

3 回答 3

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

演示

于 2013-07-10T06:16:36.490 回答
1

在某些传统中，“长除法”的概念和符号是学校算术教学的传统概念，它用于以图形方式解释整数除法步骤的上下文中。在 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 对于任何涉及数学符号中基本二维的东西（即，不是简单的线性字符序列的数学表达式）都相当无能为力。即使构造一个平方根表达式，其中 vinculum 延伸到 radicand，也需要或多或少容易失败的诡计，并且显示这样的表达式类似于，但本质上比长除法表达式更简单。

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

于 2013-07-10T08:19:15.403 回答
1

在 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。这是一个长除法示例，它使用 MathJax TeX 解析器来解析表单的输入\longdiv{84}{4}。

于 2013-07-10T08:29:53.450 回答