Как отображать "классические" застроенные фракции с горизонтальной линией в CSS/JavaScript?

Ответ 1

Если вы счастливы использовать JQuery и хотите минимизировать разметку, которую нужно добавить, вы можете использовать следующее:

CSS

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

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

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

HTML

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

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/

Ответ 2

Используйте этот

<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

Ответ 3

.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

Ответ 4

Вам нужно использовать контекстные альтернативы, доступные в шрифте. Поддержка этого сейчас невелика, но рано или поздно она будет появляться повсюду.

Если у вас был класс 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 наверняка наверстает упущенное.

Ответ 5

Вы можете посмотреть на что-то вроде MathJax, в котором используется Javascript.

Если вы используете только базовые фракции, вы можете использовать символы 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>

Ответ 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>

Ответ 7

I find the best combination is using a 0.5em size with the unicode fractional slash (⁄ "⁄" ). The numerator should be vertical-align:super. And if you can affort to drop support for IE7 and below, you can use the :before psuedo-class to make the markup simpler.

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

(Демо)

You can also use the straight unicode approach to render ¹⁹⁄₄₅:

¹⁹⁄₄₅

(См. статью статьи в википедии.)

Ответ 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;

  td {
    line-height: 2em;
  }

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

  td.bottom {

  }
}

Результат:

Ответ 9

В этом случае я лично не вижу необходимости в 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&nbsp;<span class="frac"><sup>42</sup><span>&frasl;</span><sub>73</sub></span>.</p>