Ticket #6307 (closed defect: fixed)

Opened 4 months ago

Last modified 2 months ago

Textarea/TextBox: better font, font-size, and spacing (as default for tundra, soria, etc)

Reported by: alex Owned by: bill
Priority: normal Milestone: 1.2
Component: Dijit - LnF Version: 1.0
Severity: normal Keywords: L&F, look, feel, UI
Cc: alex

Description (last modified by bill) (diff)

the inner padding and lineheight rules for the textarea widget give it a cramped an unreadable feeling WRT native textarea widgets.

Native textarea:

Textarea widget:

As per April 8 dijit meeting, I'm expanding this ticket to include the TextBox widgets as well as the TextArea and SimpleTextArea.

The decision is to make dijit "look good out of the box" in preference to supporting inheritance of font and font-size, which in this case means

  • to remove the IE expressions for font/font-size inheritance ([12806])
  • just hardcode values of font for textarea and textbox widgets (probably sans-serif)
  • hardcode a font-size too (but for a11y reasons use em or a word like "medium", rather than pt or px).
  • I think that means we can remove the workaround checked in for [13214] (references #6220) and also in [13158] (references #6262).

Attachments

cramped1.tiff (17.0 kB) - added by alex 4 months ago.
cramped2.tiff (47.3 kB) - added by alex 4 months ago.

Change History

Changed 4 months ago by alex

Changed 4 months ago by alex

Changed 4 months ago by bill

  • description modified (diff)
  • summary changed from textarea widget text spacing is cramped to Textarea: text spacing is cramped

Changed 4 months ago by bill

  • component changed from Dijit to Dijit - LnF

Changed 4 months ago by peller

  • owner set to doughays
  • description modified (diff)

Changed 4 months ago by doughays

Am I supposed to change the default tundra font-family for Textarea to monospace? I don't think we should override the default font set by the user for the document. Firefox2 Textarea widget doesn't inherit the user font - this should be changed.

Changed 4 months ago by bill

  • milestone changed from 1.1.1 to 1.2

Let's think about this some before implementing anything. As my prime rule, I'd like diijit to look good out-of-the-box, but it's unclear what "good" means for textareas. Note that native textareas look different on different browsers. The screenshot above is from Safari. On IE and FF, they use a monospace font. (Strangely, plain <input> nodes don't use a monospace font.)

Changed 3 months ago by doughays

  • owner changed from doughays to nonken

Changed 3 months ago by bill

  • description modified (diff)
  • summary changed from Textarea: text spacing is cramped to Textarea/TextBox: better font, font-size, and spacing (as default for tundra, soria, etc)

As per April 8 dijit meeting, I'm expanding this ticket to include the TextBox widgets as well as the TextArea and SimpleTextArea. Changing description...

Changed 3 months ago by bill

  • description modified (diff)

Changed 3 months ago by bill

  • description modified (diff)

Changed 3 months ago by alex

let me be *VERY* clear:

the original bug is with regards to padding and spacing around the outside of the textarea. It cramps the text. I would *also* like to see line-spacing, etc. fixed, but the primary issue here is the way the text inside of the control is cramped along the left and top edges. How that relates to what browsers do "natively" is a larger discussion, and one which we've had multiple times with no resolution. Bill thinks we should stop half-way, I vehemently disagree.

Regardless, I'm VERY confused why this bug got "bigger". Can't we just fix the internal padding and ship that fix in 1.1.1? I fail to see how this requires larger changes and/or a punt to another release.

Lets fix the low-hanging stuff for 1.1.1 and file a new bug for 1.2 for larger changes. Just punting the bug off of 1.1.1 is clearly the wrong answer.

Changed 2 months ago by bill

  • status changed from new to assigned
  • owner changed from nonken to bill

Stealing..

Changed 2 months ago by bill

(In [13711]) Make TextBox/TextArea? based widgets use sans-serif out-of-the-box, rather than inheriting the font from <body>. Developer can still adjust the font by overriding the CSS. Refs #6307.

Changed 2 months ago by bill

(In [13719]) Add a little padding to TextArea?, refs #6307.

Changed 2 months ago by bill

(In [13720]) Oops, forgot to make the selector have ".tundra". Also adding missing @import of dojo.css to test files. Refs #6307.

Changed 2 months ago by bill

  • status changed from assigned to closed
  • resolution set to fixed

OK, font and padding are "fixed". Standardized font to be like Safari, namely using sans-serif rather than monospace like the default <textarea> on IE and FF.

As per line-height, current behavior is reasonable to me. Whether or not it "differs from native elements" depends on which browser you are looking at:

Safari:

  • regular text: 13px
  • <textarea> font-size/line-height: 11px / normal
  • dijit.TextBox? font-size/line-height: 13px / normal

FF3:

  • regular text: 13px
  • <textarea> font-size/line-height: 13px / 14px
  • dijit.TextBox? font-size/line-height: 13px / 14px

IE6:

  • regular text: small
  • <textarea> font-size/line-height: small / normal
  • dijit.TextBox? font-size/line-height: small / normal

(Safari is the odd one out in that it makes the <textarea> text smaller than the adjacent text in <p> nodes)

Anyway, I'm closing this ticket; Nikolai can tweak the values if he wants.

Note: See TracTickets for help on using tickets.