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 でこれを行うための信頼できる方法はありませんが、画像を使用する以外に、プロセスとして長い除算全体を含む大きな画像か、断片的に、たとえば、数値、長除算演算子、および別の数値のみを含む 1 つの部分 (質問で言及されている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 は、数学表記の本質的な 2 次元性 (つまり、文字の単純な直線的シーケンスではない数式) に関係するものにはまったく無力だからです。ヴィンキュラムがラジカンドを超えて拡張された平方根式を作成することでさえ、多かれ少なかれ簡単に失敗する策略を必要とし、そのような式を示すことは長い除算式に似ていますが、本質的にはより単純です。

文字 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 では、 MathJaxなどの LaTeX ベースの Javascript ソリューションを使用できます。以下は、MathJax TeX パーサーを使用して form の入力を解析する長い除算の例\longdiv{84}{4}です。

于 2013-07-10T08:29:53.450 に答える