javascript - CSS / JavaScriptで水平線を使用して「クラシック」のビルドアップ分数を表示する方法は?

Question

分数があって、キレイにキレイにディスプレイしたい。

例えば

4/5 

だろう

 4
 —
 5

私はこれを見てきましたが、この解決策はまともですが、問題は、従来の分数のように、4 と 5 を同じ行に直線で区切ることにあります。

どんなハックやソリューションも受け入れられます。必ずしも CSS、Javascript、またはその他の言語が受け入れられるわけではありません。

Answer 1

これを使って

<sup>6</sup>/<sub>7</sub>​

デモ

---

直線用

HTML

<div class="top">2</div><div class="bottom">6</div>​

CSS

.top{border-bottom:solid black 1px; display:inline-block; float:left}
.bottom{ display:inline-block; clear:left; float:left}

デモ2

Answer 2

.fraction {
  display: inline-block;
  position: relative;
  vertical-align: middle; 
  letter-spacing: 0.001em;
  text-align: center;
  font-size: 12px;
  }
.fraction > span { 
  display: block; 
  padding: 0.1em; 
  }
.fraction span.fdn {border-top: thin solid black;}
.fraction span.bar {display: none;}

Foobar
  <div class="fraction">
    <span class="fup">4</span>
    <span class="bar">/</span>
    <span class="fdn">5</span>
  </div>
Foobar

.fraction font-size を変更して、必要なサイズにします

Answer 3

JQuery を使用して満足し、追加する必要があるマークアップを最小限に抑えたい場合は、次のように使用できます。

CSS

.fraction, .top, .bottom {
    padding: 0 5px;    
}

.fraction {
    display: inline-block;
    text-align: center;    
}

.bottom{
    border-top: 1px solid #000;
    display: block;
}

HTML

<div class="fraction">1/2</div>
<div class="fraction">3/4</div>
<div class="fraction">1/32</div>
<div class="fraction">77/102</div>

JQuery

$('.fraction').each(function(key, value) {
    $this = $(this)
    var split = $this.html().split("/")
    if( split.length == 2 ){
        $this.html('
            <span class="top">'+split[0]+'</span>
            <span class="bottom">'+split[1]+'</span>
        ')
    }    
});

作業例: http://jsfiddle.net/xW7d8/

JQuery なし

JQuery を使用せずにこれを実現するには、上記と同じ CSS で次の HTML を使用できます。

<div class="fraction">
    <span class="top">1</span>
    <span class="bottom">100</span>
</div>

Answer 4

Javascript を使用するMathJaxのようなものを見たいと思うかもしれません。

基本的な分数のみを使用している場合は、Unicode 文字 (または同等の HTML エンティティ) を使用できます:
¼ ½ ¾ ⅓ ⅔ ⅛ ⅜ ⅝ ⅞</p>

純粋な CSS では、水平バーを使用するのが「伝統的」かもしれませんが、最近では紙に分数を書く場合でもほとんどの人が斜線を使用しています。これが私が使用するものです：

.fraction > sup,
.fraction > sub {
  font-size: .66em;
}
.fraction > sup {
  vertical-align: .4em;
}
.fraction > sub {
  vertical-align: -.2em;
}

この HTML では:

<span class="fraction">
  <sup>1</sup>⁄&lt;sub>8</sub>
</span>

Answer 5

フォントで利用可能なコンテキストの代替を使用する必要があります。これに対するサポートは今のところ素晴らしいものではありませんが、遅かれ早かれどこにでも現れるでしょう。

番号にクラスがある場合はfractions、次を使用します。

.fractions { 
    -moz-font-feature-settings: "frac=1";
    -ms-font-feature-settings: "frac" 1;
}

厄介なことに、Gecko はフォントに渡される生の情報を使用しますが、ms バージョンが標準になるはずです。

これがデモです。http://ie.microsoft.com/testdrive/Graphics/opentype/opentype-fontbureau/index.html#fractions

今は Gecko と Trident だけですが、Webkit は確実に追いつくでしょう。

Answer 6

Flexbox でいくつかの追加オプションが使用できるようになりました

.fraction {
  display: inline-flex;
  flex-direction: column;
  padding: 1em;
  align-items: center;
}
.numerator {
  border-bottom: 2px solid grey;
}

<span class="fraction">
  <span class="numerator">3</span>
  <span class="denominator">4</span>
</span>

<span class="fraction">
  <span class="numerator">12</span>
  <span class="denominator">7</span>
</span>

Answer 7

最適な組み合わせは、0.5em サイズと Unicode 分数スラッシュ ( ⁄" ⁄ ") を使用することです。分子は である必要がありますvertical-align:super。また、IE7 以下のサポートをやめる余裕がある場合は、:before疑似クラスを使用してマークアップをより単純にすることができます。

.num {
    font-size: 0.5em;
    vertical-align: super;
}
.den {
    font-size: 0.5em;
}
.den:before {
    content: '\2044';
    font-size: 2em;
}

と

<span class="num">19</span><span class="den">45</span>

(デモ)

---

¹⁹⁄₄₅ をレンダリングするために、ストレート Unicode アプローチを使用することもできます。

¹⁹⁄₄₅

(ウィキペディアの記事を参照してください。)

Answer 8

これは自動的に '1/2' を分数形式に変換しません。ただし、テンプレートをより細かく制御できる場合は、次のことができます。テーブルの使用はまだ提案されていないため、次のようになります。

HTML:

<table class="fraction">
  <tr>
    <td class="top">Top of Fraction</td>
  </tr>
  <tr>
    <td class="bottom">Bottom of Fraction</td>
  </tr>
</table>

CSS:

table.fraction {
  display: inline-block;
  text-align: center;
  margin-left: 1em;
}

table.fraction td {
  line-height: 2em;
}

table.fraction td.top {
  border-bottom: 1px solid darkgray;
}

結果：