« Web Essentials cleared for take off. Cabin crew arm doors and cross check | Main | of Google and browsers »

September 17, 2004

Best CSS ever

I love the stuff at the zen garden. I love what many designers do with CSS. It's beautiful, inspiring, wonderful stuff.

But I started life in science, have a degree in mathematics, and something I saw yesterday is perhaps the best thing I have ever seen using CSS.

George Chavchanidze a mathematician and theoretical physicist in Georgia (the country, not the state of the US) has a remarkable demonstration of some extremely sophisticated scientific typography.

Why I particularly like this is, on top of being a science and typography geek, is that it demonstrates the "deepness" of CSS. George has got from CSS a subtle power that I don't think anyone working on the original specification could have imagined it was going to be used for (I might be wrong of course).

The mark of really sophisticated technology, in my book at any rate, is that it enables things that no one envisaged. CSS is definitely such a technology.

Well done George, this, as much as any other demonstration of CSS, may spread its use to a much wider base.

September 17, 2004 | Permalink


TrackBack URL for this entry:

Listed below are links to weblogs that reference Best CSS ever:

» Formatting Mathematical Articles with Cascading Style Sheets from Karmakars.com
George Chavchanidze a mathematician in Georgia uses XML 1.0 markup to capture basic structure of math expressions and CSS 2.0/2.1 to specify their rendering. What a remarkable use of Technology. George Chavchanidze works in the Department of Theoretica... [Read More]

Tracked on Sep 18, 2004 11:53:16 PM


I'll agree that there are some good examples of the typographic powers of CSS in there. On the other side, isn't it what MathML is supposed to do ?

Posted by: Philippe | Sep 22, 2004 2:00:06 AM


I've seen this point made elsewhere.

MathML is a markup, not a presentation language. it is designed to allow you to markup mathematics in a semantic way.
MathML is an application of XML. XML based languages don't have any presentational aspects, so any document marked up as MathML will still need either CSS or XSL to style its presentation.
George's CSS will in theory work as well for MathML as it does for XHTML.

Why bother with XHTML at all? Why not go straight for mathML?

1. Support for MathML is pretty weak in most browsers.
2. when math content is used as part of a thesis or other paper, much of the content is strightforward text. It makes sense to use XHTML, and embed MathML in it (as made possible by the modularization of XHTML) where necessary.


Hope this helps,


Posted by: John Allsopp | Sep 22, 2004 8:51:28 AM

Did you have a look at George's page with CSS disabled ? One long string of text, without any semantics. I doubt that even the most dedicated scientist would understand it that way.

As for mathML being a markup language.... we do need markup languages. If you want to include tabular data in a document, you'll use markup that reflects the nature of that data (aka the table element and its partners).

And of course mathML needs CSS for styling - that is what CSS if for, isn't it ? XHTML without any stylesheets (without the UA stylesheets) wouldn't look much better.

Your main point is still important of course: illustrating the power of CSS for typographic purposes.

PS - as far as I could tell, only Opera 7.5 displays that document correctly.

P. (currently p*** off by the lack of support for inline-block and inline-table in Gecko browsers).

Posted by: Philippe | Sep 22, 2004 11:05:10 AM

Thanks for kind words.

Unfortunately I don't really believe in MathML for the number of reasons
explained below.
First of all I prefer to code web pages in text editor instead of WYSIWYG authoring tools.
Being extremely verbose MathML does not allow me to do it,
you may think that nowadays this issue is not relevant, but I strongly
believe that for markup language it is very !important to be human processable.
Or at least if one designs markup language that is not human processable
he/she has to make two things that MathML designers did not do
(if necessary I can give more detailed explanation):

1. To justify why it is necessary to use verbose syntax

The only explanation that I found is
"Part of the reason for designing MathML as a markup language for a
low-level, general, communication layer is to stimulate mathematical
Web software development in the layer above."
(quoted from http://www.w3.org/TR/MathML2/chapter1.html#id.1.3.1 )
For me it sounds like MathML was bloated to increase revenues of companies
that produce WYSIWYG authoring tools.

2. To ensure that semantics is clear and will not be abused by WYSIWYG authoring tools.

This is definitely not done, moreover mi-mo-mn tag soup
and other easy to abuse constructions like Ax
vs. Ax make MathML much more fragile
and vulnerable then other markup languages.

Second problem that is probably even more important then first one
is that MathML does not fit in general scope of web as I see it.
In particular whole web technology is based on several fundamental
standards like XML, Unicode, CSS, ECMAScript/DOM and the rest is
more or less expected to be based on this standards.
Markup language is expected to be XML application
that captures basic structure and general semantics of document,
and I assume that I can parse web documents with XML parser, render them
with CSS rendering engine and access parts of document via DOM.
If you look at MathML you realise that it does not fit well
in this scheme. First problems appears on parser level:
a. MathML parser and XML parser handle white space in different manner.
According to XML 1.0 spec (http://www.w3.org/TR/REC-xml/#sec-white-space )
"An XML processor MUST always pass all characters in a document that are not markup through to the application."
While according to MathML 2.0 rec MathML processor must strip spaces between tags
(http://www.w3.org/TR/MathML2/chapter2.html#fund.collapse )
So 5 x is treated as 5x by MathML parser
and like 5 x by normal XML parser.
b. Nonvalidating XML parsers stop on each MathML character entity,
I have no idea why XML application that is not human processable
needs character entities.

So even before displaying MathML in browser you gain three different
results depending on whether document was parsed by validating XML parser,
nonvalidating XML parser or MathML aware parser.

Next step is to format page in browser.
One of the purposes of markup language is
to capture basic document structure in the way suitable for
further formatting with style sheets.
If you look at MathML markup closely you will soon realise that
it is very difficult to design style sheets for it.
It is something like presentational XML based format that
relies on native browser side support instead of using flexible
formatting mechanism like CSS. It reminds me HTML3 when designers
had to use table layouts, font, center tags, spacer images and similar stuff
as they had no style language.

I hope that those times are gone and modern markup language
should be designed on different principles, like separation of style
and content, minimal dependance on browser side
support (this can be achieved by putting main burden on fundamental
standards like XML, CSS and Unicode), it also should be suitable for
manual coding (as WYSIWYG tools by they nature very poorly outline
document structure and often abuse semantics) and be extensible
(as one markup whatever it is can not address interests of whole community).
All these principals are very !important and apply not only to XML based markup languages.
Look for instance at LaTeX. It's main power and its success relies on
two important things: extensible human processable markup and
effective formatting mechanism. Without powerful formatting mechanism
(La)TeX would be nothing, no extensibility and no way to address interests
of large mathematical community with very diverse and sophisticated requirements.

It is !important to build markup language based on
principles mentioned above and too see whether mathematical
documents fit well in general scope of current web technology.
There are several principal questions that has to be answered.
Can XML play the role of extensible human processable
markup? How scientific XML applications should be designed
and how use existing and already implemented standards effectively?
Can CSS provide effective formatting mechanism for scientific documents?
These are main questions that must be answered and the purpose of
my site is to trigger discussion on THESE issues that IMHO are very !important
Currently markup and style sheets used there are purely
experimental, it is possible to write strict DTD and
reasonable style sheets for major browsers (in spite of many problems
with browsers due to CSS bugs, weak Unicode support, lack of Unicode fonts etc.).
but before writing more or less finished mathematical markup language
we still need to address a lot of technical problems.
I always ask both CSS community and mathematicians
to take part in this process because we all must know what we need to open web for scientific content and I think we actually need at least three things: metamarkup language (XML?) as extensibility is important, markup language (concrete DTD is also necessary to capture semantics and improve interoperability) and formatting mechanism (CSS?XSL?DSSSL?) as without it extensibility and web design become meaningless words.

To make my point clear I prepared small math gallery that contains simple sample page written in different markup languages languages and rendered with CSS http://geocities.com/csssite/gal.xml
(works in Opera 7 only).

Posted by: George | Sep 23, 2004 2:17:39 AM

This is definitely not done, moreover mi-mo-mn tag soup
and other easy to abuse constructions like Ax
vs. Ax make MathML much more fragile
and vulnerable then other markup languages.


Posted by: minekrdo | Mar 22, 2005 11:02:50 PM

I probably meant
msubmiA/mimix/mi/msub vs.
(unescaped tags were removed by blog software)

Posted by: George | Mar 31, 2005 1:57:05 AM

This is extremely helpful info!!! Especially since you guys are offering it for free!! Very good listing. Everything is true. Thanx.

Posted by: UK thesis | Aug 4, 2009 8:07:22 PM

Extremely long but very useful and informative article. How i wish i can do all of that in a short period of time. But for sure doing those will produce results. I will try to spread your words through my blog and link it back to you. Thanks a lot for those tips.

Posted by: thesis writing | Aug 13, 2009 9:14:27 PM

Could you run that by me again?I've gotta catch the bus

Posted by: Supra Skate | Nov 3, 2010 12:27:53 PM

Because good product itself is the best promotion

Posted by: Supra Vega | Nov 3, 2010 5:17:05 PM

Awesome - was looking for sports betting stuff when I found this. Nice job man!

Posted by: nathan exhibits | Dec 24, 2010 5:52:37 PM

This type of information is very limited on the internet and its good to see people sharing this type of stuff through their blogs and I am thankful for that. Thanks for sharing.

Posted by: adult diapers | Dec 27, 2010 8:52:21 AM

I really admire the authors contribution to this blog. He has done a fab job. The author really knows his job well. Thanks for sharing this great piece of work. Keep up the good work.

Posted by: bard catheters | Jan 4, 2011 6:38:21 AM

Fantastic. That's one brilliant blog. I just love reading these types of quality blogs which provide knowledge and information to the readers. This is one of the best blog I have ever come across. Thanks for this wonderful share.

Posted by: mobility scooters | Jan 8, 2011 6:50:01 AM