danaleeling

Starting with Ubuntu 10.10 the Ubuntu font famil y, designed by Dalton Maag , was rolled out. Ubuntu font is a sans-serif font reminiscent of Trebuchet MS , especially in the small tail on the lower case letter L. This may reflect the hand of Vincent Connare who had worked on Trebuchet MS for Microsoft and is now with Dalton Maag. The letter widths and spacing varies slightly from Trebuchet MS, but the two fonts remain close enough to be used in a CSS font stack as substitutes for each other. On pages such as a syllabus that is actually a complex SVG diagram in HTML delivered as text/html (HTML5 if you will), having a font that will interchangeably behave in a consistent way between Ubuntu and Windows is critically useful. The office desktop on which I develop is a Windoze box, while the student laboratory is Ubuntu 11.04 . Student laptops are also typically Windows boxes along with the library desktops.

For some time now I have used the SVG foreignObject in XHTM L to control the layout of a combination table and graph that I sometimes use for physical science tests . The HTML foreignObject in XHTML requires the presence of the html, head, and body elements. In fact, the foreignObject carries its own XML namespace. A fragment of a valid XHTML file with an HTML foreignObject can be viewed in the source of quiz 114 . Note that the XHTML file includes the html element, the head element, and the body element. Recently I shifted from XHTML to HTML as I suspect that the future belongs to HTML. Valid HTML requires removal of the namespace declarations. Removal of the namespace alone, however is not sufficient to obtain validation. To obtain valid HTML, currently referred to as HTML5, one has to remove the html, head, and body elements from the HTML foreignObject inside the SVG that is within the HTML. Confusing? Maybe not to those new to HTML5. I was confused a few years ago when I foun...

A younger colleague was wrestling with a getting a multi-part numbered list to number sequentially across the multiple parts. The result was a wrestling match with Microsoft Word 2007 . Even in Oracle OpenOffice.org or The Document Foundation LibreOffice.org one can get into battle with ordered lists. Being older, I fondly remember the Reveal Codes setting in WordPerfect 5.1 . I gather that Corel Office X5 not only continues to offer WordPerfect replete with Reveal Codes but also has the option of returning to the traditional white text on a blue screen . Although one can show hidden characters, this is a pale shadow of what Reveal Codes makes possible. When I know I am going to want absolutely dictatorial control of complex formatting I switch to hand-crafted HTML + CSS. Once upon a time HTML was the unruly, unmanageable child of the formatting kingdom. Cascading Style Sheets has brought order to chaos. With CSS providing management tools, HTML itself is the ultimate Reveal ...

With the laboratories at the core of the SC 130 Physical Science fall 2010 curriculum, I ran a survey on which was their favorite laboratory and which was the laboratory they least liked. The laboratories are now gathered into a single HTML5 text that includes SVG and MathMl served as text/html (not XHTML5). As of the writing of this blog only FireFox 4 beta series can render both the SVG and MathMl. This fall the laboratories included the following topics. Laboratory one: Density of soap Laboratory two: Velocity of a rolling ball in the gym parking lot Laboratory three: Acceleration of gravity by dropping a ball in lab Laboratory four: Momentum of marbles on a ruler track Laboratory five: Force, stretching an elastic band using a cup of marbles Laboratory six: Heat, the conduction of heat by materials connecting Styrofoam cups Laboratory seven: Earth, latitude and longitude, meters per minute Laboratory eight: Clouds, drawing a cloud Laboratory nine: Sound:, clap...

Outlines are important information structures. We all spent time in English class learning I.A.1.a.... Outlining is considered an important skill because outlines are useful. In the world of the web generating complex book length outlines is not trivial. HTML5 added new elements for which one function would be improved generation of automatic outlines. I knew that HTML5 also includes a new outline algorithm , but I had not tried to built a conforming document. My ethnobotany text , at ten chapters and 6000 lines of HTML was an ideal candidate for being structured under the new algorithm. The text book actually existed only as an OpenOffice.org document, but the holiday provided an opportunity to convert the document to HTML, clean-up the code into valid HTML5 code , and build in the new outline algorithm. To automatically build the outline from a properly constructed page, one needs a modern browser such as FireFox or Chrome and an HTML5 algorithm aware outliner such as ...

Back on 12 April 2008 I built an HTML page with SVG served as text/html off of the college server. At that time the page could only be rendered by Amaya 10 . This past June Mozilla Developer Preview 3.7 alpha 5 rendered the page with namespaces still present. I removed the namespaces and added a MathMl chunk and the page both renders and validates . A check of FireFox 3.6.6 with html5.enable set to true also renders the page . FireFox 3.6.6 with html5.enable set to true The complication comes with foreignObject. A similar page renders correctly in FireFox 3.6.6 with html5.enable set to true as seen above, but does not correctly render in Mozilla Developer Preview 3.7 alpha 5 .The page renders everything except the SVG that follows the HTML foreignObject inside the SVG chunk as seen below. Note that not only is the SVG not rendered, but (off-screen in the image below) the HTML that follows the SVG with the foreignObject is NOT styled by the CSS. Mozilla Developer Preview 3.7 alpha...

Mozilla Developer Preview 3.7 alpha 5 brings support for animateMotion  to web pages. An animation of a ball bouncing once on a parabolic bounce can now be achieved with a single, short path statement. Achieving accelerated motion appears to require a good deal more work, but the basics for animated physical science diagrams are in place. Opera and Google Chrome already support SVG animation, however the college systems use FireFox, thus Mozilla support for SVG is critical. With the ability to animate diagrams, students in remote locations on links too narrow for video can better understand the laboratory experiment to be done. While the course laboratories are not yet all designed to be done "from home" there are a significant number that can be done on minimal equipment. Although the exercise remains theoretic, the hypothetical is whether the course could be remotely delivered to an isolated atoll such as Woleai . For most institutions there is no need to consider such a...

XHTML is dead, long live HTML! Namespaces made a lot of sense, but the unforgiving nature of XML led to slow mainstream uptake and ultimately contributed to the demise of XHTML. Mozilla Developer Preview 3.7 Alpha 5 renders MathMl and SVG in HTML sent as text/html. The HTML5 specification inlcudes MathMl, SVG, and character entities. Rendering was limited to Amaya and Mozilla nightlies until 3.7a5 was released. With 3.7a5 available, a page I first assembled on 12 April 2008 can be rendered. The page was based originally an XHTML5 page on which I stripped out the namespace declarations back in 2008. Almost as amazing to me is that the page validates on validator.nu . Opera 10.53 renders SVG in XHTML5 delivered as with namespaces sent as application/xhtml+xml, but not SVG in HTML sent as text/html. Google Chrome 5.0.375.70 is also not able to render the SVG in HTML. Both Opera and Chrome do render the HTML and text elements in the SVG and MathMl chunks. Microsoft is also g...

This summer I wanted to merge my index of physical science activities into a calendar grid format with hyperlinks to the relevant files. And I wanted lines and circles that would connect different cells. This later-most requirement effectively ruled out HTML tables because tables resize and SVG lines connecting circles in different cells would not resize. As the final product would still be hard copy to hand out in class, another goal was to put the five pages of information on the index onto a single page. An experiment I did this summer for the summer run of the course worked well enough that I am playing with the concept for the fall calendar. Spacing is tight and font-dependent, but as my goal is simply to produce something I can use I only have to make myself happy. Philosophically, the result looks like a table and yet underneath it all it is but a set of random lines and drawings. This means that there is absolutely no way someone who is blind could ever determine what the ...

I am building my SC 130 Physical Science summer calendar in XHTML5. The calendar is a work in progress and will evolve continuously throughout the term. Not all features are operational as yet. The beast is done completely in XHTML5 using SVG to build the first table. This was necessary to get the graphic effects used for the written labs. I am certain this will take some explaining to the students day one - I will print the page out and hand it out as a syllabus and calendar. The effort is probably greater than the payoff, this is a one-off just to see if I could make a concept become a reality in XHTML5. In the same vein as Mark Twain noted, those of us who are not paid to code find a relaxing hobby in coding. The tool used to build the page is nothing more than a text editor, specifically NotePad++ on Windows which color codes the XML making finding errors easier. On Ubuntu Linux I use the Gnome gEdit which also color codes.

I have been enamored of the semantic web for over a decade. I still retain old Dublin core metadata on my courses home page from the days long before the abbreviation RDFa existed. Dublin was hard, requiring special effort or a tool to generate the necessary code. I have watched from the sidelines as microformats has slugged it out with RDFa and the accessibility community. Both seemed complex, with a steep learning curve for minimal gains for my target audience - my students. Achromats (a genetic color blindness that runs in the Pingalapese population, see also Island of the Colorblind ) need an alternate style sheet that reduces the contrast, not RDFa for screen readers. And I have that available for many of my pages. A recent article by Mark Pilgrim on a third way caught my eye not because of the accessibility argument but rather providing metadata information to search engines such as Google. Although one is clearly carrying water for Google, the Netscape image t...

I wanted to have a rolling ball move along a surface while a time versus distance graph plotted the time and position of the animated rolling ball. After looking over Animating Your SVG by Charles McCathienvile at Dev.Opera  I felt that animating attributeName="d" in the path element would produce the desired effect. The ball, meanwhile, would be animated using animateMotion and an mpath child element.  The resulting SVG animation failed to run in Google Chrome 4.0.249.43 but worked very nicely in Opera 10.10 . This was a puzzle, and disappointing. My target is Ubuntu 9.10 computers running FireFox 3.5. Unfortunately not even Gecko 1.9.3/FireFox 3.7 will support animateMotion. Google Chrome, however, will run on Ubuntu 9.10, and is in place on some of the machines already. So a Chrome friendly solution, which might also run in FireFox 3.7, was desired.  The animation works as I expected in Opera, but failed in Chrome. The "d" path line appears instantaneo...

An article on the CSS animation reminded me that the last time I tried SVG animation browsers could not yet render the animation. Realizing the standard dated back to 2003 , Knowing that the CSS animation effort involved concepts and even commands that paralleled SVG animation - both having roots in SMIL animation, I realized that SVG animation might have landed in the wild.  A quick look see found that while FireFox 3.5 could not render a simple animation I had thrown together,   Google Chrome could. This reinforced my sense that Mozilla has moved forward more slowly on the SVG front since FireFox 1.5, pushing ahead instead on CSS3, Canvas, and technologies such as TraceMonkey. With Chrome not yet rendering MathMl, SVG animation in Chrome is deficient for physical science diagrams.  Gecko 1.9.3 will include some animation capabilities which may land in FireFox 1.7, but the critical animateMotion that I used in my simple colliding marbles diagram is...

I have a regular need to quickly draft up quizzes which include xy scatter graphs. Due to bandwidth issues, I prefer to use XHTML5 + SVG to create a single file that includes the charts. An upside to this approach is that I can easily edit old code to create new quiz questions for future use. To facilitate this process I use an OpenOffice.org Calc spreadsheet to generate the initial code. Then I copy and paste the generated code to NotePad++ to remove the tabs and perform final tweaking of the SVG. This approach works well for statistics quizzes , and for physical science quizzes which often also include MathML. Note that the physical science quizzes use a variant of the spreadsheet which includes a wider variety of data point symbols.

The construction: <colgroup> <col width="300" /> <col width="70" /> <col width="70" /> <col width="70" /> <col width="70" /> <col width="70" /> </colgroup> is no longer legal HTML5 nor XHTML5 (see attributes table ). I needed pixel level width control for the bubble form used in my Gravic Remark Office OMR test. I prefer to have valid pages, so I needed a work-around to the above XHTML code. I knew that the solution lay in using CSS, and I opted to use CSS 3 which let me use an nth-child construction in the bubble.css file to mimic the above HTML 4.01 code: table {border:thin solid red;width:655px} td:nth-child(1) { width:300px } td:nth-child(2) { width:70px } td:nth-child(3) { width:70px } td:nth-child(4) { width:70px } td:nth-child(5) { width:70px } td:nth-child(6) { width:70px } The 655px table width is not an oversight. Although the col widths add to 650, some deep and...