如何在 CSS / JavaScript 中用水平线显示“经典”组合分数？

Question

我有一个分数，我想把它整齐漂亮地展示出来。

例如

4/5 

会

 4
 —
 5

我查看了this，虽然这个解决方案不错，但问题在于将 4 和 5 在同一行中，并用 直线 分隔它们，就像在传统分数中一样。 p>

任何黑客或解决方案都是可以接受的。不一定可以接受 CSS、Javascript 或任何其他语言。

Answer 1

我们想要一个垂直书写的分数，它可以正确对齐，容纳混合数字，并且可以使用 HTML 简洁地写入。这可以简单地使用 HTML 属性或标签以及一些 CSS 来完成。不涉及 Javascript。此方法也适用于对齐混合分数以确保分数垂直居中，但不适合多层复杂分数。

使用标签名称的想法

让fraction、numerator、denominator 成为在纯 HTML 和 CSS 中通过内联块、相对位置、垂直对齐和边境。有时需要一个小的左侧填充以避免冲突。 CSS 样式将是：

fraction, numerator, denominator {
    display: inline-block;
    vertical-align: middle;
    padding-left: 2px   
}

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

numerator {
    border-top: 1px solid;
    display: block;
}

那么，输入分数的用法依次涉及这三个标签：

<fraction>
    <numerator>A</numerator>
    <denominator>B</denominator>
</fraction>.

示例

我缩短了标签名称并添加了填充以解决冲突。我还尝试实现一个小部分 html。

frac, numer, denom, fracsmall {
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px; margin-right: 2px; 
}

frac, fracsmall {
    display: inline-block;
    text-align: center;    
}
 
denom {
    border-top: 1px solid;
    display: block; /* Creates new line */
}

fracsmall > numer {
    font-size: 75%;
}

fracsmall > denom {
    font-size: 75%;
}

The value of 9<frac><numer>3</numer><denom>4</denom></frac> is also written 
<frac><numer>39</numer><denom>4</denom></frac>.

Also, <fracsmall><numer>1</numer><denom>1</denom></fracsmall>
+ <fracsmall><numer>1</numer><denom>2</denom></fracsmall>
+ <fracsmall><numer>1</numer><denom>3</denom></fracsmall> + ... is divergent.
<br />

Here is a more complex fraction
<frac>
<numer>
    1 + 
    <frac><numer>1</numer><denom>x</denom></frac> + 
    <frac><numer>1</numer><denom>x<sup>2</sup></denom></frac>
</numer>
<denom>
    x+<frac><numer>1</numer><denom>y</denom></frac>+z
</denom>
</frac>
<br />

Let's try with a continued fraction. π = 
<frac>
<numer>4</numer>
<denom> 1 +
<frac>
<numer>1<sup>2</sup></numer>
<denom> 3 +
    <frac>
    <numer>2<sup>2</sup></numer>
    <denom> 5 +
        <frac>
        <numer>3<sup>2</sup></numer>
        <denom> 7 + ...
        </denom>
        </frac>
    </denom>
    </frac>
</denom>
</frac>
</denom>
</frac>. Looks kinda awkward without bracketing...

Answer 2

如果您乐于使用 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 3

这不会自动将“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;
}

结果：

Answer 4

我发现这对我很有用

当分母较长时我需要排队，当分子较长时我需要排队，我像这样更改了上面的一些代码（johnatan lin）。 当你有一个更长的分子时，使用类分子作为分子，没有类作为分母 当你有更长的分母时，不要使用类作为分子，而使用类分母作为分母。

css 样式

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

html代码示例

里卡维 名额

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

<h1>A way to show fractions (not only numers)</h1>
This is what I did after different solutions found on stackoverflow.

<h2>This is with longer numerator</h2>
<div class="fraction">
  <div class='numerator'>Longer than the other one</div>
  <div>Numero di coperti</div>
</div>


<h2>This is longer denominator</h2>
<div class="fraction">
  <div>Ricavi</div>
  <div class="denominator">Numero di coperti</div>
</div>
<p>Hello from Giovanni</p>

缩短这些东西的方法

为了让事情进展得更快，我把这个 javascript 放在了标签之间或另一个带有 js 的文件中。

function numeratore(num, den){
    document.write("<div class='fraction'><div class='numerator'>" + num + "</div><div>" + den + "</div></div><div id='div1'></div>")
}

function denominatore(num, den){
    document.write("<div class='fraction'><div>" + num + "</div><div class=\"denominator\">" + den + "</div></div><div id='div1'></div>")
}

并将其放入 html 正文中

<script>
denominatore("Ricavi", "numeri di coperti")
numeratore("Costi di produzione", "Numero menu serviti")
</script>

分母：当分母较长时 numeratore: 当分子较长时

和之前一样的css

这进入标签或进入

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

Answer 5

.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 字体大小以使其达到您想要的大小

Answer 6

我个人认为在这种情况下不需要 JavaScript。

查看以下内容：

span.frac {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}
span.frac > sup, span.frac > sub {
  display: block;
  font: inherit;
  padding: 0 0.3em;
}
span.frac > sup {border-bottom: 0.08em solid;}
span.frac > span {display: none;}

<p>7 <span class="frac"><sup>42</sup><span>⁄</span><sub>73</sub></span>.</p>

CodePen

Answer 7

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 8

我发现最好的组合是使用 0.5em 大小和 unicode 小数斜线 (⁄ " ⁄ ")。分子应为vertical-align:super。如果您愿意放弃对 IE7 及以下版本的支持，您可以使用:before psuedo-class 来简化标记。

.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>

(Demo)

---

您还可以使用直接的 unicode 方法来呈现 ¹⁹⁄₄₅：

¹⁹⁄₄₅

（见wikipedia article。）

Answer 9

使用这个

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

DEMO

---

直线

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}

​DEMO 2

Answer 10

您可能想查看使用 Javascript 的 MathJax 之类的内容。

如果您只使用基本分数，则可以使用 Unicode 字符（或等效的 HTML 实体）：
¼ ½ ¾ ⅓ ⅔ ⅛ ⅜ ⅝ ⅞

对于纯 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>⁄<sub>8</sub>
</span>

Answer 11

您需要使用字体中可用的上下文替代方案。对此的支持目前还不是很好，但迟早会到处出现。

如果你的号码上有 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 肯定会迎头赶上。