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 [[email protected]]
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/
