Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

A convention in financial software is to right-justify numeric and currency values when they are displayed in a table. This allows easy top-to-bottom scanning and summing of numbers. The same convention seems to be used in many (most?) financial apps on the web.

But what if a table combines both static and editable cells, like this?

enter image description here

Should I try to right-justify text inside numeric textboxes? Is this even possible in HTML?

If I can't right-justify the editable text, should I left-justify static text to be consistent?

Any other suggestions to make this kind of grid better?

share|improve this question
    
You can right-align text input field, along with DIV with contentEditable property. –  Jung Lee Jul 5 '13 at 0:51

2 Answers 2

up vote 2 down vote accepted

Since the editable figures belong to the same context as the non-editable data and should be comparable with them, they should have the same basic layout. This is not just about right alignment.

If you use the input element for editable data, this will have many implications on rendering: different font family, different font size, nonzero padding or margin, a border around, a fixed width (typically suitable for 20 digits), and maybe something else. There are various ways around this, like setting several CSS properties on input in order to make it similar to normal text, or putting the non-editable data to input elements, too, just with the readonly attribute.

If you use normal text content instead, just with the contenteditable attribute, it becomes much simpler to make editable and non-editable data similar, just with some controlled way of highlighting the latter. On the other hand, submitting data as part of form data will take more work then. But this does not matter if you are really doing all the processing in a browser and do not submit the form at all.

Then there’s the question how to make it evident to the user which data is editable. Using just white background is not sufficient especially if you have alternating colors for rows with non-editable data, as in your example. Using the outline property, to draw a colored outline around the item, is one possibility; outline differs from border by not affecting the layout of the page at all – the outline is like an extra layer set over basic content. But some (very) old browsers do not support outline. (And you should probably make the color of the outline different for an element that has focus.)

Then there is the issue of accessibility. Should this work even when CSS is disabled, and when used with assistive software like screen readers? Then the clumsy way of using input for editable data is certainly the most robust.

So there are quite a few parameters in the situation that need to be considered before an informed decision can be made.

share|improve this answer
    
Way to go Jukka! This answer is so you =D and I like it. You dug out the main points concerning accessibility and markup problems. –  Samuel M Jul 5 '13 at 5:26

I believe you answered yourself when you wrote everybody else are doing it that way.

You can justify-to-right in css using

input{
text-align: left;
}

The white background is a digital convention for editable content and the left justification doesn't provide additional sensory clues so I I think it is safe to assume it is not needed, distracting and tires the eyes.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.