Re: [css-d] Font stack article
On Mon, Jan 12, 2009 at 4:41 AM, Richard Mason wrote:
http://msdn.microsoft.com/en-us/library/ms534014(VS.85).aspx shows the
parameters that can be read, by a call to the appropriate Operating
System function, for an installed font. Note otmsXHeight which is the
x-height and the comment further down Not supported. It's immaterial
whether the OS is just being awkward, or the x-height is not stored in
the font file - if the OS can't _directly_ retrieve a value then neither
can a browser. For a browser to get a value for x-height the only
logical choices would be seem to be some sort of Look-Up-Table or
rendering and measuring the character.
In the Firefox source I see this
DWORD len = GetGlyphOutlineW(dc, PRUnichar('x'), GGO_METRICS, gm,
0, nsnull, kIdentityMatrix);
...
mMetrics-xHeight = gm.gmptGlyphOrigin.y;
I know nothing about this (I'm not even sure to have identified the
correct place in the code), anyway this looks like a sort of rendering
and retrieving of the data for a character.
I'll never quite understand why CSS spec writers put in a requirement
that browser authors determine x-height and then, instead of leaving the
programmers to implement the requirement, they tell them what the
answers going to be - and get it wrong.
But the CSS specs don't really tell this. If you mean the table at
http://www.w3.org/TR/css3-fonts/#font-size-adjust , it is just an
example, surely not something the browsers must use.
And yes, something in that table looks wrong, I seem to remember that
this has been noticed more than once.
Bruno
--
Bruno Fassino http://www.brunildo.org/test
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] best practices
Hi I teach Web Design and really focus on standards and best practices. When using external style sheets I have always had students link the style sheet. Recently some students have begun using the @import url(main.css);I understand how to use both. I am just wondering what the best practice is and why. . All comments and suggestions are welcome and helpful. Thanks! Smiles, Debbie Smith FLVS Teacher - Web Design 1 and 2 Office # 727-369-0731 Cell # 239-410-6333 Fax # 1-866-728-1043 dsm...@flvs.net aim, msn: dsm...@flvs.net yahoo messenger: dsmithFLVS skype: dsmithFLVS Go confidently in the direction of your dreams. Live the life you have imagined. -- Thoreau The information contained in this e-mail message is intended solely for the recipient(s) and may contain privileged information. Tampering with or altering the contents of this message is prohibited. This information is the same as any written document and may be subject to all rules governing public information according to Florida Statutes. Any message that falls under Chapter 119 shall not be altered in a manner that misrepresents the activities of Florida Virtual School. If you have received this message in error, or are not the named recipient, notify the sender, and delete this message from your computer. [References: Florida State Constitution I.24, Florida State Statutes Chapter 119] __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] best practices
On Mon, Jan 12, 2009 at 11:04 AM, dsm...@flvs.net wrote: Hi I teach Web Design and really focus on standards and best practices. When using external style sheets I have always had students link the style sheet. Recently some students have begun using the @import url(main.css);I understand how to use both. I am just wondering what the best practice is and why. . All comments and suggestions are welcome and helpful. Thanks! Smiles, Debbie Smith Unless our wiser members speak up, the only difference I can see is hiding @import styles from browsers that can't process then (Netscape, etc). Also, I believe using @import rules may have a chance of content being displayed before styling is applied, but I've not used it enough to test. Outside of that, they're mostly interchangeable. Links can specify alternate style sheets, whereas @import can't. I used @import for a while (it was a phase, just like rolled pants legs and hair bands), but mostly just use link for semantic purposes. -- -Jack Timmons http://www.trotlc.com Twitter: @jorachim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] best practices
Probaly linking is being cashed and @import not? Loading times? http://bluerobot.com/web/css/fouc.asp/ On Mon, Jan 12, 2009 at 11:04 AM, dsm...@flvs.net wrote: Hi I teach Web Design and really focus on standards and best practices. When using external style sheets I have always had students link the style sheet. Recently some students have begun using the @import url(main.css);I understand how to use both. I am just wondering what the best practice is and why. . All comments and suggestions are welcome and helpful. Thanks! Smiles, Debbie Smith Unless our wiser members speak up, the only difference I can see is hiding @import styles from browsers that can't process then (Netscape, etc). Also, I believe using @import rules may have a chance of content being displayed before styling is applied, but I've not used it enough to test. Outside of that, they're mostly interchangeable. Links can specify alternate style sheets, whereas @import can't. I used @import for a while (it was a phase, just like rolled pants legs and hair bands), but mostly just use link for semantic purposes. -- -Jack Timmons http://www.trotlc.com Twitter: @jorachim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE and background colour
2009/1/12 Elle Meredith li...@designbyelle.com.au ... probably display: inline-block for li helps. This did not work. The thumbnails do not float anymore. Any suggestion? The site is at: http://farmpeacelove.com/italiano/alloggio Actually decreasing margin-right fixed the problem in IE6 but not IE7. Do you think it has anything to do with using outline? outline? It is still dropping in IE6. Let us try zoom: 1 instead of display:inline-block for li. Ingo __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] best practices
Archive.org doesn't cache @imported stylesheets, so if you're interested in posterity, links are the better way to do it. On Jan 12, 2009, at 10:42 AM, s...@ssyed.com wrote: Probaly linking is being cashed and @import not? Loading times? __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] best practices
dsm...@flvs.net wrote: I teach Web Design and really focus on standards and best practices. When using external style sheets I have always had students link the style sheet. Recently some students have begun using the @import url(main.css);I understand how to use both. I am just wondering what the best practice is and why. The use of links vs. @imports is not so much a question about best practice as about strategy and file-structure. On source-code level one has a choice between links and @imports, and both can be used and misused. If hiding stylesheets from old and inferior browsers is part of the strategy, then @import, with and without media-attributes, is one method that can be used - with some success. Such trickery can also be achieved with stylesheet links. Good knowledge about how various browsers handle various link/@import constructions found in source-code, is essential, and there are several traps here. Add in methods like the not-yet-stable @media queries standards - for links, @import and @media, and one really has to be careful. - On CSS level one only has @import, but still many options. @importing stylesheets for various layout-parts and media into one main stylesheet which is then linked or @imported from the source-code, may work well for some of those who reuse stylesheets and prefer to keep all maintenance and upgrading at stylesheet level. Depending on strategy and structure the entire hide from inferior browsers can be moved from source-code to stylesheet level, and there's literally no end to how one can use or misuse browser-weaknesses and -quirks to achieve specific hide/targeting effects. Plenty of traps here too, and it's pretty easy to open up for future failures. Best practice is to keep it as simple and close to standards as possible for the intended purpose, while observing how standards and browsers standards-support evolve. So, best practice is what works as intended now - being it links or @imports in this case, and it is of course an even better practice if it continues to work in the future. Many of the best practice methods promoted only a few years ago now - quite predictable - show signs of failure, so I'm reluctant to promote any best practice method other than one of constantly observing how all parts work together when seen from a standards point of view and in actual browsers. My own strategy is best met by using only links, with and without media-attributes, in the source-code, but this has nothing to do with best practice apart from that it'll always work as intended. regards Georg -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] my first job with CSS
www.icosfitness.it/beta/ I've just finished to build up the front-end of this site. Although the client wanted a pixel-by-pixel fixed width, I think this sl...t has done a good job. What do you think about? Destroy me, I'm evil! ^.^/ -- http://www.css-zibaldone.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://mimicry.css-zibaldone.com (Blog) http://www.flickr.com/photos/gabrieleromanato/ (Flickr) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] best practices
Jack Timmons wrote: I used @import for a while (it was a phase, just like rolled pants legs and hair bands), Not really. The reason @import was used so heavily in the early 00's was because NN4x's interpretation of CSS was so horrible. So if you wanted NN4 to see a stylesheet, you'd link it. If you didn't, you'd @import it. You'd split your styles up accordingly.* Now it seems like @import used inside other stylesheets. More on @import from CSS-d circa 2005 http://archivist.incutio.com/viewlist/css-discuss/54300 You can't put CSS links in CSS /files/ obviously. For example, if you have ten XHTML files which reference on CSS file, it's quite cumbersome to add CSS links to all those files, compared to one @import rule in the CSS file. It can also be put in the opposite direction: if you have an additional CSS file you want only in /one/ of the ten XHTML files you can't put an @import in the CSS since then it will appear in all ten files. Erika *It is true that w/ @import IE would sometimes flash unstyled content aka FOUC http://bluerobot.com/web/css/fouc.asp/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Safari, Opera, Chrome pushing image to bottom of screen
URL: http://www.studentremix.org CSS: http://www.studentremix.org/landing.css For a reference of what this page should look like, look at it in FF or IE. They display it correctly. Safari, Opera, and Google Chrome push the blue image to the bottom of the screen. I don't see anything in the CSS that would be causing this. Can anyone else see what the issue is? Thanks, Daniel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari, Opera, Chrome pushing image to bottom of screen
Daniel, It's the margin declaration in your #portalWrapper: margin: 345px auto 0 auto; That's messing it up in the mentioned browsers. I would get rid of that top margin, and position it using position:relative; in your container div. -James On Mon, Jan 12, 2009 at 5:38 PM, Daniel Hammond dan...@objectivedesigns.com wrote: URL: http://www.studentremix.org CSS: http://www.studentremix.org/landing.css For a reference of what this page should look like, look at it in FF or IE. They display it correctly. Safari, Opera, and Google Chrome push the blue image to the bottom of the screen. I don't see anything in the CSS that would be causing this. Can anyone else see what the issue is? Thanks, Daniel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari, Opera, Chrome pushing image to bottom of screen
On Jan 13, 2009, at 7:38 AM, Daniel Hammond wrote:
URL: http://www.studentremix.org
CSS: http://www.studentremix.org/landing.css
For a reference of what this page should look like, look at it in FF
or IE.
They display it correctly. Safari, Opera, and Google Chrome push the
blue
image to the bottom of the screen. I don't see anything in the CSS
that
would be causing this. Can anyone else see what the issue is?
Actually, Gecko could be wrong here...
#portalWrapper { /*landing.css (line 39)*/
background:transparent none repeat scroll 0 0;
display:table;
margin:345px auto 0; /* --- */
Gecko puts the margin inside the anonymous table box that wraps an
element with display table, where as the other mentioned browsers put
it outside. (see the illustration in [1])
There has been some discussion on www-style on what the actual
behaviour should be (without any firm conclusion yet, but all browsers
appear slightly wrong).
set that margin-top to 0 and use margin on the links inside it to the
desired value. BTW
BTW:
a.portalLeftRight {
/**/
display:inline-block;
float:left;
}
That 'display:inline-block' is no needed. Specifying'float:left/
right' always makes an element display:block.
[1] http://www.w3.org/TR/CSS21/tables.html#model
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font stack article
On Mon, 12 Jan 2009, Bruno Fassino wrote
In the Firefox source I see this
DWORD len = GetGlyphOutlineW(dc, PRUnichar('x'), GGO_METRICS, gm,
0, nsnull, kIdentityMatrix);
...
mMetrics-xHeight = gm.gmptGlyphOrigin.y;
I know nothing about this (I'm not even sure to have identified the
correct place in the code), anyway this looks like a sort of rendering
and retrieving of the data for a character.
Well spotted. I missed that one.
The function returns glyph information for x in a structure at a
memory address specified by gm. One of the values returned in the
structure is the top-left x,y co-ordinates of a box that completely
encloses the glyph - so given that the box origin is 0,0 then
gm.gmptGlyphOrigin.y (xHeight) is the height of the box.
Now I'll have to update my web page :-)
--
Richard Mason
http://www.emdpi.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE and background colour
On 13/01/2009, at 6:11 AM, Ingo Chao wrote: 2009/1/12 Elle Meredith li...@designbyelle.com.au The site is at: http://farmpeacelove.com/italiano/alloggio Actually decreasing margin-right fixed the problem in IE6 but not IE7. Do you think it has anything to do with using outline? outline? CSS3 Basic User Interface property: http://www.w3.org/TR/css3-ui/#outline1 http://designshack.co.uk/tutorials/introduction-to-css3-part-4-user-interface which IE 6 (not sure about 7) does not recognise. It is still dropping in IE6. Let us try zoom: 1 instead of display:inline-block for li. At the moment I only test the page through browsershot.org -- and zoom: 1 didn't fix the problem. Elle __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Browsershot alternative
I have seen references to browsershot on this list. Is there another similar site? Thanks Del __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
