Opened 12 years ago
Closed 12 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 )
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)
Change History (17)
Changed 12 years ago by
| Attachment: | cramped1.tiff added |
|---|
Changed 12 years ago by
| Attachment: | cramped2.tiff added |
|---|
comment:1 Changed 12 years ago by
| Description: | modified (diff) |
|---|---|
| Summary: | textarea widget text spacing is cramped → Textarea: text spacing is cramped |
comment:2 Changed 12 years ago by
| Component: | Dijit → Dijit - LnF |
|---|
comment:3 Changed 12 years ago by
| Description: | modified (diff) |
|---|---|
| Owner: | set to Douglas Hays |
comment:4 Changed 12 years ago by
comment:5 Changed 12 years ago by
| Milestone: | 1.1.1 → 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.)
comment:6 Changed 12 years ago by
| Owner: | changed from Douglas Hays to nonken |
|---|
comment:7 Changed 12 years ago by
| Description: | modified (diff) |
|---|---|
| Summary: | Textarea: text spacing is cramped → 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...
comment:8 Changed 12 years ago by
| Description: | modified (diff) |
|---|
comment:9 Changed 12 years ago by
| Description: | modified (diff) |
|---|
comment:10 Changed 12 years ago by
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 12 years ago by
| Owner: | changed from nonken to bill |
|---|---|
| Status: | new → assigned |
Stealing..
comment:12 Changed 12 years ago by
(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:14 Changed 12 years ago by
comment:15 Changed 12 years ago by
| Resolution: | → fixed |
|---|---|
| Status: | assigned → closed |
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.
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.