← Back to team overview

launchpad-dev team mailing list archive

Re: Considered harmful: label { white-space: nowrap }

 

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Jeroen Vermeulen wrote on 01/09/09 10:14:
>...
> One little nuisance in our LaunchpadForms is that radio button labels
> can be entire paragraphs, yet our CSS doesn't allow the browser to
> line-break them.  It just says "label { white-space: nowrap }".

It is rarely appropriate for form labels to wrap to multiple lines. That
said, it is even less appropriate for pages to scroll horizontally.

In Launchpad 2.0, forms were mostly laid out in two-column tables:
labels on the left, fields on the right. The width of each column was
mostly left up to the browser, but I added the {white-space: nowrap} to
ensure that the first column wouldn't be so narrow that any labels
wrapped to multiple lines.

The Launchpad 3.0 form layout puts labels above the fields. (This is a
bit odd: it makes short forms faster to scan than with the 2.0 layout
<http://uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php>,
but it increases the scrolling required for long forms, while at the
same time XHR is decreasing Launchpad's use of short forms.) With this
layout, the {white-space: nowrap} has little if any effect, so probably
you could remove it without any damage.

One practice I started in style.css, but didn't get far with, is to
include comments for visual regression testing of non-obvious CSS rules.
That is, whenever you add or change a rule or property, add a comment
containing an example launchpad.dev URL you are changing it for. Then
when anyone changes that rule or property in future, they can give the
URL a before-and-after check to ensure they're not making it look worse.

> For an example, go to your personal Translations page; from there,
> click on to "Translations licensing."  Now narrow down your browser
> window until the text next to the radio buttons falls off the page.
>...

If you reworded those options to be grammatical, they would also become
a bit shorter and less likely to need multiple lines.

"I would rather: I agree to licence all my translations in Launchpad
using the BSD licence." should be "I would rather: License all my
translations in Launchpad under the BSD licence".

"I would rather: I do not want to use the BSD licence and understand
this means I can't make translations in Launchpad." should be "I would
rather: Remove my translations from Launchpad".

Cheers
- --
Matthew Paul Thomas
http://mpt.net.nz/
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.9 (GNU/Linux)
Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org

iEYEARECAAYFAkqdAhgACgkQ6PUxNfU6ecqbuwCg0MaT7eF7BHO64yF17tQ9pCPJ
7HAAn1O+9RUjCc2d+aZej/a+7F92AS1s
=s4zF
-----END PGP SIGNATURE-----



Follow ups

References