Personal Website of Yakov Shafranovich

Centering Fieldsets

A quick piece of CSS to center a fieldset:

<div style="width: 200px; text-align: center; margin-left: auto; margin-right: auto;"> <div style="text-align: left;">
<fieldset>
...
Here is an example:

Posted in Programming | No Comments »

Inobstrusive Form Field Highlighting in JavaScript

One of the recent problem that I ran across at work is an easy way to do highlighting for form fields. Of course the best way would be CSS 2 (as shown here) but alas, IE does not support that.

The alternative is JavaScript onFocus and onBlur method. However, one thing which I also wanted to avoid is changing over 200 different pages in our system to add those in. So instead, I wrote a simple piece of Javascript which attaches the event handlers on the fly. The best part about this is that the actual form does not need to be changed - just include the Javascript on the bottom of your webpage. The code is as follows:

var fields = document.body.getElementsByTagName("INPUT");
for(i=0; i < fields.length; i++)
{
if(fields[i].type == 'text' || fields[i].type == 'password')
{
fields[i].onfocus = highlightOn;
fields[i].onblur = highlightOff;
}
}

The two highlight functions are as follows:

function highlightOn() {
this.style.border = '1px solid blue';
this.style.backgroundColor = 'white';
} function highlightOff() {
this.style.border = '1px groove #7A7E7C';
this.style.backgroundColor = '#EEEEEE';
}And here is a real example:
Test Field #1

Posted in Programming | No Comments »

How To Wrap Text in a Table Cell

An interesting question that came up today during work was how to wrap text in a table cell that does not contain any line breaks or spaces. For example:

We want the text inside the cells to wrap to the next line instead of extending the table size. There are three basic solutions:

1. CSS - Internet Explorer Specific.

In Internet Explorer, there is a custom CSS extension called “word-wrap” which when set as “word-wrap: break-word;” will do just what we want. For example (only in IE):

2. CSS3 (no browsers yet).

In CSS 3 a new option called “wrap-option” is defined which when set as “wrap-option: emergency;” will do the same. Unfortunatly no browser today (except maybe Safari) supports it yet. The following example will only work in a CSS 3 browser (none of which I have):

3. JavaScript (all browsers).

Another solution would be to use JavaScript to break up the text into specific sized chunks. The downside of this approach is that you have to figure out what the chunk size would be. A good example of a JavaScript can be found here. I slightly modified it as follows:

    strbuff='ThisIsCell1';
    newstr='';
    startI = 0;
    max=2;
    str='';
    subarr=new Array(parseInt(strbuff.length/max+1));
    for (i=0;i    {
       subarr[i]=strbuff.substr(startI,max);
       startI+=max;
    }
    for (i=0;i    {
       newstr+=subarr[i]+’
‘;
    }
    str+=subarr[subarr.length-1];
    document.write(newstr);
 } else {
 	document.write(strbuff);
 }

 Here is an example:



ThisIsCell2



There is also a fourth way to do it via XSLT as described in Jeni Tennison’s book but I don’t have the time to get to that today. I will try to post a followup tomorrow.UPDATE: Here is the followup post.

Posted in Programming | 1 Comment »

XSL-FO vs. CSS

I just saw An article on XML.com (via SlashDot) discussing how CSS stylesheets can work better for printing than XSL-FO (as a rebuttal to a post by Norman Walsh). As a proof, the authors show a 100 line CSS stylesheet that accomplishes the same thing as a 1,000 XSL-FO stylesheet written by Norman Walsh.

While I see no problem with their approach, I do wonder whether it will still work with more complex documents. Given that XSL-FO is partly based on the CSS standard, it is logical that the two can accomplish the same thing, but I am not sure if they can.

Additionally, another thing that bothered me about the article is the lack of tools for CSS + XML printing. I tried using the stylesheet provided in the latest versions of Opera and Firefox with no luck. The only tool mentioned by the authors is a commercial one called Prince (which they themselves write and sell). Unlike XSL-FO where multiple processors are available to choose from, at least one of which is open source is free, for CSS + XML there isn’t much out there.

Some may argue that browsers will be able to process CSS + XML without a need for a separate tool. This however is not good enough for the a business. For example, my company uses XSL-FO for producing PDF files for printing. Why didn’t we go with CSS and “media=print” tag? Because 90% of the world runs IE which is yet to support HTML 4 in some cases! My company cannot rely on a possibility that the browser will not print, which is why we are forced to use PDF. Given a choice of a wide variety of tools for XSL-FO some of which are free, and one or two tools for CSS + XML, we rather go with XSL-FO.

P.S. While looking at Normal Walsh’s site, I came across a lint tool for XSLT. Looks pretty nice.

UPDATE: While looking at the W3C XSL page I came across a a utility for converting XSL+CSS to XSL-FO.

Posted in Programming | Comments Off

Making Visited Links Look the Same as Unvisited Links

One of our customers had recently requested a feature to make all links look the same, visited or unvisited. While debates and complaints have been raised about whether they should look the same, in our case this was necessary. A web application such as ours usually dynamically generated all the content. That means that links may stay static but their content changes. Therefore, visited links make no sense in a dynamic system.

In any case, the way I made them look the same is via the following piece of CSS:

A:link {color: blue}
A:visited {color: blue}

Posted in Programming | Comments Off