RSS

Category Archives: gecko

Ellipsis in all Modern Browsers (Updated x5)

When you want to avoid that text in a web page wraps, you can use:

   overflow:hidden

However, it’s nice to show to users that some content is actually missing. This is typically done with an ellipsis character, that is displayed as three dots:

   ...

Getting this working across all modern browsers has always been a pain in the neck, but there is an easy solution a hack that works around the issue, to a certain extent. Note that Firefox 4 is not supported and neither will Firefox 5 be. Howevere

First, make sure you have a small ellipsis-xbl.xml file on your web server that is served with the content type text/xml, with the following contents:

<?xml version="1.0" encoding="UTF-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="ellipsis">
   <content>
      <xul:window>
         <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
      </xul:window>
   </content>
</binding>
</bindings>

Then mark all HTML elements you would like to show the ellipsis character on overflow with the class Ellipsis, e.g.:

   <div id="BreadCrumbs" class="ShyText Ellipsis">

Then add the following to your CSS:

   .Ellipsis {
      text-overflow:ellipsis;
      -o-text-overflow:ellipsis;
      -ms-text-overflow:ellipsis;
      -moz-binding:url(/ellipsis-xbl.xml#ellipsis)
}

Elaboration:

text-overflow
for WebKit-based browsers (Safari, Chrome, etc.) and for Internet Explorer 7 and before;
-o-text-overflow
for Opera;
-ms-text-overflow
for Internet Explorer 8 and 9;
-moz-binding
for Gecko 1.x-based browsers (Firefox 3.x or earlier, Camino, etc.)

Note that the text-overflow will be standardized as of the CSS 3 standard, which is currently still in draft. Firefox 6 may add support for it.

Credit for the Gecko solution go to Rikkert Koppes and William Khoe, see the article text-overflow: ellipsis for firefox.

Update (Oct. 22, 2008): The solution for Gecko-based browsers (Firefox, etc.) is far from perfect. The solution has at least the following issues:

  1. applying the .Ellipsis class to an inline element causes the element to disappear;
  2. in Firefox 3.0 (not in Firefox 2.0), soft hyphens inside .Ellipsis elements always show as dashes;
  3. text inside a .Ellipsis element can no longer be selected.

Update (August 11, 2009): Mozilla (in the person of Simon Montagu) is working on a solution, which may or may not go into Firefox 3.6/Gecko 1.9.2. Vote for bug 312156 if you think it’s important.

Update (August 13, 2009): Don’t expect the solution to go into Firefox 3.6/Gecko 1.9.2 (scheduled for release fall 2009), the bug has been tagged as “-wanted1.9.2” (starting with a minus-sign) meaning it’s not planned for the upcoming release. It may still go into Firefox 3.7, which is tentatively scheduled for release in 2010, see the Mozilla Project Meeting Minutes of July 20, 2009.

Update (August 24, 2009): Devon Govett provides a nice jQuery-based solution that at least allows you to resolve the issue when JavaScript is enabled. It works like a charm, at least on Firefox 3.5.2.

 
8 Comments

Posted by on 16 October 2008 in css, css3, ellipsis, firefox, gecko, mozilla, overflow, text-overflow

 

>Camino 1.6 released

>Camino 1.6 has been released. Camino is a Mozilla Gecko-based browser for Mac OS X.
Among other things, it now supports multi-touch gestures (if you have the right hardware).
This version requires Mac OS X 10.3.9 or higher and comes in different language-flavours, including Dutch.

 
Leave a comment

Posted by on 19 April 2008 in browser, camino, gecko, mac, macos, macosx, mozilla

 

>Color spaces in Safari and Firefox 3

>Since long, Safari 3 has supported support for color profiles (see the WebKit blog entry Color Spaces). Now the Firefox 3 betas also come with support for it, although it’s disabled by default.

To enable support for color spaces in Firefox 3 beta 4, do the following:

  1. Go to about:config
  2. Confirm you want to edit settings
  3. Set the option “gfx.color_management.enabled” to “true”
  4. Restart Firefox

Now check out some sites. Like with Safari 3, colors in sites may look quite different, since an extra step is applied to convert the colors from the original color space to the color space for your screen.

For web developers this smart behavior introduces some challenges, since sites now look different on different browsers on the same platform. Of note, Safari and Firefox implement color space support differently: Safari only adjusts images (such as PNGs), while Firefox also adjusts CSS colors.

So even between Safari and Firefox 3 with color space support enabled, there are differences, as reported in Firefox bug report #424356 (see the attached screenshot) Firefox seems to do a better job here than Safari, because with the latter the colors of different elements on a web page may mismatch, as can be seen (with Safari 3.1) on a website like http://www.route65.eu/.

For web developers, here’s a pragmatic approach:

  1. make sure your images do not include a color profile (saves ~4KB)
  2. do not specify colors in CSS if there is an image that needs to match the color, instead use a dot image with the exact same color

Still your site will look different on browsers with or without color space support, but at least you work around the problem in Safari 3.1.