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

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的长除法框。有什么想法吗？

- gtilflm

---

我在网站上没有看到你的Unicode。它给出了一个Unicode符号供您放置，您应该能够看到它。 - user2277872

如果没有该符号的 HTML 代码，您可不可以只使用一张图片来代替长除号呢？这样做的话，您就不必担心用户没有安装正确的字体所带来的问题了。 - nsilva

我将生成随机数以放置在div框下面。因此，图像不起作用。 - gtilflm

你可以使用绝对定位来放置图片，这样文字仍然会直接出现在符号下方。 - nsilva

使用图像作为被除数会导致随机长度值的问题。如果被除数在某些时候是8位数字，而在其他时候只有3位数字，那该怎么办呢？我确定OP希望Vinculum（被除数上方和商下方的线）的长度仅足以延伸到被除数的长度；即可变生成。我的第一个想法是使用JavaScript函数生成一个括号字体更大的括号，然后可变地绘制一条线，其长度使用被除数的宽度计算。 - user253780

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>

演示

- grmmph

---

正是我在 Fiddle 上制作的内容 :) - Mr. Alien

只是好奇...如果你不给class="numbers"设置样式，为什么要有它呢？ - Ms. Nobody

当CSS被禁用时，内容会显示为“4 84”，因此该方法并不是很健壮。例如，屏幕阅读器只会读出数字，没有任何分割的指示。 - Jukka K. Korpela

@grmmph，将问题标记为CSS并不改变现实：这种方法除了棘手且产生排版质量较差的演示外，还不够健壮和易用 - 例如，使用屏幕阅读器的人根本没有“禁用”或“启用”CSS的概念（阅读器可能应用了一些CSS，但肯定不是边框）。 - Jukka K. Korpela

你说的一切都是正确的。如果有一种方法可以在所有屏幕和设备上显示长除法符号，请提交您的答案。如果我们开始因为某些特定设备无法显示而淘汰解决方案，那么您将不得不避免使用所有HTML5框架。这就是为什么我们需要备选方案。 - grmmph

Answer 2

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

<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}的输入。

- Nicholas Shanks

---

是的，我可能会在某个时候使用Mathjax，但上面被接受的答案对我的目的来说更好。不过还是谢谢你提供的想法。 - gtilflm

MathJax目前不支持mlongdiv，但公平地说，除了旧版IE通过MathPlayer插件外，任何浏览器都不支持它。 - Peter Krautzberger

@PeterKrautzberger 是的，我有点暗示这一点（MathML 3很快就会出现在HTML5浏览器中，但在那之前，只能通过MathJax使用MathML 2）。 - Nicholas Shanks

MathJax已经支持大部分的MathML 3，只是还没有支持基本数学。此外，目前浏览器对MathML的支持并没有进展。 - Peter Krautzberger

@PeterKrautzberger 啊，这是个好消息！我曾经读过它不支持MathML 3，并且自己也没有尝试使用过。 - Nicholas Shanks

Answer 3

“长除法”的概念和符号是传统的，在某些教学算术的传统中使用，并且在解释整数除法步骤的图形化上下文中使用。除了使用包含整个长除法过程或分段的大图像（例如一个片段仅包含一个数字、长除法运算符和另一个数字，如问题中提到的jpg文件），HTML和CSS中没有可靠的方法来完成这项工作。例如http://www.mathsisfun.com/long_division.html所做的那样。页面http://en.wikipedia.org/wiki/Long_division使用预格式化文本、Ascii字符构造符号（如“)”和“_”），但结果看起来原始且不够强大（例如，在屏幕阅读器中会变成乱码）。

当使用图像时，您应编写一个表达思想的alt文本。这有些取决于上下文，但恐怕需要相对较长，例如alt="具有除数4、被除数84的长除法"。

使用仅有的HTML和CSS构建长除法是相当无望的，因为HTML和CSS在涉及到数学符号的本质二维性方面相当无能（即，不是简单的线性字符序列的数学表达式）。即使是构建一个具有延伸到被开方数上的横线的平方根表达式也需要花招，很容易失败，而展示这样的表达式类似于但本质上比长除法表达式更简单。

字符U+27CC表示长除法，理论上可以在纯文本中编写长除法表达式，因为Unicode标准定义它可以“图形地延伸到被除数上方”。但由于多种原因，这在很大程度上仍是理论上的。除了字体覆盖范围有限（可以使用@font-face下载字体解决），这种方法还受到软件支持的不足。想法“图形地延伸到被除数上方”不易实现。虽然浏览器可能会（使用适当的字体时）正确呈现84⟌4，但它们无法处理84⟌42（符号延伸到其后面的“4”，但未延伸到其后面的“2”）。原因似乎是，在包含U+27CC的字体中，它可能是通过进阶规则实现的，这意味着该运算符似乎延伸到下一个数字，但要使其延伸到下一个数值（数字序列），需要超出简单字体级别的软件支持。

- Jukka K. Korpela

---

实际上，Jukka，我认为我可以编写一个AAT mif文件，以使U+27CC与最多8个后续数字正确地配合。我会在周末尝试一下。 - Nicholas Shanks