MozTW 討論區
https://forum.moztw.org/

:first-letter float的跨瀏覽器比較
https://forum.moztw.org/viewtopic.php?f=13&t=9039		 第 1 頁 (共 1 頁)
發表人:  MilchFlasche [ 2005-06-22, 10:37 ]
文章主題 :  :first-letter float的跨瀏覽器比較
在我blog的這篇文章中有這樣的比較：
http://linshi.twbbs.org/blog/item/MilchFlasche/48161

不過這可能只是表示最基本的語法Firefox可以直接支援無誤，
至於若要讓IE及Opera正常顯示的話，或許有別的寫法？
所以敬請高人指教討論:)
發表人:  ants [ 2005-06-22, 11:27 ]
文章主題 : 
MilchFlasche 寫:
在我blog的這篇文章中有這樣的比較：
http://linshi.twbbs.org/blog/item/MilchFlasche/48161
Just to add two more screenshots for you.

Safari 2.0 under Mac OS X 10.4.1 "Tiger"
圖檔

Camino 0.9 Alpha 1 under Mac OS X 10.4.1 "Tiger"
圖檔
發表人:  dken [ 2005-06-22, 12:22 ]
文章主題 : 
如果是多個 tag 要套用同樣的 style 的話，建議用 "class="，不然W3C 的標準語法驗証會過不去，也就是說會不合標準。
發表人:  MilchFlasche [ 2005-06-23, 17:57 ]
文章主題 : 
ants 寫:
Just to add two more screenshots for you.

Thank you a lot. May I put them in my blog?

I really like Mac OS's default fonts. So delicate, and serif and sans-serif are both provided, unlike Windows... :roll:
發表人:  MilchFlasche [ 2005-06-23, 18:03 ]
文章主題 : 
dken 寫:
如果是多個 tag 要套用同樣的 style 的話，建議用 "class="，不然W3C 的標準語法驗証會過不去，也就是說會不合標準。
嗯嗯嗯，了解。

不過我應該只有把id用在一個tag上面吧？圖檔
----
【追加】
喔喔喔，我懂你的意思了。在介紹的時候的確應該介紹「class」才對。我會用「id=fp」當例子的原因，是我自己就是這樣用的，我只用它一次，沒把它當class來用。倒忘了大家在用這個CSS的時候，有可能套用在不只一個tag上。
發表人:  ants [ 2005-06-23, 21:04 ]
文章主題 : 
MilchFlasche 寫:
ants 寫:
Just to add two more screenshots for you.

Thank you a lot. May I put them in my blog?
Sure.
(All default settings.)

MilchFlasche 寫:
I really like Mac OS's default fonts. So delicate, and serif and sans-serif are both provided, unlike Windows... :roll:
Apple paid quite a bit for licensing fonts in their OS X.
發表人:  李某人 [ 2005-06-23, 21:58 ]
文章主題 : 
似乎有設 line-height...
value 是啥...?
發表人:  MilchFlasche [ 2005-06-24, 06:33 ]
文章主題 : 
李某人 寫:
似乎有設 line-height...
value 是啥...?
嗯嗯，我的CSS的#container有設line-height: 120%耶，你怎麼知道？

不過我把那行disable掉以後，IE還是沒有好轉？要不要試試看？
發表人:  李某人 [ 2005-06-24, 19:30 ]
文章主題 : 
MilchFlasche 寫:
嗯嗯，我的CSS的#container有設line-height: 120%耶，你怎麼知道？

不過我把那行disable掉以後，IE還是沒有好轉？要不要試試看？

因為我見到行跟行之間還有空隙...
有時候不能直接 View CSS Source 還是蠻麻煩...

其實這個 case 帶出了很多問題, 跟 line-height, float 和 block-level element 的處理都有關係... 但最主要還是在 line-height 上面...

結論先說, Fx 錯了，解決方法是把 line-height 的 120% 改成 1.2...

120% 跟 1.2 這兩個 value 看上去似乎一樣, 但實際上是有不同的...

--文章 mode 轉換--
先來看一下 CSS2.1 的 spec 怎麼說。
引言回覆:
<number>
The used value of the property is this number multiplied by the element's font size. Negative values are illegal. The computed value is the same as the specified value.
<percentage>
The computed value of the property is this percentage multiplied by the element's computed font size. Negative values are illegal.

分別就在我粗體掉的那句，用實例說明一下。看下面：
代碼:
HTML:
<div id="outer">Outer Text.
   <div id="inner">Inner Text.</div>
</div>
CSS:
#outer {
   font-size: 10pt;
   line-height: 150%;
}
#inner {
   font-size: 2em;
}

這樣的話，正常來說 #outer 的 line-height 會是 10pt*150% = 15pt ，然後 #inner 的應該是 2*10pt*150% = 30pt 罷？

但這樣的想法是錯的，實際上 #inner 的 line-height 會跟 #outer 的一樣，是 15pt 。因為 #inner 從 #outer 那裡 inherit 回來的 value 不是 specified value 150% ，而是 computed value 15pt (註： Inheritance 是用 computed value 來進行的)。

那麼用 1.5 的場合呢？ #inner 的 line-height 的 value 則會是予想之內的 30 pt 。因為如果 value 是 number 的話，上面說到 computed value 和 specified value 是一樣的，故此 #inner inherit 到的 value 是 1.5 ， line-height 也就是 10pt*2*1.5 = 30pt 了。

好了，那麼這個 line-height 跟 float element 的顯示又有什麼關係呢？

這個請自已想 XD (我累了咩…) 。在此附上 testcase 一個以作參考。
代碼:
HTML:
<div><span>I</span> am a boy.<br />She is a girl.</div>

CSS:
div {
   line-height: 100%;
   font-size: 10pt;
}
div span {
   float: left;
   font-size: 2em;
}

加送 Screenshot 一張。 (under Fx 1.0.4, with Web Developer outline)

圖檔
(注意 span 的 outline)

可是改成這樣的話卻有不同的 Rendering 。
代碼:
HTML:
<div>I am a boy.<br />She is a girl.</div>

CSS:
div {
   line-height: 100%;
   font-size: 10pt;
}
div:first-letter {
   float: left;
   font-size: 2em;
}


圖檔
(不知道為什麼 outline 不到 div:first-letter)

我就是不明白 div:first-letter 跟那個 span 有什麼分別， first-letter 在 Fx 上會有特別處理 (也許是我錯了也說不定?) 。

接著的 text-indent 有機會再寫罷...(我承認我很懶)。
發表人:  dken [ 2005-06-24, 21:33 ]
文章主題 : 
我也覺得很奇怪，為什麼你的 span 會被 outline 起來，難道是用自訂的? 而不是用 block-level outline?

代碼:
<html>
<head>

<style type="text/css">
div {
   line-height: 200%;
   font-size: 10pt;
}
div:first-letter {
   float: left;
   font-size: 2em;
}
div span {
   float: left;
   font-size: 2em;   
}
</style>
</head>

<body>
<div>1234567<br>1234567</div>

<div><span>1</span>234567<br>1234567</div>

</body>
</html>


附加檔案:
test.jpg [10.43 KiB]
被下載 369 次
發表人:  李某人 [ 2005-06-24, 21:45 ]
文章主題 : 
是用自訂沒錯...

webdev 的 outline custom elememt 能接受 css selector 喔...
連 div:first-child 都可以 outline 到...
發表人:  水幻雲 [ 2005-06-24, 22:19 ]
文章主題 : 
似乎 Firefox 的 floating ::first-letter pseudo-element 是不能改變 line-height 的？

代碼:
div::first-letter {
   float: left;
   font-size: 2em;
   line-height: 999px;
}

W3C CSS 2.1 Spec. 寫:
These are the properties that apply to :first-letter pseudo-elements: font properties, 'text-decoration', 'text-transform', 'letter-spacing', 'word-spacing' (when appropriate), 'line-height', 'float', 'vertical-align' (only if 'float' is 'none'), margin properties, padding properties, border properties, color property, background properties. UAs may apply other properties as well. To allow UAs to render a typographically correct drop cap or initial cap, the UA may choose a line-height, width and height based on the shape of the letter, unlike for normal elements. CSS3 is expected to have specific properties that apply to first-letter.
發表人:  李某人 [ 2005-06-24, 22:52 ]
文章主題 : 
的確...
一下子還沒留意到這個...
那麼說真的不能說是誰對誰錯...

後來跑去看看 CSS3 ...
http://www.w3.org/TR/css3-selectors/#first-letter
那個 example 看得讓我傻眼...
發表人:  danielwang [ 2005-06-26, 00:24 ]
文章主題 : 
::first-letter擬元素描述一個元素的第一個有格式字母。

::first-letter 擬元素可套到任何元素。

::first-letter 擬元素可用來做 "initial caps" 與 "drop caps"，這些是常用的排字效果。這類首字母與同軸層(inline level)類似，如果它的 CSS float 特定是 "none" 的話，不過依用法會有些限制。(This type of initial letter is similar to an inline-level element if its CSS 'float' property is 'none', but with certain restrictions, depending on usage. 不曉得 "its" 是指那個元素)。不然它與一個 floated (浮位) 元素一樣。

這些是適用於 ::first-letter 擬元素的 CSS 特性：font 特性、color 特性、background 特性、'text-decoration'、'vertical-align' (僅限 'float' 為 'none')、'text-transform'、'line-height'、margin 特性、padding 特性、border 特性、'float'、'text-shadow'、與 'clear'。

The following CSS2 will make a drop cap initial letter span two lines:
代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
 <HEAD>
  <TITLE>Drop cap initial letter</TITLE>
  <STYLE type="text/css">
   P               { font-size: 12pt; line-height: 12pt }
   P::first-letter { font-size: 200%; font-style: italic;
                     font-weight: bold; float: left }
   SPAN            { text-transform: uppercase }
  </STYLE>
 </HEAD>
 <BODY>
  <P><SPAN>The first</SPAN> few words of an article
    in The Economist.</P>
 </BODY>
</HTML>


這範例格式可以入下：

圖檔

設想的標籤序列會是：

代碼:
<P>
<SPAN>
<P::first-letter>
T
</P::first-letter>he first
</SPAN>
few words of an article in the Economist.
</P>


注意 ::first-letter 擬元素對內容 (例如第一個字母) 打標籤。當::first-line 與 ::first-letter 擬元素共用時，::first-letter 設想標籤序列被放到 ::first-line fictional 設想標籤序列內。

為了要達到傳統的 drop caps 格式，使用代理(user agent)也許要估算字體大小，例如來 align baseline (依底線對齊)。另外，字像外型(glyph outline)在做格式時也可以考慮。

第一個字母前的標點符號 (例如在 Unicode "open" (Ps), "close" (Pe), 與"other" (Po) 標點符號類別內所定的) 應該被包括在內：

圖檔

::first-letter 擬元素只對元素的一部份。

有些語言對某些字母組有特定的規則。以荷蘭語為例，如果 "ij" 字母組在一個字的前面，兩個字應該受 ::first-letter 擬元素所考慮。::first-letter 擬元素應的選擇項應從元素首到第一個非開標點字元串。

範例
以下範例示範重複的擬元素 (pseudo element) 會如何的互動。每個 P 元素的第一個字母的顏色為綠色(green)，字體大小為 24pt。第一行其它的部份是藍色(blue)，段落其它地方則為紅色(red)。
代碼:
P { color: red; font-size: 12pt }
P::first-letter { color: green; font-size: 200% }
P::first-line { color: blue }

<P>Some text that ends up on two lines</P>


假設分段會在 end 字後，這片段的設想標籤序列會是：
代碼:
<P>
<P::first-line>
<P::first-letter>
S
</P::first-letter>ome text that
</P::first-line>
ends up on two lines
</P>


注意 ::first-letter 元素在 ::first-line 元素內。::first-line 設的特性會由 ::first-letter 所承襲，但是會被 ::first-letter 所設的特性蓋過，如果有設的話。
發表人:  wini [ 2005-10-21, 23:21 ]
文章主題 : 
抱歉翻這篇舊文出來，
其實是我最近在用 first-letter 時碰上了點問題。

Firefox 跟 Opera 還有蠻多瀏覽器都有支援 first-letter 這類的，
不過我發現當使用了替換樣式表 ( alternate stylesheet ) 時，
Firefox 如果不先在 default 的樣式表中，
先寫 first-letter 的話，那麼不管替換樣式表中，
如何地去定義 first-letter ，都不會產生正確的效應。

但是我在 Opera 中測是沒問題的，
就算預設的樣式表中不先寫上 first-letter 也無妨。

請問這是 Firefox 的設計疏失，
還是說是因為替換樣式表的規則就是像 Firefox 這樣，
一定要預設的有寫，替代的才會完全正確地起作用？
（還是說，只有 Pseudo element 這類的才需要注意這點？）

參考：（已經有為預設樣式表加上 first-letter 的）
試比較 default 跟 Army 兩種樣式中，內文的頭文字的差別。

----
抱歉，沒在看 W3C 的規格書，
也不太清楚 Firefox 的支援方式，
所以來問了這個笨問題。
第 1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/