Re: [問題] CSS - 等寬字，行距，字距
我的做法比你的麻煩，
所以我覺得你可能不會想知道 XD
不過還是讓你看一下:
http://www.csie.ntu.edu.tw/~b88039/archive/testCol/css/bbs/half.html
簡單的說，用 clip 把兩個字各切半，然後用絕對定位重疊
然後把這樣的一個字塞在另一個 block 裡面
另外，你可能漏看了我的 code
裡面的br有加 "clear:both" 屬性
不這樣加span版的換行會爛掉
還有一件事，我會用 javascript 產生這些 code 不是沒有原因的
想想如果一篇一百行的文章每行40個中文字，每個字不同顏色都雙色
然後你用了約 130 個字元來製造色彩效果
那你將產生 100*40*2*130 = 1040k ~ 1 MB 的檔案大小
假設一般的進版畫面25行佔滿文字，有一半的字附控制碼，
那產生的檔案約有 130k 的大小 orz
你可以盡量用 css 技巧減肥，可是我覺得比起固定大小的 js 還是吃虧
不過就算是用 javascript 產生全文也不是上策，
因為太多的 span 或 div block(半個字一個！)會拉降效能
我認為比較合理的方式是直接寫 javascript 模擬一般的 terminal
但是雙色字會破壞中文字的字碼， javascript 似乎沒辦法處理
所以光用 javascript 是無法直接處理雙色字的
需要先將原始的檔案做過一層前處理, 把雙色字用特別方式表示
※ 引述《gmobug (泡泡蟲蟲)》之銘言：
: 如果一切都OK的話
: 那雙色字
: 是要把字重複兩次
: width:9px
: 第一個text-align:left
: 第二個text-align:right
: 是要這樣做嗎？
: (真麻煩為什麼CSS沒有雙色字的效果........)
: -------------------------------------------------
: 後記:
: 剛剛試了一下
: 測試檔在
: http://gmobug.twbbs.org/index-beta.php
: 雖然有點小bug但還算OK，等一下再來改
: 試了一下雙色字(用我目前亂搞的做法，因為不知道你說的做法到底是怎樣)
: 測試檔案http://gmobug.twbbs.org/lala1.ans
: IE:把width設的比字寬還小，沒作用，所以畫面上看起來就是兩個字
: Firefox:兩個字各顯示一半，可是第二個顯示的還是左半邊雖然text-align:right
: 有一些問題是瀏覽器預設字型不同造成的，
: 可是有時候指定了字型好像又不行...
: html原始碼爆長....
: -------------------------------------------------
: 後記2號
: 加了
: overflow:hidden;
: 在IE也可以顯示半個字了
: -------------------------------------------------
: 後記3號
: 我讓第二個字先輸出且width:18px
: 然後再輸出第一個字，width: 9px; position: relative; left: -18px;
: 雖然有點殘影不過還算成功XD!!!!
: -------------------------------------------------
: 後記4號
: 把-18改成-16殘影消失了，也就是說正常顯示了
: but猜測一改字型就會濫掉...
: 用span作成等寬字型的方法
: 換行好像有點秀逗
: IE跟Firefox的行為都莫名其妙
: 另一個沒有用span但是有雙色字的版本
: http://gmobug.twbbs.org/index-dc.php
: 有跑出一些些亂碼而且版面也歪了
: (版面歪是因為雙色字的關係，雖然第二個字移到第一個字上面了
: 但第二個字的位置還是空著，應該多幾行程式碼就可以修好可是目前懶的弄了...)
: ※ 引述《TKirby ( ^-^)》之銘言：
: : 我試的情況firefox是可以耶
: : 可能跟 firefox 本身的設定有關係？
: : 我現在把我前一篇的網址改了一下，
: : 硬做等寬，不知道這樣子你看有沒有等寬呢？
: : 用硬做等寬的方法基本上可以用同樣的道理做雙色字
: : 不過就要做一些編碼判斷
: : 這個硬來的方法可能不太適合用在非常長的文章
: : 剛剛試了一下360行的文章還算 ok
: : 不過在 firefox 下如果使用者變更字型大小會爛掉
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 140.112.30.52
討論串 (同標題文章)
Web_Design 近期熱門文章
PTT數位生活區 即時熱門文章
