Re: [css-d] Fraction bar
- Original Message -
From: "Troy Harshman"
>
>
>
>.line {clear:left;}
>ul {margin:7px 9px 0; padding:3px; list-style:none;
> background:#eee; text-align:center; float:left;}
>li.numerator {border-bottom:1px solid #000;}
>p {float:left;}
>
>
>
>
>In the fraction
>
>3
>2
>
>3 is the numerator and 2 is the denominator.
>
>
>In the fraction
>
>1
>2
>
>1 is the numerator and 2 is the denominator.
>
>
>In the fraction
>
>6
>18
>
>6 is the numerator and 18 is the denominator.
>
>
>
>
Thanks to everyone who replied, and specially to Troy, whose code I slowly
adapted to my Maths site, and got
"(3/2) ^5 = 3/2 x 3/2 x 3/2 x3/2 x3/2" written by the book.
Eduardo
__
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/
Re: [css-d] Fraction bar
> I took Alan's sample and expanded on it to provide a horizontal line. I > haven't extensively tested it but it works well for me on FF3.5. It does look good in FF3.5. But it doesn't look nearly as nice in any other browser. The spacing between the numbers and the bar is too big in everything else, and IE8 chokes all over it. Apparently, it doesn't like setting color to transparent. ---Tim __ 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/
Re: [css-d] Fraction bar
>> 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.
>>
>> 3/2
>>
>> --
>> Alan http://css-class.com/
>I run your code and saw your demo, but I wanted a horizontal line.
I took Alan's sample and expanded on it to provide a horizontal line. I
haven't extensively tested it but it works well for me on FF3.5.
.fraction {
line-height:160%;
display: inline-block;
vertical-align: middle;
}
.fraction .divider {
color: transparent;
float: left;
clear: left;
border-top: 1px solid black;
width: 100%;
line-height: 0;
height: 0;
}
.fraction sup, .fraction sub {
font-size:75%;
float: left;
clear: left;
}
3/2
Mark
__
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/
Re: [css-d] Fraction bar
- Original Message -
From: "Alan Gresley"
> 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.
>
> 3/2
>
> div {line-height:160%;} /* or any other container *./
> sup, div sub {font-size:75%;}
>
>
> Demo.
>
>
>
I run your code and saw your demo, but I wanted a horizontal line.
Bill's solution works, but I have not finished yet to remake my sheets.
That done, I will communicate.
Eduardo
__
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/
Re: [css-d] Fraction bar
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 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.
3/2
div {line-height:160%;} /* or any other container *./
sup, div sub {font-size:75%;}
Demo.
--
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/
Re: [css-d] Fraction bar
This page might be of help: http://www.cs.tut.fi/~jkorpela/math/#fractions Just remember that in the quest to make fractions that look like they are from a math book you might succeed visually but fail miserably in terms of accessibility - not to mention what would happen if someone tried to copy and paste the text - into an existing sentence - which would yield: So let's talk about fractions - In the fraction 6 18 6 is the numerator and 18 is the denominator. A little confusing, no? -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ 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/
Re: [css-d] Fraction bar
- Original Message -
From: "Troy Harshman"
> also. Here's some sample code..
>
>
>
>
>.line {clear:left;}
>ul {margin:7px 9px 0; padding:3px; list-style:none;
> background:#eee; text-align:center; float:left;}
>li.numerator {border-bottom:1px solid #000;}
>p {float:left;}
>
>
>
>
>In the fraction
>
>3
>2
>
>3 is the numerator and 2 is the denominator.
>
>
>In the fraction
>
>1
>2
>
>1 is the numerator and 2 is the denominator.
>
>
>In the fraction
>
>6
>18
>
>6 is the numerator and 18 is the denominator.
>
>
>
>
Troy, I am trying to paste your code in my markup and style sheets.
Tomorrow I will not work in it, but on Saturday the page will have been done
or questions I will have to you.
Thanks !
Eduardo
__
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/
Re: [css-d] Fraction bar
Hi Troy, > Although it may not be the best application for lists, I think using > my method isn't too bad and it is attractive. It's a bit clunky, but > probably not as clunky as other options. The only issue I see is when > there is a lack of styles, you'll be looking at numbers in lists with > bullets. But, you'll probably run into this issue with other methods > also. Here's some sample code.. > > > 3 > 2 > I'm sorry, but I couldn't disagree more. This has nothing to do with a list, and the fact that CSS support is needed to make sense of this shows that it is a bad approach. Imho, with simple case like that we could go with: 3 above 2 >From there it should be "easy" to move things around, shoot the middle span off-screen and apply a border on one of the other span. -- Regards, Thierry | www.tjkdesign.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/
Re: [css-d] Fraction bar
- Original Message - From: "Bill Braun" To: Sent: Wednesday, January 20, 2010 11:27 PM Subject: Re: [css-d] Fraction bar > Eduardo, Norton Internet Security is reporting 47 virus threats coming > from this site. Are you aware of that? > > Bill B > Thanks, Bill, for the warning. My NOD32 antivirus system does not see anything special at my site, but I googled "freeservers virus" and found comments about Malware in pages hosted for free in freeservers, and false positives related with banners. Anyway, I will move my pages to another free hosting service. Thanks again, Eduardo __ 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/
Re: [css-d] Fraction bar
Troy Harshman wrote: > Although it may not be the best application for lists, I think using > my method isn't too bad and it is attractive. Try this, see if it works. http://www.w3.org/1998/Math/MathML";> 2 3 Bill B __ 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/
Re: [css-d] Fraction bar
Isn't this all more about markup than about style? Skip Knox Boise State University __ 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/
Re: [css-d] Fraction bar
Although it may not be the best application for lists, I think using
my method isn't too bad and it is attractive. It's a bit clunky, but
probably not as clunky as other options. The only issue I see is when
there is a lack of styles, you'll be looking at numbers in lists with
bullets. But, you'll probably run into this issue with other methods
also. Here's some sample code..
.line {clear:left;}
ul {margin:7px 9px 0; padding:3px; list-style:none;
background:#eee; text-align:center; float:left;}
li.numerator {border-bottom:1px solid #000;}
p {float:left;}
In the fraction
3
2
3 is the numerator and 2 is the denominator.
In the fraction
1
2
1 is the numerator and 2 is the denominator.
In the fraction
6
18
6 is the numerator and 18 is the denominator.
__
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/
Re: [css-d] Fraction bar
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 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. -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ 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/
Re: [css-d] Fraction bar
Del Wegener wrote: > I have been fighting these same issues for a several years and I am > convinced that the best method is to use images. Hardly. Using images for such purposes are the last resort and always come with problems, even if you define them with CSS settings that make them scale according to font size and provide adequate alt attributes. For example, any text in an image has a specific shape which practically always differs from the one in text characters. An "a" in your image is different from an "a" in your text, which is bad if they are supposed to be same variale. > You can see illustrations by looking at some of the examples on > http://www.drdelmath.com/intermediate_algebra/chapter_summary/intermediate_algebra_chapter1_summary.htm It should be easy to see some of the fundamental problems there. It is not easy to find any example of the use of fraction bar there. 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 "½". There are some _characters_ such as "½" that you can use in documents. Even a character for 2/3 exists in Unicode and is relatively well supported by fonts (even in Arial). So they might be suitable if you really want fractions. You can write e.g. the vulgar fraction 2/3 as a character in HTML using the reference ⅅ. Check out Unicode resources such as http://www.fileformat.info/info/unicode/ to find what's available. For some notes on using HTML and CSS for presenting mathematical expressions, check http://www.cs.tut.fi/~jkorpela/math/ There's no good approach to fraction slash issue, in cases where the vulgar fractions are not suitable. You would need to reduce the size of digits, which tends to make their lines too thin, and positioning the digits well with respect to the slash (whether you use "/" or the Unicode fraction slash character) in a cross-browser way might be mission impossible. In the OP's document, I would worry more about issues like using the proper minus sign (−) instead of the ambiguous hyphen-minus "-". (On a very ambitious web page, you would even consider using CSS, e.g. the vertical-align property, to position a minus sign well in the vertical direction. It should be obvious that e.g. if a−x looks good, then A−X won't, since lowercase and uppercase letters would require different vertical position for the minus.) -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ 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/
Re: [css-d] Fraction bar
> http://www.cs.tut.fi/~jkorpela/math/#fractions
>
> Their recommended solution (#8260 is the "fraction slash" character):
>
> .above, .below { font-size: 70%;
> font-family: Verdana, Arial, sans-serif; }
> .above { vertical-align: 0.7ex; } .below { vertical-align: -0.3ex; }
>
> 5⁄8
I have had good success with this as well. It is a pretty decent method that
does not break your line spacing.
An alternate method that I've also used is:
.sup {
font-size: 0.67em;
position: relative;
top: -0.33em;
}
.sub {
font-size: 0.67em;
position: relative;
bottom: -0.2 em;
}
An example using inline styles can be found here:
http://www.hairydogdigital.com/samples/fraction.html
That example uses a standard forward slash (solidus). A better appearance
can be gotten using a fraction slash (u2044).
...Rob
Rob Emenecker @ Hairy Dog Digital
www.hairydogdigital.com
Please note: Return e-mail messages are only accepted from discussion groups
that this e-mail address subscribes to. All other messages are automatically
deleted.
__
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/
Re: [css-d] Fraction bar
> I am Eduardo, from Buenos Aires. > I have a site at > > http://notasdematematicaelemental.7p.com/matel_ejemplos.html#PotenciaDefinicion > > and I want to write numbers like 3/2 with a fraction bar, ie 3 > > 2 > > Does anyone know how to do it? > > Thanks > Eduardo Eduardo; I have been fighting these same issues for a several years and I am convinced that the best method is to use images. I create the fraction in MS Word with the MathType add-on, then use Snagit to create a gif file and insert that in the HTML document. You can see illustrations by looking at some of the examples on http://www.drdelmath.com/intermediate_algebra/chapter_summary/intermediate_algebra_chapter1_summary.htm Since my advice does not involve CSS, if you want more information, contact me off list. Del d...@delweg.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/
Re: [css-d] Fraction bar
Eduardo Varela wrote: > Hi, first time I write here. > I am Eduardo, from Buenos Aires. > I have a site at > > http://notasdematematicaelemental.7p.com/matel_ejemplos.html#PotenciaDefinicion > > Eduardo, Norton Internet Security is reporting 47 virus threats coming from this site. Are you aware of that? Bill B __ 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/
Re: [css-d] Fraction bar
> On Wed, Jan 20, 2010 at 7:23 PM, Eduardo Varela wrote:
> > Hi, first time I write here.
> > I am Eduardo, from Buenos Aires.
> > I have a site at
> >
> > http://notasdematematicaelemental.7p.com/matel_ejemplos.html#PotenciaDefinicion
> >
> > and I want to write numbers like 3/2 with a fraction bar, ie 3
There is good coverage of the options for doing this here:
http://www.cs.tut.fi/~jkorpela/math/#fractions
Their recommended solution (#8260 is the "fraction slash" character):
.above, .below { font-size: 70%;
font-family: Verdana, Arial, sans-serif; }
.above { vertical-align: 0.7ex; }
.below { vertical-align: -0.3ex; }
5⁄8
Craig
__
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/
Re: [css-d] Fraction bar
I think your best bet would be to use lists. I threw this code
together really quick and it looks good to me. Likely will need to be
tweaked to meet your specific needs, but it's a start.
ul {width: 8px; list-style:none;}
li.numerator {border-bottom:1px solid #000;}
3
2
On Wed, Jan 20, 2010 at 7:23 PM, Eduardo Varela wrote:
> Hi, first time I write here.
> I am Eduardo, from Buenos Aires.
> I have a site at
>
> http://notasdematematicaelemental.7p.com/matel_ejemplos.html#PotenciaDefinicion
>
> and I want to write numbers like 3/2 with a fraction bar, ie 3
>
> 2
>
> Does anyone know how to do it?
>
> Thanks
> Eduardo
> __
> 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/
>
__
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/
[css-d] Fraction bar
Hi, first time I write here. I am Eduardo, from Buenos Aires. I have a site at http://notasdematematicaelemental.7p.com/matel_ejemplos.html#PotenciaDefinicion and I want to write numbers like 3/2 with a fraction bar, ie 3 2 Does anyone know how to do it? Thanks Eduardo __ 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/
