Re: [css-d] Query on P:First-letter
On Sep 28, 2011, at 4:54 PM, Philip TAYLOR (Webmaster, Ret'd) wrote: > And yes, I'd love to be able to add kern-pairs in CSS, but I don't > think CSS has evolved that far yet :-) I personally hope it won't be possible anytime soon. Considering how text is handled by different OS and even by different browsers on the same OS (in terms of sub pixel positioning, text-smoothing, etc), I foresee a mountain of disasters in the making. And that is assuming all those combination actually use the same font. What _may_ work on one OS/browser/screen-resolution combo will almost certainly fail on another combination. Fwiw, none of the kerning pairs on the two sample pages linked to in the original post look good on my Mac running OS X 10.6.8 (any browser), nor on the iPod Touch. 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] Query on P:First-letter
28.9.2011 10:54, Philip TAYLOR (Webmaster, Ret'd) wrote:
And yes, I'd love to be able to add kern-pairs in CSS, but I don't
think CSS has evolved that far yet :-)
But you _can_ do that - just use markup like
To
and CSS like
.T_before_o { margin-right: -0.15em; display: inline-block; }
:-)
Though slightly inconvenient to write by hand, this _could_ be a
feasible approach when made programmatically (server-side or
client-side), based on a kerning table you specify in some format and
then have applied when processing the text.
--
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] Query on P:First-letter
Jukka K. Korpela wrote: Since you already have markup like Many of us it would seem natural to put the initial letter in a classed span, making it trivial to refer to it in CSS. Assuming, of course, that you can affect the markup. Yes, I can indeed; I was just trying to avoid overt markup if it could be avoided. I don't see how text-transform : uppercase on something else would be relevant to the issue of styling the first letter. And it seems to me that David suggested just _removing_ some stylesheets that you currently have (including text-transform : uppercase). I think red color is not particularly stylish. What you seem to be trying to achieve is "classical" styling where the first few words of a paragraph appear in small capitals (except uppercase letters as normal capitals) - and I doubt whether it's a good idea to add color to that. Yes, /mea culpa/ : I have already sent a correction. The main problem with such "classical" styling in HTML documents is that true small-caps are rarely supported. Although you can set font-variant: small-caps in CSS, you get (in almost all cases)just reduced-size uppercase letters, _not_ small-caps designer typographically to fit into the text. Using explicit font size reduction together with bolding is a nice try to work around such problems, but not without problems. The initial letters now have somewhat too thin lines, and if you try to fix that by bolding, they get too thick. Yes, it was as close as I could get to classical styling; certainly CSS's generation of caps-and-small-caps was just an æsthetic disaster. I don't quite see the point of letter-spacing: 0.075em; for the initial letter. If you look at e.g. the words "The", don't you think that the distance needs to be _reduced_ rather than increased? If you fine-tune spacing, then I think you would need to fine-tune it individually by character pairs, effectively doing things comparable to what a typographer does when deciding on kerning pairs. It was added empirically. Before I added that correction, it looked decidedly worse (to my eyes). However, that was in an earlier version of Seamonkey (2.0.14, probably) and I do agree that the kerning in "The" is now markedly sub-optimal. And yes, I'd love to be able to add kern-pairs in CSS, but I don't think CSS has evolved that far yet :-) Philip Taylor __ 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] Query on P:First-letter
28.9.2011 10:04, Philip TAYLOR (Webmaster, Ret'd) kirjoitti: > See https://bugzilla.mozilla.org/show_bug.cgi?id=159403 I.e. "text-indent and :first-letter don't work with a img before the first letter". Thank you, that is an interesting and useful lead. Since I /need/ it to work in Seamonkey, I shall have to look for a work-around until that bug gets fixed. Since you already have markup like Many of us it would seem natural to put the initial letter in a classed span, making it trivial to refer to it in CSS. Assuming, of course, that you can affect the markup. The :first-letter pseudo-element is rather trickily described in the specs, so bugs and differences in implementations were to be expected. So using extra markup, though perhaps primitive, is a practical move David L: I will look at your suggested replacement shortly, but earlier experiments suggested that text-transform : uppercase produces markedly inferior results from an æsthetic perspective, which is why I developed the code that I posted. I don't see how text-transform : uppercase on something else would be relevant to the issue of styling the first letter. And it seems to me that David suggested just _removing_ some stylesheets that you currently have (including text-transform : uppercase). I think red color is not particularly stylish. What you seem to be trying to achieve is "classical" styling where the first few words of a paragraph appear in small capitals (except uppercase letters as normal capitals) - and I doubt whether it's a good idea to add color to that. The main problem with such "classical" styling in HTML documents is that true small-caps are rarely supported. Although you can set font-variant: small-caps in CSS, you get (in almost all cases)just reduced-size uppercase letters, _not_ small-caps designer typographically to fit into the text. Using explicit font size reduction together with bolding is a nice try to work around such problems, but not without problems. The initial letters now have somewhat too thin lines, and if you try to fix that by bolding, they get too thick. I don't quite see the point of letter-spacing: 0.075em; for the initial letter. If you look at e.g. the words "The", don't you think that the distance needs to be _reduced_ rather than increased? If you fine-tune spacing, then I think you would need to fine-tune it individually by character pairs, effectively doing things comparable to what a typographer does when deciding on kerning pairs. -- 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] Query on P:First-letter
Philippe Wittenbergh wrote: > Have you tested this in anything beside a Gecko browser ? To be honest, no. I develop using solely Seamonkey, and only when the site renders successfully in that do I look to see how it might render in other browsers. > See https://bugzilla.mozilla.org/show_bug.cgi?id=159403 Thank you, that is an interesting and useful lead. Since I /need/ it to work in Seamonkey, I shall have to look for a work-around until that bug gets fixed. My thanks to all others who also commented on this query. David L: I will look at your suggested replacement shortly, but earlier experiments suggested that text-transform : uppercase produces markedly inferior results from an æsthetic perspective, which is why I developed the code that I posted. Philip Taylor __ 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] Query on P:First-letter
On Sep 28, 2011, at 9:10 AM, Ingo Chao wrote: > http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#first-letter > "The ::first-letter pseudo-element represents the first letter of an > element, if it is not preceded by any other content (such as images or > inline tables) on its line." Yes, but... what with a floated image ? http://dev.l-c-n.com/_temp/first-letter-img.html IE 9, WebKit and Opera style the first-letter in the 3rd and 4th paragraph. Gecko does not 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] Query on P:First-letter
On 9/27/11 7:29 PM, Philip TAYLOR (Webmaster, Ret'd) wrote:
Could anyone explain why the leading "M" of the following paragraph :
Philip Taylor
Dunno. But, this will do...:-)
/*SPAN.Keyphrase {text-transform: uppercase; font-size: 1.4ex;
font-weight: bold; letter-spacing: 0.075em; color: red} delete */
/*DIV.Content P:first-letter {color: red; letter-spacing: 0.075em} delete */
Best,
Someyoungguy
Hanoi
--
Desktop. Laptop. Tablet. Mobile!
http://chelseacreekstudio.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] Query on P:First-letter
On Wednesday, September 28, 2011, Philip TAYLOR (Webmaster, Ret'd) <
p.tay...@rhul.ac.uk> wrote:
> Could anyone explain why the leading "M" of the following paragraph :
>
>Many of us are lucky
enough to take anaesthesia for granted. Surely a world without safe
anaesthesia has long been confined to the history books ? Not in
the developing world, where hospitals lack suitable equipment, medicines and
trained staff.
>
> is not matched by this CSS rule :
>
>DIV.Content P:first-letter {color: red; letter-spacing: 0.075em}
>
> ...
http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#first-letter
"The ::first-letter pseudo-element represents the first letter of an
element, if it is not preceded by any other content (such as images or
inline tables) on its line."
The first-letter CSS3 spec is a quite interesting read. I did not know this:
"The first letter must occur on the first formatted line. For example, in
this HTML fragment: First... the first line doesn't contain any
letters and ::first-letter doesn't match anything (assuming the default
style for br in HTML 4). In particular, it does not match the "F" of
"First.""
Ingo
__
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] Query on P:First-letter
On Sep 28, 2011, at 8:29 AM, Philip TAYLOR (Webmaster, Ret'd) wrote:
> Could anyone explain why the leading "M" of the following paragraph :
>
>src="Resources/Images/Photographs/Web/Scaled/240/Infant-Uganda.001.jpg"
> longdesc="../Resources/Images/Photographs/Web/Longdesc/Infant-Uganda-001.html"
> alt="Ugandan infant in a laundry basket" width="320" height="240">Many of us are lucky enough
> to take anaesthesia for granted. Surely a world without safe anaesthesia has
> long been confined to the history books ? Not in the developing
> world, where hospitals lack suitable equipment, medicines and trained
> staff.
>
> is not matched by this CSS rule :
>
> DIV.Content P:first-letter {color: red; letter-spacing: 0.075em}
>
> whereas the leading "M" of the following paragraph is ?
>
> Many of us
> are lucky enough to take anaesthesia for granted. Surely a world without safe
> anaesthesia has long been confined to the history books ? Not in
> the developing world, where hospitals lack suitable equipment, medicines and
> trained staff.
>
> The obvious difference is that an element intervenes,
> but should that really cause the "M" not to be classed as
> the first /letter/ of the paragraph ?
Have you tested this in anything beside a Gecko browser ?
See https://bugzilla.mozilla.org/show_bug.cgi?id=159403
WFM in WebKit and Opera.
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/
