Jukka K. Korpela wrote: > Jukka K. Korpela wrote: > >> I'm afraid you misunderstood the question, or the OP misunderstood what >> "fraction bar" means. It means a character resembling "/" but with >> different angle and properties, used to construct fractional numbers in a >> particular rendering, similar to that of "½". > > It was pointed out to me, in private e-mail, that "fraction bar" means a > horizontal bar, and it seems that I was mistaken indeed. > > I assumed the question was about rendering fractional numbers using fraction > slash (the page mentioned by the OP contains fractions 1/2 and 1/32). If it > is about rendering fractional expressions using a horizontal bar, then it's > a very different question, and even more complicated. It becomes even more > complicated if they should be rendered inline, inside text. > > In principle, you could use lots of nested <span> markup, describing the > structure of a fractional expression, then using fairly complicated CSS to > position the numerator above the denominator and to draw a line between > them. It's possible to some extent in practice, though maybe the rendering > is not very pretty. > > But it gets rather awkward if you want to put the expression inline. You > could use display: inline-block (which has wide though surely not universal > browser support) but then you would have to do some rather tedious work in > positioning the parts well and still keeping the height of the expression > sufficiently small (and try to position the fractional bar at the 0.5ex > height above surrounding text baseline, or something like that). Even > setting the overall line-height fairly large, this would be difficult, and > you would probably end up with reducing font size inside the expression.
This is far to complex. In maths, a fraction 3 over 2 is also the same as 3 divided by 2. This markup and CSS does this. <sup>3</sup>/<sub>2</sub> div {line-height:160%;} /* or any other container *./ sup, div sub {font-size:75%;} Demo. <http://css-class.com/test/css/text/fractions.htm> -- Alan http://css-class.com/ ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/