xhtml – nivas,b:=log()

Inconsistent behaviour of default browser tooltip

seven — Fri, 11 Dec 2009 00:34:48 +0000

I’ve had some spare time before bedtime to put into digital form something what I discussed with the guys at the office – inconsistent cross browser behavior of default tooltip functionality.

First, a little introduction to the subject of tooltips:

The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear — a small “hover box” with information about the item being hovered over. (Wikipedia)

In your regular computer usage, you see tooltips every day (all day) and chances are that you don’t even notice them anymore. All browsers display the title attribute of an HTML element as a tooltip when a user hovers the mouse cursor over that element. Some browsers will also display the alt attribute of an image as a tooltip in the same manner (if a title attribute is also specified, it will override the alt attribute for tooltip content).

On the wide spaces of world wide web you can also find custom generated tooltips (eg. in javascript or Flash or just by absolutely positioning of elements via css), but they are not the subject of this post. I did my fair share of tooltips in different Flash projects I was working on, and each time we did a new tooltip type, we tried to make tooltips an integral part of visual part of design having in mind usability.

From user stand point – I never paid too much attention to browser tooltips. Probably because I got used to them. If website I am visiting is done well, if I hover something (probably an image) – a default browser tooltip will appear over that element. That usual and expected behavior was enough for me to put browser tooltips somewhere in back of mi mind. But, recently something about tooltips started to bother me and I couldn’t pinpoint it.

Just around the time when we were working on release of Globus portal, I finally did figure out what was wrong with tooltips – tooltips in Firefox to be exact.

Firefox (tested on 3.5.5) has a nasty bug which causes hovered element to fire up onmouseout event when you rollover a default browser tooltip which that element invoked. When you rollout of the tooltip (because tooltip disappears), the browser element fires onmouseover event again, and that can cause some really nasty behavior.

Firefox 3 tooltip bug
[flash https://www.nivas.hr/pub/default-browser-tooltip-bug/firefox.swf w=321 h=274]
(i’ve recorded this behaviour. you’ll need flash player to see the video. if you can’t – try MOV or AVI file.

On Globus that bug caused so much problem in elements which change layout when you hover them – that we had to remove title tags completely. And that from SEO standpoint is a BIG inconvenience. I’ve tested tooltips in all browsers, and AFAIK only Firefox 3.5 (Win) tooltips are “working” that way. I’ve submitted this bug to Bugzilla so will see what they’ll say about it.

While doing tests in browsers I had around (Firefox, Safari, Chrome and IE8), I’ve noticed another inconvenience. Not a single browser did not displaying the tooltip the same way.

I’ve put up a little html demo for you to test by your self (ignore my css ‘skills’). The ‘demo’ contains one div with image inside it with a link. If you hover the image, the link’s title will show up in a default browser tooltip. Take notice how tooltip:

appears when you roll over element
disappears when you roll out
behaves when you move around element
behaves when you try to rollover the tooltip it self

You will notice that not a single respected browser currently available on Windows is not displaying tooltip the same way.

Chrome 3 toolip
– lazy (shows and dissapears with an delay), you can rollover it with your mouse without any side effects. The fact that you can rollover tooltip in combination with rather long hide delay can be inconvenience.
[flash https://www.nivas.hr/pub/default-browser-tooltip-bug/chrome.swf w=321 h=274]
(MOV | AVI)

Internet Explorer 8 toolip
– pretty standard windows based tooltip behaviour. if you hover a tooltip – it will disappear which I think it’s best behavior.
– has a nasty habbit of blinking two times when you hover an element. it doesn’t produce other nasty effects to dom events
[flash https://www.nivas.hr/pub/default-browser-tooltip-bug/ie8.swf w=321 h=274]
(MOV | AVI)

Safari 4 toolip
– has a nasty habit of disappearing and reappearing while you are still hovering the element. it doesn’t produce other nasty effects to dom events
[flash https://www.nivas.hr/pub/default-browser-tooltip-bug/safari4.swf w=321 h=274]
(MOV | AVI)

I haven’t tested Opera on purpose. It’s market share is just too low. :-(

I have no idea why not a single web browser doesn’t have tooltip behavior configuration setting like follow mouse, delay in ms, different show/hide effects etc. I think that would be cool. :)

Feedback is welcome!

IE is Being Mean to Me… again

seven — Fri, 27 Nov 2009 15:04:34 +0000

Composed and performed by Scott Ward from with.us expirienced by all of us. :)

Letter Đ mistery – Ð!=Đ and ð != đ

seven — Mon, 27 Oct 2008 14:14:09 +0000

We spent couple of hours trying to figure out this one, so we decided to share it with our fellow readers and hopefully, save some time and unnecessary stress for them. UTF-8 is defacto standard encoding for multilanguage websites. PHP5 doesn’t have native support for it, but you can integrate it. MYSQL supports utf8, but not utf8_croatian_collation. But you can also hack your way around that for sorting. If you are not dealing with Croatian letters and UTF-8, you probably won’t encounter this problem. However, if you ARE using UTF-8 read on!

We are redesigning one large website and naturally, some content from old website has to be migrated to new site. Since we don’t have access to their database, we have to manually copy content from old website’s HTML source. Client’s old site is in UTF-8. Imagine following entry in old HTML source:
[ftf w=”480″ h=”105″][/ftf]
This is a select tag with list of cities in Croatia, the city in example is Đakovo. So as I said, we are copy-ing large amounts of data from old HTML’s, and we do not care why old site displays this city as “Ðakovo” and not as “Đakovo”. After we pasted “Ðakovo” into our engine, we momentarily started to get all sorts of different errors. The most bizare one was comming from our utf8_strtolower function which had to return string “đakovo”. Instead it was returning string “ðakovo”. Wicked!

After some digging, we found out that there was nothing wrong with our utf8 php methods nor our mysql database. We found out that the letter Ð (hex d0 00) we pasted from HTML was just not the letter Đ (hex 10 01) we needed. Somebody (or something) very brilliant, used letter Eth instead of standard Croatian letter D with stroke.

Eth (Ð, ð; also spelled edh or eð) is a letter used in Old English, Icelandic, Faroese (in which it is called edd). In the Unicode universal character encoding standard, upper and lower case eth are represented by U+00D0 and U+00F0. These code points are inherited from the older ISO 8859-1 standard. In HTML, eth is represented by the Latin character entities Ð and ð.

Đ (lowercase đ) is a letter of the Latin alphabet, formed from D with the addition of a bar or stroke through the letter. This is the same modification that was used to create eth (ð), but eth is based on an insular variant of d while đ is based on its usual upright shape. In Unicode the letter is represented as U+0110 LATIN CAPITAL LETTER D WITH STROKE and U+0111 LATIN SMALL LETTER D WITH STROKE.

So there you have it. No matter the letters look the same, beware what you copy/paste. :)

Google improved Flash crawling… but why?

seven — Wed, 02 Jul 2008 02:53:33 +0000

Google has been developing a new algorithm for indexing textual content in Flash files. They teamed up with Adobe and improved the performance of Flash indexing algorithm. Stop cheering, calm down and continue reading. :)

This was a great news for Flash beginners but real problem lies a bit deeper inside complex Flash architecture which can’t be that easily indexed. No, this won’t magically bring SEO to your Flash website. No, this won’t lift your pagerank to a new heights. The algorithm it self has few rather nasty caveats which actually can, in my opinion, bring more confusion than good search results.

Even with new improvements, Google spider:

is not able to index text in additional flash content you may be loading (trough bootstrap loader with XML or something) and even if, by some miracle it does get indexed it won’t be connected anyhow to other crawled text content in Flash files you may be using on your website.
can’t really cope with different crazy javascript flash embedding techniques (eg swfobject and such)
doesn’t understand graphics and FLV’s

Knowing that and being hardcore Flash fanatic as I am, I contemplated a bit around Flash crawling concept. I can only speculate how Google crawls Flash these days, but I remember tool from couple of years ago called swf2html.exe shipped with Flash Search Engine SDK.I suppose search engines used that, for retrieving text from Flash files. The tool was not updated since Macromedia wrote it in 2002 but you can check it here.

Indexing Flash content by extracting strings of text from Flash files completely invalidates the purpose of Flash as a complex and feature rich presentation technology. Many parts of website are basically graphics with static text, or are dynamically loaded or generated. If you ignore that graphical-textual content (and you have to since crawler doesn’t have OCR), and index just a text content, the search engine user will get confusing, or even very dangerous results. Partially indexed misleading information is more dangerous than no information at all. Flash RIA applications in 99% cases use dynamically populated lists so I am not sure that Google will be able to crawl those sites either.

This is like having a tour guide, to guide you trough city in which he has never been before, and in country which language he doesn’t speak fluent. Thank you but, I think I’ll pass.

Correct my if I am wrong, but solution is pretty simple and it works great – If you are building Flash website, build an XHTML fallback version of the website. Google knows and loves valid markup structure and there are still many corporate users which can’t install (or upgrade) Flash because their system administrator is a noob. By having XHTML version you can even better control the content you want to get indexed and non Flash users will thank you too.

Embed this!

seven — Sun, 07 Oct 2007 11:27:38 +0000

New 2.0 beta version of SWFObject is out (previously known as flashobject, then swfobject, then SWFFix project). Over the years, it become the de-facto standard for embedding Flash/Flex content in xhtml friendly cross browser compliant valid way.

The new version is a complete rewrite from SWFObject 1.5, so it needs to be tested like hell before officially launch because it will replace the older SWFObject and UFO scripts. And since they have Adobe involved, they will be including this embed system in the Adobe authoring tools in the future. GREAT NEWS! Meanwhile, grab the beta from google code.

Interesting thoughts on precise front end development

mark — Mon, 19 Jun 2006 10:44:22 +0000

Have you ever sliced up your PSD layouts and turned them in to XHTML web pages only to find that the two are not equal (column widths are not right, margins and paddings are off…). I know it can be a great pain but there is a simple but effective solution to this problem that does not require constant print-screening. In the initial state of any design the foundations are made up of a grid based system. This means that a layout is first seen through mathematical building blocks. By doing this you can precisly predict user habbits like why should the navigation be on the left, the content on the right and so on..

Before you start coding, get your first draft grid system save it in any web safe format. Next you apply that image as a background image to your document body using CSS (remember this image is here only to assit you in setting up intial xhtml layouts). And thats it, you can now continue your development and not worry about breaking the original design.