Last modified: 2012-08-04 21:11:04 UTC
Created attachment 10640 [details] Mockup showing proposed font adjustments Adjust font sizes on the feedback page (and other parts of the extension) to address recommendations below, written by Pau Giner. See also attached mockups. "The proposed changes to match the size of the left-menu and increase the line height for post content are indicated at http://dl.dropbox.com/u/30377416/prototypes/feedback-tool/article-feedback/font-adjustments.png The most relevant changes are that (a) I modified the body text to 0.75em (the default in Wikipedia) and (b) increased the line length for post content. I include a comparison of large comments (where line-height can be appreciated). These are independent changes, so if you prefer bigger text for the post we can still increase the line height to increase readability. ... It should be taken into account that the em measures are affected by the parent elements of each node. For example, if I include a 2em element into a 0.5em container, the resulting font size is equivalent to 1em. In the prototype the body font size has been set to 0.8em, and this implies that a 20% reduction will be applied to any other em-based measure in the document. For example, the sub-title "250 feedback posts on this article" that is set to 1.2em instead of being translated to 19px (as stated in the spec), is translated to 18px due to the body font reduction. This difference is not a big issue (just one pixel in this case), but it should be made clear in the specification whether these ems should be computed considering the body font size reduction or not. At the moment I have indicated the specific em to be applied to each final element including the resulting size in pixels. But I want to be sure that this is the way that best helps developers before we indicate sizes for each single element."
Created attachment 10641 [details] AFT font adjustment examples from Pau (Before and After)
If i understand correctly, we should be using em rather than "hard" px/pt units - in order for the interface to scale correctly. Pau, is my understanding correct?
Yes, the implementation should be based on em. The specific em values should be the ones that achieve the indicated size at the 100% zoom level, which may be different em values depending on the specific element. Why ems are not used at the design level? The problem of specifying the changes with em, is that it is a relative unit that it is affected by containment. So if I have a one HTML element with a size of 2em that contains another element with 0.5em, the resulting size is equivalent to 1em. Thus, knowing the final size requires you to know the structure of the HTML code. Considering that with the current code several containment elements have applied different em values (e.g., body has 0.8em that affects any other em value in the page by reducing it to the 80%), there is no guarantee that using the same em value in child elements represents the same final sizes.
Pushed to Gerrit (https://gerrit.wikimedia.org/r/#/c/14499/) & prototype Pau: can you please thoroughly doublecheck and let me know if and what pieces still need to be changed? I rebuilt most font-sizes & line-heights & tossed around some more CSS. I'm not sure everything's exactly as you've got it in your head, and the mockups are no (longer a) 100% reflection of the current feedback page. So please let me know what I didn't grasp and I'll fix it! PS: I think it looks a little less "busy/crowded" already, with the slightly smaller font sizes
