Re: [css-d] slight layout change: center numbers in circles.

2011-01-15 Thread Philippe Wittenbergh

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/


Re: [css-d] slight layout change: center numbers in circles.

2011-01-14 Thread Bob Rosenberg
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 span 
class=dingbat#x;/span.


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.

2011-01-11 Thread Chetan Crasta
On Tue, Jan 11, 2011 at 11:47 AM, Jukka K. Korpela jkorp...@cs.tut.fi 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.

2011-01-11 Thread Jukka K. Korpela

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.

2011-01-10 Thread Chetan Crasta
On Tue, Jan 11, 2011 at 12:23 AM, Rory Bernstein r...@rorybernstein.com 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.

2011-01-10 Thread Rory Bernstein
On Jan 10, 2011, at 2:07 PM, Chetan Crasta wrote:

 On Tue, Jan 11, 2011 at 12:23 AM, Rory Bernstein r...@rorybernstein.com 
 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.

2011-01-10 Thread Bob Rosenberg
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.

2011-01-10 Thread Rory Bernstein

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.

2011-01-10 Thread Jukka K. Korpela

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/