Situation: you have a web page with a form that has a first name and last name boxes. The application supports localization (e.g. the labels for these fields show up in the selected language, etc).
All is fine in the English version but when it comes to the Japanese one, they need the two fields reversed: first the last name and then the first name. Now you need to swap both the textboxes and the labels. In order to avoid clumsy server side logic like if (Japanese version) { lay out this way } else { lay out the other way } we’ve chosen a CSS based solution where a language specific css file is loaded for each version. In the Japanese CSS file you use such rules so that elements swap their places but what’s important is that the HTML that leaves the server is always the same.
Now the issue is with tab order… tab order will follow the order in DOM so it will jump un-naturally from the first name box to the last name box.
I wonder if there is a clean enough solution to fix both visual order and tab order that can be achieved mostly client-side, without server side hardcodings.
The direction I would consider, if you don’t want “hardcoded” layouts is to use CSS for layout (done) and then JavaScript for tab order. Off the top of my head, this means setting/changing tab index values.