Mozilla browsers provide bindings to achieve certain features like the text-overflow: ellipsis style.
XBL(XML Binding Language) provides a way to bind selected elements using specific CSS2 property -moz-binding.
Following is an example of a typical binding.
[source language=”css”]
.ellipsis {
-moz-binding: url(‘/stylesheets/ellipsis.xml#ellipsis’);
}[/source]
The binding behavior is specified in XML and JavaScript in xml files. Any pattern that represents a CSS2 selector can be used as a set of instances to be bound.
A binding to some extent looks like a JavaScript object, with features like inheritance and it also has some
attributes.
And this is how the CSS text-overflow : ellipsis; is achieved in Firefox. Sadly, it might not be available
in Firefox-4. https://bugzilla.mozilla.org/show_bug.cgi?id=546857. Well, a JavaScript solution is definitely available, though its good to have it the CSS way. Being a little familiar with XML, I studied about XUL and XBL while I was trying to tweak a binding to inherit styles of the tag while modifying the content.
To dive in further, a binding is performed on the selected tag, and the attributes of the selected tag are modified and the result is shown in Firefox as the beautiful (…).
A sample code can be seen here
[source language=”xml”]
[/source]
Its not mandatory to provide the doc-type in these XML documents. binding tag is the only child tag of bindings. binding can have four children tags one of which is the content tag, which holds the anonymous content for the result of the binding. content tag can have a child tag called children, which controls the merging of the bound tag’s explicit content.
Attributes of the tag are copied to the tag to be bound. Explicit and anonymous content are merged, and the result is copied to the bound tag using DOM operations.
window tag denoted by describes the structure of a top-level window. It is the root node of a XUL document. So to say the window is taken as the root of the binding.
description tag is used to create a block of text. crop is an attribute, if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. An ellipsis will be used in place of the cropped text. It can have many properties one of which is:
end: The text will be cropped on its right side.
The text can be set with the value attribute.
inherits attribute can take the text, and other attributes to be inherited from the selected tag that is to be bound. In jqGrid default package the XML file which is specified for the binding done to show ellipsis .ui-ellipsis, only the text is inherited. So to inherit any specific styles of the selected tag we can include the attributes of the tag and they will be inherited during the bindings.
For example
[source language=”xml”]
xbl:inherits=”value=xbl:text,style”
[/source]
[source language=”xml”]
xbl:inherits=”value=xbl:text,class”
[/source]
I found the Mozilla Developer Network very useful to access the documentation of XBL. Let me know of any other sources which might be helpful.
Please let me know your comments.
