Re: [問題] css裡的text-indent

[takumi412 (<(￣ c￣)y▂ξ)]

※ 引述《bizza (呼)》之銘言：
: 這一段h1裡只有圖 沒有文字
: 可是為什麼要設text-indent ?
: 而且數值要設成 -9999px ??
: @@ 謝謝!

        就語意來說, h1 是標題, 標籤裡面"必須"有文字才行。

        例如：<h1>我是丁丁大站</h1>

        但是從視覺設計的觀點來看, 可能想用一張很有感覺的底圖,
        順便放上超明體的大標題 "我是丁丁大站"，然後順便傾斜個15度這樣~
        於是理所當然地, 我們會用在 h1 上套用 background-image:...

        可是那該死的字擋到了我們的底圖怎辦? 比較古典的方法有二： (笑)

        1) 像飛蛾躲在樹幹上一樣...把 h1 的文字縮到最小, 顏色跟背景一樣~
           所以用這個 → font-size:1px; color:

        2) 把文字踢得老遠, 最好是千里之外....
           就是你看到的 → text-indent: -9999px

        收工~


--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 61.31.140.245
推 chph:這兩個都不是較好的方法, 可以用把圖蓋在字上面的方式
※ 編輯: takumi412       來自: 61.31.140.245        (01/05 22:08)
推 bizza:那請問如果不設h1 可以嗎@@
→ KC73:h1 不只人要看, 搜尋引擎也會看, 妥善使用是好事.
推 evenwu:最正確的方法是直接用img啦，字放alt裡面。
推 adamp3:樓上觀念不正確 照理說h1要最先出來 img一定比較慢
→ adamp3:text-indent我個人是覺得最節省時間的方法 沒有CSS或圖片
→ adamp3:的情況下依然可以正常辨識h1
推 fotofolio:用FIR是對「語意xhtml」有偏好的作法
→ fotofolio:但是fir會在css啟動可是圖讀不進來的情況下變成
→ fotofolio:最差的閱讀性 所以我不太認同fir
推 fotofolio:所以我覺得傳統的img+alt比較好
推 evenwu:我說的是<h1><img src="圖" alt="字"/></h1>這樣免hack
→ evenwu:關CSS/img/js通通都看的到，你還可以設定<h1>裡面字的樣式
推 fotofolio:不過我剛剛想到用img比background不佳的地方在於
→ fotofolio:用css換不同h1的background對做不同平台外觀比較方便
→ GALINE:偏好語意對於跨client(如spider跟screenreader)相容的幫助
→ GALINE:不小。我會用span或P把h1內容物包起來，然後指定h1 *為
→ GALINE:display:none;
推 adamp3:我推薦GALINE的作法!
推 evenwu:基本上使用display:none是不好的...
→ evenwu:fotofolio說的那個使用img仍然可以照換呀
推 fotofolio:display:none文字閱讀器不會念 所以才會用text-indent
→ fotofolio:請問evenwu img要怎麼換呀？ 比如說我h1用了800x20大小
→ fotofolio:的圖 這時要移植到寬320的裝置上 img不就要從html換？
推 evenwu:就是 h1 img display none 然後設 h1 bg....
→ evenwu:media設在print或是其他不會考慮閱讀器的地方就可以這麼做
→ evenwu:如此只有主要設備採最嚴謹最安全的方式去設定
推 fotofolio:wow..好招 可是這時候不就變成你說的不正確了
推 fotofolio:了解 剛剛推文只有看到第一行
推 evenwu:沒有不正確的方式，因為也沒有人定義正確是什麼XD
→ evenwu:只有最好怎樣與怎樣不太好而已～～～
推 fotofolio:嗯 還是希望css能更改進好用 不需要這些小技巧