Opened 11 years ago

Closed 11 years ago

#6307 closed defect (fixed)

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

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

Description (last modified by bill)

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 (2)

cramped1.tiff (17.0 KB) - added by alex 11 years ago.
cramped2.tiff (47.3 KB) - added by alex 11 years ago.

Download all attachments as: .zip

Change History (17)

Changed 11 years ago by alex

Attachment: cramped1.tiff added

Changed 11 years ago by alex

Attachment: cramped2.tiff added

comment:1 Changed 11 years ago by bill

Description: modified (diff)
Summary: textarea widget text spacing is crampedTextarea: text spacing is cramped

comment:2 Changed 11 years ago by bill

Component: DijitDijit - LnF

comment:3 Changed 11 years ago by Adam Peller

Description: modified (diff)
Owner: set to Douglas Hays

comment:4 Changed 11 years ago by Douglas Hays

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.

comment:5 Changed 11 years ago by bill

Milestone: 1.1.11.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.)

comment:6 Changed 11 years ago by Douglas Hays

Owner: changed from Douglas Hays to nonken

comment:7 Changed 11 years ago by bill

Description: modified (diff)
Summary: Textarea: text spacing is crampedTextarea/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...

comment:8 Changed 11 years ago by bill

Description: modified (diff)

comment:9 Changed 11 years ago by bill

Description: modified (diff)

comment:10 Changed 11 years 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.

comment:11 Changed 11 years ago by bill

Owner: changed from nonken to bill
Status: newassigned

Stealing..

comment:12 Changed 11 years 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.

comment:13 Changed 11 years ago by bill

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

comment:14 Changed 11 years 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.

comment:15 Changed 11 years ago by bill

Resolution: fixed
Status: assignedclosed

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.