考察/雑記>数式をCSSで再現>分数

分数

2005/10/05

(Gecko,Opera限定)分数をCSSで再現します。

a―/b

(a²+b³)――/2b

2^1―/2

ソース

<mfrac><mfsup>a</mfsup><span class="mfline">―</span><mfno>/</mfno><mfsub>b</mfsub></mfrac>

Gecko用

mfrac{
  display: inline-table;
  vertical-align:-0.3em;
}
mfrac * {
  line-height: 100%;
  text-indent: 0px;
}
mfno{
  display:none;
}
mfsup{
  display: table-row;
  text-align:center;
  font-size: 100%;
  line-height: 70%;
}
mfline{
  display: table-row;
  text-align:center;
  font-size: 100%;
  line-height: 10%;
  vertical-align:-0.3em;
}
mfsub{
  display: table-row;
  text-align:center;
  font-size: 100%;
  line-height: 50%;
}

Opera用

mfrac{
  display: inline-table;
  vertical-align:-0.3em;
}
mfrac * {
  line-height: 100%;
  text-indent: 0px;
}
mfno{
  display:none;
}
mfsup{
  display: table-row;
  text-align:center;
  font-size: 100%;
  line-height: 70%;
  text-decoration:underline;
}
mfline{
  display:none;
}
mfsub{
  display: table-row;
  text-align:center;
  font-size: 100%;
  line-height: 50%;
}