Styling Unknown Markup

Jacob Farber jacob.farber at
Mon Nov 10 14:45:02 UTC 2008

Just to add another side note:perhaps it would be a little clearer if we
showcased the results one feature at a time - the current images are a
little jarring!

On Mon, Nov 10, 2008 at 9:43 AM, Jacob Farber <jacob.farber at>wrote:

> Are you sure all these images are up to date?
> If I remember correctly, the "uPortal example with high contrast,
> font-size 140%, Verdana, wide text spacing:" resulted in a very different
> look. It should show the icons replaced with white blocks, and a consistent
> high contrast appearance... I could be wrong.
> Jacob
> On Mon, Nov 10, 2008 at 9:34 AM, <michelle.dsouza at> wrote:
>> Hi,
>> One of the many tasks associated with the work of UI Options is the
>> ability to style unknown markup. Jacob and I have been experimenting
>> with our high contrast skin and some of Fluid Infusion's in context
>> examples to find out how much we can do without knowing anything about
>> the markup.
>> As we expected, there were many places where CSS collisions resulted
>> in a page that had styling issues. We knew that we were going to hit
>> some of these issues given the experience of the Transformable
>> project. We also know that if the user provides us with contextual
>> information about the markup we can do a better job of restyling the
>> page. What we are trying to do is the best possible job with no
>> additional information.
>> The five issues that remain after our changes to the existing high
>> contrast skin are:
>> 1. font size in form controls was not adjusted
>> This is an area that we still need to do some research and
>> experimentation.
>> 2. font sizes that had been specified using pt, px, x- were not adjusted
>> This is because we are using relative sizing for fonts. We think this
>> is a better way to go and perhaps the answer here is to advise the
>> integrator to also use relative sizing for their out of the box CSS.
>> 3. icons that were background images on empty anchors were removed
>> We felt that the heavy handed approach of removing background images
>> was appropriate for a high contrast skin. This will not be appropriate
>> for our other skins so the larger issue of background and foreground
>> colours will need to be dealt with as we move forward. In this
>> particular case, we could use a strategy of adding the 'alt text' of
>> an empty anchor to the UI when we remove the background image.
>> 4. iframes were not restyled
>> We can solve this by finding the iframes in the page and injecting the
>> required style-sheets and class names.
>> 5. things that were styled using important were not adjusted
>> There is not much we can do about this given the rules of CSS. Likely
>> the only option here is to implement a hinting strategy where the
>> integrator can provide us with more information about the markup.
>> You can see the results of our experiments on the wiki.
>> Michelle
>> _______________________________________________________
>> fluid-work mailing list - fluid-work at
>> To unsubscribe, change settings or access archives,
>> see
> --
> Jacob Farber
> University of Toronto - ATRC
> Tel: (416) 946-3002

Jacob Farber
University of Toronto - ATRC
Tel: (416) 946-3002
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <>

More information about the fluid-work mailing list