Response title
This is preview!
Move this topic
Relative font sizes in jQuery UI themes
in Developing jQuery UI
•
14 years ago
<div dir="ltr">Hey guys,
especially Filament Group - I wanted to bring up this topic about relative font sizes.
While I love your work on scalability within the themes, I think we can safely remove
relative font-sizes in the next transition/release. Here are the arguments for it:
1) IE7+ supports full scaling of websites
2) FF3 supports full scaling of websites
3) Opera 9+ supports full scaling of websites
The only vendor that doesn't play nice yet (except on the iPhone) is Safari. I'd love
to hear your opinions on that!
Cheers,
Paul<br clear="all">
--
Paul Bakaus
UI Architect
--
<a href="http://paulbakaus.com">http://paulbakaus.com</a>
<a href="http://www.linkedin.com/in/paulbakaus">http://www.linkedin.com/in/paulbakaus</a>
</div>
especially Filament Group - I wanted to bring up this topic about relative font sizes.
While I love your work on scalability within the themes, I think we can safely remove
relative font-sizes in the next transition/release. Here are the arguments for it:
1) IE7+ supports full scaling of websites
2) FF3 supports full scaling of websites
3) Opera 9+ supports full scaling of websites
The only vendor that doesn't play nice yet (except on the iPhone) is Safari. I'd love
to hear your opinions on that!
Cheers,
Paul<br clear="all">
--
Paul Bakaus
UI Architect
--
<a href="http://paulbakaus.com">http://paulbakaus.com</a>
<a href="http://www.linkedin.com/in/paulbakaus">http://www.linkedin.com/in/paulbakaus</a>
</div>
Replies(10)
Leave a comment on rdworth's reply
Re: Relative font sizes in jQuery UI themes
14 years ago
<div dir="ltr">I don't think we can do this until we stop supporting IE6 and Safari starts supporting full-page scaling. Our themes need to work in every browser that we claim to support.
Leave a comment on scott.gonzalez's reply
Re: Relative font sizes in jQuery UI themes
14 years ago
IE6 has 70% market share in China. (and 10% traffic of jquery.com is
from China, by alexa)
More info here:(update weekly)
http://info.50bang.com/index.php?s=2
Provided by a popular stat provider from China.(like google
analytics.)
Leave a comment on cloudream's reply
Re: Relative font sizes in jQuery UI themes
14 years ago
<div dir="ltr">Guys,
there is a difference between saying "we don't support IE6" as opposed to "our themes might not look good in IE6 if you use the text zooming feature".
there is a difference between saying "we don't support IE6" as opposed to "our themes might not look good in IE6 if you use the text zooming feature".
Leave a comment on pbakaus's reply
Re: Relative font sizes in jQuery UI themes
14 years ago
<div dir="ltr">Coincidentally, I ended up having this exact same discussion with a co-worker this morning when he suggested the same change for our app. After hearing his argument (essentially the same as what Paul just said), I've changed my opinion.
Leave a comment on scott.gonzalez's reply
Re: Relative font sizes in jQuery UI themes
14 years ago
<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div>There's been a lot of talk about this recently on blogs, and while we agree that it's exciting we could go back to pixel sizing in the future, it doesn't fit all cases right now.</div><div>As mentioned, IE6 just won't scale text set in pixels - at all. I believe this is true of ie7 and 8 too, for users who change their default to text instead of zoom (uncommon, I know).</div><div>The page zoom stuff also seems to fall apart in percentage-based layouts, and it's unclear how that'll be solved by the browsers, but for now it goes back to text scaling, which needs ems in IE.</div><div>
</div><div>Using ems causes no harm, but does benefit users on browsers that don't do page zoom.Despite the occasional frustration in font-size inheritance, it seems like the best scenario for developers and users.</div><div>
</div><div>One additional thing: most of the dimensions of our theme styles are set in ems as well so they are proportional to the component's font size, creating comfortable white space and dimension. This would be very difficult to do without ems.</div><div>
</div><div>-Scott</div><div>
</div><div>
</div><div>
</div>
<div apple-content-edited="true"> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div><div>Scott Jehl</div><div>Designer / Developer</div><div><a href="http://www.scottjehl.com">http://www.scottjehl.com</a></div></div></div></span> </div>
<div><div>On Oct 14, 2008, at 8:44 AM | Oct 14, 2008, Scott González wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div dir="ltr">I don't think we can do this until we stop supporting IE6 and Safari starts supporting full-page scaling. Our themes need to work in every browser that we claim to support.
</div><div>Using ems causes no harm, but does benefit users on browsers that don't do page zoom.Despite the occasional frustration in font-size inheritance, it seems like the best scenario for developers and users.</div><div>
</div><div>One additional thing: most of the dimensions of our theme styles are set in ems as well so they are proportional to the component's font size, creating comfortable white space and dimension. This would be very difficult to do without ems.</div><div>
</div><div>-Scott</div><div>
</div><div>
</div><div>
</div>
<div apple-content-edited="true"> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div><div>Scott Jehl</div><div>Designer / Developer</div><div><a href="http://www.scottjehl.com">http://www.scottjehl.com</a></div></div></div></span> </div>
<div><div>On Oct 14, 2008, at 8:44 AM | Oct 14, 2008, Scott González wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div dir="ltr">I don't think we can do this until we stop supporting IE6 and Safari starts supporting full-page scaling. Our themes need to work in every browser that we claim to support.
Leave a comment on scottjehl's reply
Leave a comment on pbakaus's reply
Re: Relative font sizes in jQuery UI themes
14 years ago
<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div>Using pixels in ThemeRoller is as easy as changing the global font unit menu from EM to PX. It just defaults to EM - are you proposing we switch that?</div><div>
</div><div>If you're using ems, the downloaded theme's CSS has a line commented that says the styles assume a 62.5% body font size, which is a pretty common practice for using ems with sanity (1em = 10px).</div><div>
</div><div>By setting the font size in themeroller to something in pixels, that will set the font size for the outermost div of each component. Inner elements still use ems anyway so they can scale proportionally to the chosen font size. But... I'm pretty sure that setting a parent size in PX will kill scaling in IE, and since ems are pretty commonplace in standards dev these days, we chose them as the default.</div><div>
</div><div>Thoughts?</div><div>-Scott</div><div>
</div><div>
</div>
<div apple-content-edited="true"> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div><div>Scott Jehl</div><div>Designer / Developer</div><div><a href="http://www.scottjehl.com">http://www.scottjehl.com</a></div></div></div></span> </div>
<div><div>On Oct 14, 2008, at 1:36 PM | Oct 14, 2008, Paul Bakaus wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div dir="ltr">
</div><div>If you're using ems, the downloaded theme's CSS has a line commented that says the styles assume a 62.5% body font size, which is a pretty common practice for using ems with sanity (1em = 10px).</div><div>
</div><div>By setting the font size in themeroller to something in pixels, that will set the font size for the outermost div of each component. Inner elements still use ems anyway so they can scale proportionally to the chosen font size. But... I'm pretty sure that setting a parent size in PX will kill scaling in IE, and since ems are pretty commonplace in standards dev these days, we chose them as the default.</div><div>
</div><div>Thoughts?</div><div>-Scott</div><div>
</div><div>
</div>
<div apple-content-edited="true"> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div><div>Scott Jehl</div><div>Designer / Developer</div><div><a href="http://www.scottjehl.com">http://www.scottjehl.com</a></div></div></div></span> </div>
<div><div>On Oct 14, 2008, at 1:36 PM | Oct 14, 2008, Paul Bakaus wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div dir="ltr">
Leave a comment on scottjehl's reply
Re: Relative font sizes in jQuery UI themes
14 years ago
<div dir="ltr">Hey Scott,
your arguments are all valid, and I'm okay with keeping em's for now. I'm just saying we should create a page to properly document their usage. Many developers simply don't know how to use them, and that relative sizes become inherited from the top node.
So once we build the proposed theme directory under themes, we could also publish a FAQ document on theme usage. Do you think that would be a good idea?
your arguments are all valid, and I'm okay with keeping em's for now. I'm just saying we should create a page to properly document their usage. Many developers simply don't know how to use them, and that relative sizes become inherited from the top node.
So once we build the proposed theme directory under themes, we could also publish a FAQ document on theme usage. Do you think that would be a good idea?
Leave a comment on pbakaus's reply
Re: Relative font sizes in jQuery UI themes
14 years ago
<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div>I think that's a great idea.</div><div>
</div>
<div apple-content-edited="true"> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div><div>Scott Jehl</div><div>Designer / Developer</div><div><a href="http://www.scottjehl.com">http://www.scottjehl.com</a></div></div></div></span> </div>
<div><div>On Oct 14, 2008, at 2:01 PM | Oct 14, 2008, Paul Bakaus wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div dir="ltr">Hey Scott,
your arguments are all valid, and I'm okay with keeping em's for now. I'm just saying we should create a page to properly document their usage. Many developers simply don't know how to use them, and that relative sizes become inherited from the top node.
So once we build the proposed theme directory under themes, we could also publish a FAQ document on theme usage. Do you think that would be a good idea?
</div>
<div apple-content-edited="true"> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div><div>Scott Jehl</div><div>Designer / Developer</div><div><a href="http://www.scottjehl.com">http://www.scottjehl.com</a></div></div></div></span> </div>
<div><div>On Oct 14, 2008, at 2:01 PM | Oct 14, 2008, Paul Bakaus wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div dir="ltr">Hey Scott,
your arguments are all valid, and I'm okay with keeping em's for now. I'm just saying we should create a page to properly document their usage. Many developers simply don't know how to use them, and that relative sizes become inherited from the top node.
So once we build the proposed theme directory under themes, we could also publish a FAQ document on theme usage. Do you think that would be a good idea?
Leave a comment on scottjehl's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to pbakaus's discussion