[css-d] slight layout change: center numbers in circles.
Hello All, http://mcgivney.ehclients.com/ On this page, you will see a big jQuery slideshow thing. I has some numbers in circles that let you select the slide to see. How can I get the numbers centered exactly in the circles? I can't seem to figure that out. Thank you, Rory __ 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] slight layout change: center numbers in circles.
On Tue, Jan 11, 2011 at 12:23 AM, Rory Bernstein wrote: > Hello All, > > http://mcgivney.ehclients.com/ > > On this page, you will see a big jQuery slideshow thing. I has some numbers > in circles that let you select the slide to see. How can I get the numbers > centered exactly in the circles? I can't seem to figure that out. > > Thank you, > Rory Add this .switcher li a { line-height:13px;} ~Chetan __ 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] slight layout change: center numbers in circles.
On Jan 10, 2011, at 2:07 PM, Chetan Crasta wrote: > On Tue, Jan 11, 2011 at 12:23 AM, Rory Bernstein > wrote: >> Hello All, >> >> http://mcgivney.ehclients.com/ > > Add this > .switcher li a { line-height:13px;} > > ~Chetan > Perfection. Thank you! Rory __ 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] slight layout change: center numbers in circles.
At 13:53 -0500 on 01/10/2011, Rory Bernstein wrote about [css-d] slight layout change: center numbers in circles.: Hello All, http://mcgivney.ehclients.com/ On this page, you will see a big jQuery slideshow thing. I has some numbers in circles that let you select the slide to see. How can I get the numbers centered exactly in the circles? I can't seem to figure that out. Thank you, Rory You can also just use the numbers in the U+2776-U+2793 range which will give you 1-10 as Serif numbers in black or white circles as well as Sans-Serif 1-10 in black circles. Why fool around when the characters exist in your fonts? -- Bob Rosenberg RockMUG Webmaster webmas...@rockmug.org www.RockMUG.org __ 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] slight layout change: center numbers in circles.
On Jan 10, 2011, at 5:56 PM, Bob Rosenberg wrote: > At 13:53 -0500 on 01/10/2011, Rory Bernstein wrote about [css-d] slight > layout change: center numbers in circles.: > >> Hello All, >> >> http://mcgivney.ehclients.com/ >> > > You can also just use the numbers in the U+2776-U+2793 range which will give > you 1-10 as Serif numbers in black or white circles as well as Sans-Serif > 1-10 in black circles. Why fool around when the characters exist in your > fonts? > -- > > Bob Rosenberg Cool idea. But if I don't use the colors and font in the design, I'm in hot water! But that's good to know, was not aware there were characters like that. Rory __ 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] slight layout change: center numbers in circles.
Bob Rosenberg wrote: You can also just use the numbers in the U+2776-U+2793 range which will give you 1-10 as Serif numbers in black or white circles as well as Sans-Serif 1-10 in black circles. Why fool around when the characters exist in your fonts? On the theoretical side: because these "characters" are dingbats, i.e. specific graphics encoded as characters in a technical sense but not true text characters. On the practical side: because they mostly _don't_ exist in fonts. See the short font list at http://www.fileformat.info/info/unicode/char/2776/fontsupport.htm People's computers may have other fonts containing dingbats, but a) the appearances may be surprising and b) those fonts may have non-Unicode encodings. -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ 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] slight layout change: center numbers in circles.
On Tue, Jan 11, 2011 at 11:47 AM, Jukka K. Korpela wrote: > On the theoretical side: because these "characters" are dingbats, i.e. > specific graphics encoded as characters in a technical sense but not true > text characters. > > On the practical side: because they mostly _don't_ exist in fonts. See the > short font list at > http://www.fileformat.info/info/unicode/char/2776/fontsupport.htm > People's computers may have other fonts containing dingbats, but a) the > appearances may be surprising and b) those fonts may have non-Unicode > encodings. > > -- > Yucca, http://www.cs.tut.fi/~jkorpela/ Good info. I'm not sure of the meaning of those characters, though. Do they have the same meaning as regular numbers? This wikipedia article doesn't say: http://en.wikipedia.org/wiki/Enclosed_Alphanumerics The characters were rendered correctly in my Ubuntu computer. It has MS's free core fonts installed. In any case, the use of these characters is limited because while the color of the shaded circle can be changed, the color of the letter can only be changed using background-color which changes the color of the entire line box. ~Chetan __ 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] slight layout change: center numbers in circles.
Chetan Crasta wrote: I'm not sure of the meaning of those characters, though. Do they have the same meaning as regular numbers? Technically, the circled numbers are defined as numbers (digits), i.e. their general category is "Number", and they also have numeric values defined for them in Unicode; see e.g. http://www.fileformat.info/info/unicode/char/2776/ But isDigit() still returns false... And they are in the Dingbats block. So it's complicated. They're half numbers, half dingbats, so to say. The characters were rendered correctly in my Ubuntu computer. It has MS's free core fonts installed. Strange things may happen if you use dingbats in HTML. It can be difficult to figure out where a browser picks glyphs for them, or to control that. In any case, the use of these characters is limited because while the color of the shaded circle can be changed, the color of the letter can only be changed using background-color which changes the color of the entire line box. Right. I think it's much safer, and cleaner, to create circled numbers by using normal digits rendered in a particular style (with a background image containing a circle, or maybe by overlaying, with positioning, a circle image and a digit). This also gives more control over the appearance. -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ 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] slight layout change: center numbers in circles.
At 08:17 +0200 on 01/11/2011, Jukka K. Korpela wrote about Re: [css-d] slight layout change: center numbers in circles: Bob Rosenberg wrote: You can also just use the numbers in the U+2776-U+2793 range which will give you 1-10 as Serif numbers in black or white circles as well as Sans-Serif 1-10 in black circles. Why fool around when the characters exist in your fonts? On the theoretical side: because these "characters" are dingbats, i.e. specific graphics encoded as characters in a technical sense but not true text characters. On the practical side: because they mostly _don't_ exist in fonts. See the short font list at http://www.fileformat.info/info/unicode/char/2776/fontsupport.htm People's computers may have other fonts containing dingbats, but a) the appearances may be surprising and b) those fonts may have non-Unicode encodings. You are looking at the situation backwards. Admittedly the characters do not exist in every font. This does not however prevent them from being displayed. So long as the font-family that is active when the &#x; entry is encountered AND one of the fonts listed exists on the user's system, the character SHOULD be displayed. I am not sure what the rules are when the first selected font does not contain the character but a subsequent one does (ie: Will it search the subsequent fonts for the character or just give up since it has found a prior font that is usable). The best solution is to ONLY list fonts that contain the needed character. Also make sure that for each platform (Mac, Windows, Linux) you list a system font with the character (ie: Those Fonts that are common to more than one platform or are always installed on a platform). For Windows and Macintosh listing Arial Unicode MS, ITC Zapf Dingbats, and Zapf Dingbats should insure that you will always find at least one available font on the user's system. I am not sure what font to use for Linux but I think that a Zapf Dingbats font exists there and will be installed. Note the to insure that the first available font is used, you should declare a CSS class (such as dingbat) that lists ONLY the fonts with the characters and code the &#x; as class="dingbat">&#x;. I hope this helps and explains my suggestion. -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [css-d@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] slight layout change: center numbers in circles.
On Jan 15, 2011, at 4:10 PM, Bob Rosenberg wrote: > I am not sure what the rules are when the first selected font does not > contain the character but a subsequent one does (ie: Will it search the > subsequent fonts for the character or just give up since it has found a prior > font that is usable). The rule are fairly simple: check if the character exists in the first listed font, if not, skip to the next one, etc. If no fonts in the list contain the requested character, check for 'a' font-family available on the user system (and that is one reason to always specify a generic font-family). Note that I've seen IE 6 and 7 sometimes not play by those rules on XP. > ... > > For Windows and Macintosh listing Arial Unicode MS, ITC Zapf Dingbats, and > Zapf Dingbats should insure that you will always find at least one available > font on the user's system. I am not sure what font to use for Linux but I > think that a Zapf Dingbats font exists there and will be installed. Arial Unicode MS is good suggestion (not always available on win XP, iirc; and not installed on OS X 10.4). Adding DejaVu Sans (or DejaVu Serif) will insure wide coverage, including Linux (the font is installed by default on most Linux distros). Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@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/