07 September
There was need for the id attribute on the root element
Since we style the root element in XML, there was a certain need for the id attribute on the html element in XHTML1.1. Unfortunately the W3C only changed this in XHTML1.0, but not in the modularization of XHTML, where XHTML1.1 spawned of.
Two items back a user asked me for an id attribute, so that he could style me page the way he wanted, though I think it was a kind of a joke, this can be handy. I had applied it on the body element, but that was not really useful for him since I use XML and the root element should be styled.
So I learned a little bit about DTD and came up with the following solution:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/DTD/xhtml11.dtd" [
<!ATTLIST html
id ID #IMPLIED
>
]>
Internet Explorer é however didn't support this and I don't like IE for Windows, don't get me wrong, but this could be easily solved, by downloading the DTD and adding this rule at the top. I still validate, I didn't expand my DTD with font or u, just one little attribute that can be really valuable. If Even Goer still read my weblog he could say that I validate as: "XHTML 1.1 + id on root".
This topic was BTW earlier discussed by me, you can find that one here: <html id="">.
06 September
We will need want it.
Markup languages are nice to work with. But when you finished your project and you know XHTML, you want more, eventually. You would like to create a markup language of you own and give it to the W3C as a 'gift'. These projects take a lot of time I think, if you look at XHTML2.0 for example, but eventually it is a recommendation and it could be used by others.
The only thing I don't know is if you actually can donate a markup language to the W3C, or do you need to be a member (there are probably more things I haven't thought about)? If all is possible I would like to create CodeML together with other interested people. This markup language could easily be embedded within a XHTML document just like MathML and there could be a server-side transformation to 'real' XHTML elements for browsers that don't support modularization.
The language should have its own DTD and an XML Schema (more important formats?). So it can already be used with the modularization of XHTML and is forward compatible with the modularization of XHTML in XML Schema. If such a markup language is being developed and nice tools are made for it, we can show the world the advantages of XML (as in XHTML). Maybe it's not ready for client-side deployment (although not in every browser), but such a markup language could have it uses. Only think of all the .phps files or script highlighter projects. They could now have a language to support and are not stuck with using useless elements (like spans).
I searched Google for CodeML and I found two projects related to that matter, but they don't seem to updated frequently:
XPL is not what I was looking for I think, but the CodeML project has done some things already, like creating examples of use and application files. I don't know how to start a thing like this (I should have read more Sam Ruby and Mark Pilgrim I presume), so I'm asking you (its ok if you point me to the fact that I shouldn't do this ;)). What I do know, that if XHTML files are more of common use and embedding external specifications is becoming normal; the question for a semantic web will be bigger (and we will be hapier).
Of course I could question myself if you start such things at a normal weblog, or that you should start a thread at the mailing lists of the W3C. I do thing that the latter is busy enough with writing specifications for the web community from which we all benefit and making test cases (of course!). So weblogs are maybe the way to promote new standards and possibilities.
The design
Since the conversion to Movable Type is taking more time than I thought, I wanted to release the design and later make the conversion to Movable Type. The design is created by Arthur Steiner, with whom I have a company. He also did all the wonderful PNGs.
I must say that the design could have been a lot more 'designed', but I didn't want that. I am a minimalist (I think) and I care about Kilobytes :). While the design has changed I also make use of the xml stylesheet Processing Instruction and it works great. I still send my pages as application/xhtml+xml to browsers who have this in their accept header (not to Opera, or the validator (yet)).
If you are a IE user, you will see that my header is 'screwed' in your be loving browser. Please switch to Mozilla if you care about it. My site could have worked in IE if I wanted that. The reason it doesn't work is that I didn't want to limit the markup or use ugly hacks. This is how the site will be and it looks a lot better than the previous design. Even if you browser doesn't support PNG.
I have used object to demonstrate a use for it. If you browser would support the standards correct and it doesn't support PNG, you should see the alternate text within the object element, carefully styled with CSS.
The JavaScript sidebar, which works terrifically in Mozilla can be used on any site, just copy the right function for that. Share you thoughts if you have any.
O, special thanks to Egor Kloos for his comment yesterday. Thanks to his idea with the header, I also wiped a div out at the footer.
05 September
PNG, object and IE
My new layout supports the first two and not the last unfortunately (I am talking about IE for Windows if this may be unclear). PNG works great for me, with PNG the font for the header still looks good and can be made transparent, so I can always implant a style switcher if I want, since the title and logo graphics are black.
I currently use (on the beta version) object to embed the PNG for the logo, like this:
<div id="header">
<a href="/weblog/" rel="bookmark">
<object data="logo.png" type="image/png" height="70" width="70">
<h1>
<a href="/weblog/" rel="bookmark">Weblog about <strong>Markup</strong> & <em>Style</em></a>
</h1>
</object>
</a>
</div>
<h1>
<a href="/weblog/" rel="bookmark">
<object data="logo.png" type="image/png" height="70" width="70">
Weblog about <strong>Markup</strong> and <em>Style</em>
</object>
</a>
</h1>
IE would support this:
<div id="header">
<h1>
<a href="/weblog/" rel="bookmark">
<img src="logo.png" alt="Weblog about Markup & Style" />
</a>
</h1>
</div>
Using the object tag is obvious more semantic since I can use elements in the 'alternate' text. Besides that I can specify the MIME-type for the image, I more forward-compatible, more Google-compatible, only not IE-compatible. (Besides that IE doesn't support PNG (well)).
I would like suggestions of you:
- If you are an IE user, do you feel betrayed if I do this (I will do it if nobody complains ;))?
If you are a markup expert, is my object example really valid? (It validates, but I think it is invalid since the a element may not be nested.)Dutchcelt kept his head cool and gave me an easy solution. Thanks for that!
If you don't like all the 'line-troughs' just put this in you user style sheet: del{display:none;}
04 September
Markup is all about personal opinions
Markup seems easy, everyone can learn XML
. Once you learn more about markup you know less I think. Yesterday I made a post where a said that the i and b elements should be removed. I still think that, I'm not convinced by someone, but the arguments of the 'commenters' sounded correct. The arguments on the mailing list however also sound correct. So what should we use?
i and b are pure presentational, everyone knows that can have semantic meaning in certain circumstances, but in some cases words should actually be 'styled' italic:
Looking over the index entry for 'Italics' in my Chicago Manual of Style, I see that italics can be used for emphasis, foreign words, genus and species, key terms, legal cases, letters as letters and words as words, letters in enumeration, math, questions (as quotatives), rhyme schemes, ship names, stage directions, subheads, technical terms, theorems, and titles (of books, journals, movies, musical works, paintings, plays, and poems).
There are also examples for where you will need the b element to 'style' something boldfaced. These are probably the reasons they still exist within XHTML1.1 although there are of course also (good) reasons against these elements. Some people think span is useless with a class assigned to replace i & b, others thing that you could make a markup language just with span and classes. Maybe markup is all about personal opinions. On some points people agree. On the small things however, we all think different. And that's of course, 'cause we are human and we can think for ourselves (and some people just know more).
03 September
<b />, SVG and accessibility.
There are still people who think that <b /> has semantic meaning. It could have a little more semantic meaning than <span style="font-weight:bold;" />, 'cause you can style it aurally without the need of an extra class, but that's it. The element b just means 'bold' and what on earth is semantic on that word? Please tell me. It is exactly the same for the i element. You should drop it together with all your useless span elements.
HTML has the replacement for these elements before these presentational elements existed. How does that sound to you? strong and em should be used and these elements exist for a long, long time. Do not make the mistake to convert i to em only because they have the same visual rendering in most browsers. Markup is all about the content and not about visual rendering or 'what looks good'.
Today I came across another example of this. The width and height attribute still exist in XHTML1.1, which is okay in a way, but the possible values these elements can get are limited. I wanted embed SVG (with the object element) on my new layout and specify a height in the length unit em (do not confuse this with the element em). This is possible since CSS is integrated in SVG. The problem is that the width and height do not allow other values than percentages or pixels. So if I want to use a SVG and specify the length values with em it isn't possible within HTML, you would have to do this with CSS. My point is that these attributes should have been removed together with b and i, 'cause these are too limited or and this only counts for the attribute height and width, they should have been improved.
The reason I wanted to use SVG (which doesn't work in my copy of Mozilla, the plugin of Adobe seems only to be installed in IE) on my new layout is that I wanted to follow every single guideline of the W3C and still get the site working in as many browsers as possible, including IE (although I don't care about the graphical header working in every browser and the JavaScript, which only adds some extra fun, but nothing more). I almost achieved this, but the graphics 'kill' me. SVG just isn't ready for deployment on sites (even weblogs) I think. If the Mozilla SVG project was finished and there was proper SVG support I would have done it. Next to the right graphics I have to think about accessibility.
The accessibility guidelines have made a nice checkpoint slideshow. As it stands now (I think I can't use SVG) I fail a little on checkpoint 3.4: use relative rather than absolute units in markup language attribute values and style sheet property values. Unfortunately there is nothing I can do about that, since SVG support is minimal these days. 9.4 and 9.5: create a logical tab order through links, form controls, and objects & provide keyboard shortcuts to important links (including those in client-side image maps), form controls, and groups of form controls could be done of course, but it requires a lot of extra work (which should not be an excuse) and there are better CSS3 alternatives on the move. Also the attribute tabindex has a poorly chosen name, not every device has a 'tab' key. The W3C knows about this and it will be changed to navindex in XHTML2 (CSS3 has also a property called navindex).
General conclusion: my new site won't validate against everything (though it will validate against the XHTML1.1 DTD).
02 September
Summary of important things
A site which just entered the X-Philes, dionidium.com (created by: Wayne Burkett and J.S. Bell) has made the perfect summary of everything you need to have to be a fully qualified (über) X-Phile: What You Should Know about XHTML 1.1.
I tried to do this myself (though I kept missing things), but I think they have made a great post, especially for future reference. If you know someone who wants to be a X-Phile, just give him this link and they will be fine.
This time it may be good that comments are disallowed on a weblog, because the things stated there in that entry are not discussable and every point has a few links to other references where you can check these things again if you don't believe it.
Updates of this may stop for a few days while I'm converting to Movable Type. It is not possible yet since my (excellent) hosting provider did not have all the required modules installed, but they said they were working on it :).
01 September
Inevitable
Well it seems to be. I really like the tool I'm using now (Nucleus), but before everything will work, like short URIs and validating comments... I think that will take one to two years. Unfortunately I don't have the time to wait for such thing and I want to move on and focus more on my content (and company) than worrying about my weblog tool.
So I'll think I switch to Movable Type this weekend together with the "redesign". If anyone has any tips about converting my database, please give a comment. If you are thinking about comment validating yourself: read(!). If you want to use XML Schema (much better solution actually, anyone has plans to do something like this in Movable Type?): read(!).
The conversion will hopefully take place at the end of this week/weekend and all the permalinks will be broken :) I think, since my current weblog links to id's and my coming weblog will link to titles like: /archives/2003/09/01/inevitable.