MozTW 討論區 • 檢視主題 - BBSFox 相關討論

檢視沒有回覆的主題 | 檢視最近討論的主題

MozTW » 討論區首頁 » 附加元件 » Extension 擴充套件

所有顯示的時間為 UTC + 8 小時

BBSFox 相關討論

第 38 頁 (共 45 頁)

[ 665 篇文章 ]

前往頁數上一頁 1 ... 35，36，37，38，39，40，41 ... 45 下一頁

列印模式	上一個主題 \| 下一個主題

發表人

內容

mmis1000

文章主題 : Re: BBSFox 相關討論

發表於 : 2014-06-19, 12:09

註冊時間: 2013-04-13, 17:48
文章: 12

ettoolong 寫:

mmis1000 寫:

是否，有可能加上一個選項
給文字加上反白色？
像#ffffff 反白後就變 #000000
因為很多ansi圖都是要反白才能看的
但預設的反白是變藍底白字
這點實在不太方便

非常難實作, 一般文字倒還好, 雙色字就真的沒辦法.
因為CSS發展到現在, 仍然沒有一個簡單的方法去個別指定一個字的左右半邊要使用的顏色和底色.
更別提要幫這個字元指定反白後的顏色.

如果有好的方法我會試試的, 謝謝建議.

其實之前有試過
http://jsbin.com/daperice/5
不過圈選時會有小問題
而且有點複雜

回頂端

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0

ettoolong

文章主題 : Re: BBSFox 相關討論

發表於 : 2014-06-20, 16:26

[MozTW 版主群]

註冊時間: 2009-07-06, 18:15
文章: 418

mmis1000 寫:

ettoolong 寫:

其實之前有試過
http://jsbin.com/daperice/5
不過圈選時會有小問題
而且有點複雜

要來技術支援我嗎, 太感謝了. m(_ _)m

那下面就來講一下技術面的問題吧.
我看了一下你貼的方法, 這跟之前有人跟我講的方法差不多.
不過這個例子中用來顯示一字雙色的方法是第一版的BBSFox顯示模組所使用的.
就我所知目前其他在純文字下處裡BBS裡面雙色字的(FireBBS套件, DispBBS 等...) , 都是用這個方法.

說白了就是一個字貼兩次, 然候用第二次貼的時後只顯示左半去把第一字的左半蓋掉,
當然你還作了處裡去避免圈選複製時一個字變兩個字的問題.
但是既然它本質上還是兩個字, 所以在其它html適用的情況下, 都會被當成是兩個字.
例如你用ctrl+f 作搜尋, 你搜"中中文"這時不應該選到東西, 但是在這個例子裡是會選到.
因為你的文字內容就真的是"中中文", 同樣的, 對應一些可以作用在網頁上的其他Firefox套件, 都可能因此誤判.
所以後來我就不使用這個方法處理雙色字了.

目前BBSFox內使用的顯示模組已經是第三版, 是使用CSS3的pseudo-elements ::after去處裡雙色字問題,
基本上它一個Tag裡就只有一個字, 所以不會有複製,搜尋時被當成兩個字的情況.
不過因為你用來處理圈選的::selection 也是一個pseudo-elements, 所以衝突.
在這情況下, 似乎只有::after 被處理, ::selection 則失效.
另外, ::selection目前在Firefox當中還需要有-moz前綴才能生效, 表示這以後可能還會有修改.
所以這時候用可能不太好.

我稍微改過在BBSFox裡的CSS後, 套用::-moz-selection, 一般字是可以正常反白, 這沒問題,
但是雙色字都會維持原樣. 因為會想要有反白色的情況, 有很多是因為要看反白的ASCII圖,
而那些圖用到一字雙色的情況非常多.
照現在這樣只有非雙色字才能正常處理的話, 圖反白後不能看的機會很大.
這樣等於是處理一半, 比沒處理還糟糕.

另外一個使用習慣是關於我個人的, 就是目前反白後都是純色, 這樣文字會很清楚,
圈選狀態會一目了然, 對一般不是特別要看ASCII圖的使用來說, 會很好用.
與其處理一半, 不如乾脆不處理, 這就是BBSFox不處裡反白問題的原因.

我這邊可以給出一個折衷的辦法處理反白的問題:
提供一個熱鍵/快顯功能/手勢腳本來切換反白狀態,
一旦切換, 就一律反白處理, 也不用再用滑鼠去圈選畫面.
這樣對看那些大張需要翻頁又需要反白的ASCII圖來說更方便.
只要切換. 之後就等於全畫面一直有反白的效果. 也不用一翻頁就重新用滑鼠圈選.
不知道這樣能不能接受?

當然, 如果對雙色字的反白處理有更好的建議或技術上的提供, 都歡迎再來討論, 謝謝.

最後由 ettoolong 於 2014-07-04, 16:51 編輯，總共編輯了 1 次。

回頂端

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:30.0) Gecko/20100101 Firefox/30.0

mmis1000

文章主題 : Re: BBSFox 相關討論

發表於 : 2014-06-20, 22:06

註冊時間: 2013-04-13, 17:48
文章: 12

另外，方塊符號的邊緣似乎都有奇怪的細線？

是我ff的字形設定問題嗎？
但下載成好讀的話
拿去chrome看卻是正常的

回頂端

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0

ettoolong

文章主題 : Re: BBSFox 相關討論

發表於 : 2014-06-20, 23:30

[MozTW 版主群]

註冊時間: 2009-07-06, 18:15
文章: 418

mmis1000 寫:

另外，方塊符號的邊緣似乎都有奇怪的細線？
是我ff的字形設定問題嗎？
但下載成好讀的話
拿去chrome看卻是正常的

正常, 我記得是字型下方沒有填滿的關係.

對了上篇講到的反白熱鍵已經加入了, 首篇的3.0.26版可以測試, 熱鍵是ctrl+shift+z,
熱鍵預設是不使用, 要去設定頁開.

回頂端

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:30.0) Gecko/20100101 Firefox/30.0

mmis1000

文章主題 : Re: BBSFox 相關討論

發表於 : 2014-06-21, 12:34

註冊時間: 2013-04-13, 17:48
文章: 12

ettoolong 寫:

mmis1000 寫:

另外，方塊符號的邊緣似乎都有奇怪的細線？
是我ff的字形設定問題嗎？
但下載成好讀的話
拿去chrome看卻是正常的

似乎不是字形下方沒填滿，而是font-size跟height不一致的關係？
明明是 line-height:24px; font-size:24px; 的字
卻有26px的高度，導致下面多出2px的縫隙。
但在chrome上，貌似會強迫他只能有24px高，所以沒這問題
奇怪的是，在ff上，如果把他宣告成inline-block，高度又會被校正回24
至於字型下方沒有填滿應該是沒有剛好字級才會發生的。

回頂端

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0

ettoolong

文章主題 : Re: BBSFox 相關討論

發表於 : 2014-06-23, 17:56

[MozTW 版主群]

註冊時間: 2009-07-06, 18:15
文章: 418

mmis1000 寫:

ettoolong 寫:

mmis1000 寫:

另外，方塊符號的邊緣似乎都有奇怪的細線？
是我ff的字形設定問題嗎？
但下載成好讀的話
拿去chrome看卻是正常的

我試著改了一些CSS的部份, 沒用... 下面還是會有那條線. Orz

因為BBSFox之前也有移植到Chrome上, 當時我就有注意到Chrome的顯示效果比Firefox好一些.
但是那時沒有去深究原因, 因為瀏覽器間的顯示差異的確是常有的事.
我移到Chrome上面的版本用的顯示模組和Firefox的版本用的完全一樣, 但是顯示效果確實略有差異.
這邊有什麼好建議嗎? 看看CSS上面還有哪邊可以調整? 還是說這是Firefox本身的特性, 沒救?

回頂端

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:30.0) Gecko/20100101 Firefox/30.0

ettoolong

文章主題 : Re: BBSFox 相關討論

發表於 : 2014-06-23, 17:57

[MozTW 版主群]

註冊時間: 2009-07-06, 18:15
文章: 418

其實我還有一個顯示上的問題沒解決, 就是字體拉寬的那個設定.
這個字體拉寬的效果在我剛完成這功能的時候是OK的, 但是在最新的幾版的Firefox上卻會有嚴重的抖動問題.
看起來像是Firefox對字體render了兩次, 我手上有幾乎每一個版本的Firefox可以交叉比對,
我很確定這個問題在稍早的版本中是不會有的. 但是這問題我根本不知道要怎麼回報給官方.
因為很難形容, 只有親自用了才能看出問題.

2014/7/4 更新: 在最新的Firefox Nightly中, 這個問題消失了, 所以果然是之前的Firefox有bug.
所以可以預期在之後的幾版Firefox中, 這問題會解決.

2014/8/7 更新: 在最新的Firefox Nightly中, 這個問題又發生了.

2015/2/3 更新: 於BBSFox 3.0.42版中修正.

最後由 ettoolong 於 2015-02-03, 21:27 編輯，總共編輯了 3 次。

回頂端

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:30.0) Gecko/20100101 Firefox/30.0

mmis1000

文章主題 : Re: BBSFox 相關討論

發表於 : 2014-06-23, 22:26

註冊時間: 2013-04-13, 17:48
文章: 12

ettoolong 寫:

mmis1000 寫:

ettoolong 寫:

線只會變細，字形本身的沒救(會剩0.5~1px左右)，不過也比原本好不少
基本上是文字resize時或是向量字體轉點陣圖的模糊或誤差造成的
開一個網頁把各種字寬的字都列出會發現
在某些字級下，字的邊緣會很清晰
像細明體20px就很清晰，也不會透出細線
某些字級則是徹底炸掉

像16px的就完全爛掉

雖然檢測器寫著16*16，但那個字明顯不到那個大小，
寬度怎麼看都只有15，所以整個版面都是垂直細線

回頂端

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0

ettoolong

文章主題 : Re: BBSFox 相關討論

發表於 : 2014-06-24, 13:24

[MozTW 版主群]

註冊時間: 2009-07-06, 18:15
文章: 418

mmis1000 寫:

線只會變細，字形本身的沒救(會剩0.5~1px左右)，不過也比原本好不少
基本上是文字resize時或是向量字體轉點陣圖的模糊或誤差造成的
開一個網頁把各種字寬的字都列出會發現
在某些字級下，字的邊緣會很清晰
像細明體20px就很清晰，也不會透出細線
某些字級則是徹底炸掉
像16px的就完全爛掉
雖然檢測器寫著16*16，但那個字明顯不到那個大小，
寬度怎麼看都只有15，所以整個版面都是垂直細線

不知道和這篇講的有沒有關...
https://www.ptt.cc/bbs/Browsers/M.1259506648.A.5DD.html

回頂端

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:30.0) Gecko/20100101 Firefox/30.0

u881831

文章主題 : Re: BBSFox 相關討論

發表於 : 2014-06-26, 22:50

註冊時間: 2010-05-21, 03:08
文章: 29

ettoolong 寫:

mmis1000 寫:

不知道和這篇講的有沒有關...
https://www.ptt.cc/bbs/Browsers/M.1259506648.A.5DD.html

16px的部分因為細明體在部分的字型大小之下使用點陣字型，
http://netlab.cse.yzu.edu.tw/~statue/fr ... ngliu.html
這時的實際字體大小就看字型設計者怎麼畫，
不一定會照16px的比例。
使用向量字型的形況下字體實際大小照比例縮放，
就比較不會出問題。
另外20px也是點陣字型，
大小剛好符合比例，
而且點陣字型也比較不會出現細線的問題。

細線的部分是ClearType 的 Anti-Aliasing（反鋸齒）造成的，
http://zh.wikipedia.org/wiki/ClearType
我想color.css 檔裡面會需要用到text-shadow 應該也是這個原因。
附帶一提，
FX和GC應該都有點陣字型和細線的問題。

PCMan 的解決方法是把填色方塊文字用真正的方塊取代，
這樣就不會有反鋸齒造成的細線。

其實純文字介面的bbsfox應該也可以這樣做，
把原本的文字變成透明後，
再插入同樣形狀的pseudo-elements 方塊。
另外雙色字可能就要插入兩個 pseudo-elements。

目前pcmanfx 有處理的就只有兩類填色方塊：
https://code.google.com/p/pcmanfx/sourc ... awutils.js
第一類的▁▂▃▄▅▆▇█ ▏▎▍▌▋▊▉都是長方形很容易實作，
第二類的◢◣◥◤比較麻煩不過也有一些方法可以實作，
下面是其中一種範例：

代碼:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style>
body {
    background-color: black;
    font-family: monospace;
    font-size: 48px;
    line-height: 48px;
}
#x25e3 {
    position: relative;
    background-color: blue;
    font-size: 48px;
}
#x25e3::after {
    content:" ";
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0px;
    border-top: 24px solid transparent;
    border-bottom: 24px solid red;
    border-left: 24px solid red;
    border-right: 24px solid transparent;
}
#x25e3_half {
    position: relative;
    background-color: blue;
    font-size: 48px;
}
#x25e3_half::after {
    content:" ";
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0px;
    border-top: 24px solid transparent;
    border-bottom: 24px solid red;
    border-left: 24px solid red;
    border-right: 0px solid transparent;
}
</style>
</head>
<body>
<div><span id="x25e3">　</span><span id="x25e3_half">　</span></div>
</body>
</html>

其他填色方塊的部分，
基本上不是看不出細線就是在ANSI圖以外的地方看起來很怪。

雖然字體下方多幾個pixels的問題應該還是一樣沒解決，（canvas沒有這個問題）
不過點陣字型和細線的問題應該就解決了，
另外拉寬字體產生縫隙的部分，
我覺得修正之後應該也不大看的出來。

PS.
雙色字反白處理的部分，
我以前曾經試過將FX原來的反白效果藏起來，
然後直接將被選取區域的顏色改掉。
（使用新版bbsfox的顯示模組）
雖然顯示效果很好，
不過這樣一來要監控mousemove keyup keydown 等事件，
而且還要動到DOM ，
所以效能非常差。
我想實際上應該也只有整個頁面反白會用到，
所以我想現在這樣應該就夠了。

回頂端

Mozilla/5.0 (Windows NT 6.3; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0

ettoolong

文章主題 : Re: BBSFox 相關討論

發表於 : 2014-06-27, 12:56

[MozTW 版主群]

註冊時間: 2009-07-06, 18:15
文章: 418

u881831 寫:

感謝解惑, 但是有一點不太明白,
它提到在11, 12, 13, 15, 16, 20這幾個大小下有點陣字型,
但是在沒有改變字體長寬比的情況下, 點陣和向量會有差嗎?
我測的結果, 如果系統恰好套用到這幾個大小的點陣圖, 就會在字的邊界出現明顯的空隙.

我看到的破圖, 有三種:

一種是字體下方的空隙, 這不管用哪個大小的字體都會有, 這應該是Firefox排版時留下的,
如果剛好套用到上面講的那幾個點陣字型, 這問題就會更嚴重(字本身的邊緣空隙+Firefox排版空隙)
不知道有沒有辦法消去這個排版留下的空隙? 因為這是目前看到的破圖的最大原因.

第二種是字體右邊的空隙, 這只在套用到點陣字體時發生.
但是現在電腦螢幕都滿大的, 所以大部份都會因為套用到向量字體而讓這個問題不發生.

另外就是, windows和Mac的差別, 我在Mac下, 似乎都會因為系統永遠套用向量字體(偉哉!賈伯斯),
所以任何大小下, 都不會有點陣字體產生的空隙, 只會有下方的Firefox排版空隙.

第三種破圖來自▼▲這兩個符號, 這兩個符號的上和下確實是有空隙的, 所以是字本身的問題,
跟字體大小完全沒關, 也跟Firefox的排版方式無關,
我看到pcmanfx在修掉破圖的選項中, 切換間最大的差異反而是這兩個.

u881831 寫:

細線的部分是ClearType 的 Anti-Aliasing（反鋸齒）造成的，
http://zh.wikipedia.org/wiki/ClearType
我想color.css 檔裡面會需要用到text-shadow 應該也是這個原因。

沒錯, 因為邊緣的平滑處理產生了一些溢色, 只好畫幾層陰影把它蓋掉. Orz

u881831 寫:

附帶一提，
FX和GC應該都有點陣字型和細線的問題。

PCMan 的解決方法是把填色方塊文字用真正的方塊取代，
這樣就不會有反鋸齒造成的細線。

其實純文字介面的bbsfox應該也可以這樣做，
把原本的文字變成透明後，
再插入同樣形狀的pseudo-elements 方塊。
另外雙色字可能就要插入兩個 pseudo-elements。

目前pcmanfx 有處理的就只有兩類填色方塊：
https://code.google.com/p/pcmanfx/sourc ... awutils.js
第一類的▁▂▃▄▅▆▇█ ▏▎▍▌▋▊▉都是長方形很容易實作，
第二類的◢◣◥◤比較麻煩不過也有一些方法可以實作，
下面是其中一種範例：

wow... 原來還可以這樣用, 之前都沒想到, 我來想想怎麼套到現在的顯示模組上.
這應該可以解決上面那幾個套用到點陣字體大小的問題.
至於▼和▲也可以用這個方法畫出來. 不過這應該不太好畫.

u881831 寫:

其他填色方塊的部分，
基本上不是看不出細線就是在ANSI圖以外的地方看起來很怪。

雖然字體下方多幾個pixels的問題應該還是一樣沒解決，（canvas沒有這個問題）
不過點陣字型和細線的問題應該就解決了，
另外拉寬字體產生縫隙的部分，
我覺得修正之後應該也不大看的出來。

拉寬字體產生縫隙我在chrome上才看到, Firefox的話倒是沒注意到,
應該說本來就有上面講到的問題, 因此這個問題被我忽略了.

u881831 寫:

PS.
雙色字反白處理的部分，
我以前曾經試過將FX原來的反白效果藏起來，
然後直接將被選取區域的顏色改掉。
（使用新版bbsfox的顯示模組）
雖然顯示效果很好，
不過這樣一來要監控mousemove keyup keydown 等事件，
而且還要動到DOM ，
所以效能非常差。
我想實際上應該也只有整個頁面反白會用到，
所以我想現在這樣應該就夠了。

反白的處理, 處理滑鼠事件的效能影響, 還有其他套件可能衝突的問題, 因此不考慮.
我也是頃向維持現在的方式就好了.

感謝大師提供的方法, 我試看看能不能套用上去看看, 不過真的最大的問題還是字體下方的空隙 Orz

回頂端

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:30.0) Gecko/20100101 Firefox/30.0

u881831

文章主題 : Re: BBSFox 相關討論

發表於 : 2014-06-27, 20:13

註冊時間: 2010-05-21, 03:08
文章: 29

ettoolong 寫:

u881831 寫:

感謝解惑, 但是有一點不太明白,
它提到在11, 12, 13, 15, 16, 20這幾個大小下有點陣字型,
但是在沒有改變字體長寬比的情況下, 點陣和向量會有差嗎?
我測的結果, 如果系統恰好套用到這幾個大小的點陣圖, 就會在字的邊界出現明顯的空隙.

沒有改變字體長寬比的情況下，
16px用的是點陣字型，
這時候字型設計者因為某些原因把填色方塊文字畫成14px寬或更小，
然後在上下左右邊界留幾個pixels。
當然字型設計者也可以畫到剛剛好一樣大，
這時候就不會有空隙。
向量字型就程式自己算字體實際大小，
不會出現字型設計者手動修改字體實際大小的情形。
至於改變字型長寬比的話我就不知道瀏覽器是怎麼實作的。

ettoolong 寫:

我看到的破圖, 有三種:

一種是字體下方的空隙, 這不管用哪個大小的字體都會有, 這應該是Firefox排版時留下的,
如果剛好套用到上面講的那幾個點陣字型, 這問題就會更嚴重(字本身的邊緣空隙+Firefox排版空隙)
不知道有沒有辦法消去這個排版留下的空隙? 因為這是目前看到的破圖的最大原因.

當行高等於字型大小時，
通常下方多出來的空隙都會被下一行文字的背景蓋掉，
所以我覺得在ANSI圖中出現這種破圖的情形不多。
我想只要限定bbsline 容器的高度為1 em，
應該就可以修掉這種破圖了吧，
只是不知道這個修改會不會產生什麼副作用。

ettoolong 寫:

第二種是字體右邊的空隙, 這只在套用到點陣字體時發生.
但是現在電腦螢幕都滿大的, 所以大部份都會因為套用到向量字體而讓這個問題不發生.

另外就是, windows和Mac的差別, 我在Mac下, 似乎都會因為系統永遠套用向量字體(偉哉!賈伯斯),
所以任何大小下, 都不會有點陣字體產生的空隙, 只會有下方的Firefox排版空隙.

第三種破圖來自▼▲這兩個符號, 這兩個符號的上和下確實是有空隙的, 所以是字本身的問題,
跟字體大小完全沒關, 也跟Firefox的排版方式無關,
我看到pcmanfx在修掉破圖的選項中, 切換間最大的差異反而是這兩個.

u881831 寫:

PCMan 的解決方法是把填色方塊文字用真正的方塊取代，
這樣就不會有反鋸齒造成的細線。

其實純文字介面的bbsfox應該也可以這樣做，
把原本的文字變成透明後，
再插入同樣形狀的pseudo-elements 方塊。
另外雙色字可能就要插入兩個 pseudo-elements。

目前pcmanfx 有處理的就只有兩類填色方塊：
https://code.google.com/p/pcmanfx/sourc ... awutils.js
第一類的▁▂▃▄▅▆▇█ ▏▎▍▌▋▊▉都是長方形很容易實作，
第二類的◢◣◥◤比較麻煩不過也有一些方法可以實作，
下面是其中一種範例：

正三角形基本上也一樣不會很難畫，
只是這個修正也會拉長一般文字內的正三角形，
就會變得很不好看，
除非檢測上下相鄰的是不是填色方塊再決定是否要套用修正，
不然不建議預設開啟正三角形的修正。

代碼:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style>
body {
    background-color: black;
    font-family: monospace;
    font-size: 48px;
    line-height: 1em;
}
.line {
    display: inline-block;
    height: 1em;
    overflow-y: hidden;
}
#x25b2 {
    position: relative;
    background-color: blue;
}
#x25b2::after {
    content:" ";
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    border-top: 0 solid transparent;
    border-bottom: 1em solid red;
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
}
#x25b2_half {
    position: relative;
    background-color: blue;
}
#x25b2_half::after {
    content:" ";
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    border-top: 0 solid transparent;
    border-bottom: 1em solid red;
    border-left: 0.5em solid transparent;
    border-right: 0 solid transparent;
}
#x258f {
    position: relative;
    background-color: blue;
    font-size: 1em;
}
#x258f::after {
    content:" ";
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0px;
    border-top: 0.5em solid red;
    border-bottom: 0.5em solid red;
    border-left: 0.0625em solid red;
    border-right: 0 solid red;
}
</style>
</head>
<body>
<span class="line"><span id="x25b2">　</span><span id="x25b2_half">　</span><span id="x258f">　</span></span>
</body>
</html>

這個修正我還沒在主要作業系統及主要瀏覽器之間完整測試過，
就我之前的經驗跨作業系統及瀏覽器的測試除錯相當的麻煩。

回頂端

Mozilla/5.0 (Windows NT 6.3; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0

mmis1000

文章主題 : Re: BBSFox 相關討論

發表於 : 2014-07-01, 21:26

註冊時間: 2013-04-13, 17:48
文章: 12

u881831 寫:

ff下，inline元素裡如果包含同高度的文字，高度會被撐高(但block元素不會???)
但inline元素無法設定line-height，所以外面的樣式對他沒用
所以雙色字的部分會偏掉，
要解決這個問題其實設成inline-block就行了
限定高度的解法沒用
http://jsbin.com/kazos/1/edit

回頂端

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0

ettoolong

文章主題 : Re: BBSFox 相關討論

發表於 : 2014-07-01, 22:29

[MozTW 版主群]

註冊時間: 2009-07-06, 18:15
文章: 418

u881831 寫:

這個修正我還沒在主要作業系統及主要瀏覽器之間完整測試過，
就我之前的經驗跨作業系統及瀏覽器的測試除錯相當的麻煩。

hhhmmm... 經過幾天的修改... 特殊符號用畫的部份大致上能套到目前的顯示模組裡,
◢◣◥◤這些:
單色:

代碼:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style>
body {
    background-color: black;
    font-family: monospace;
    font-size: 48px;
    line-height: 1em;
    margin: 0px;    
}
.line {
    display: inline-block;
    height: 1em;
    overflow-y: hidden;
}
#x25e2 {
    position: relative;
    background-color: blue;
}
#x25e2::after {
    content:" ";
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0px;
    border-bottom: 1em solid red;
    border-left: 1em solid transparent;
}
</style>
</head>
<body>
<div>
<span class="line"><span id="x25e2">　</span>
</div>
</body>
</html>

雙色:

代碼:

#x25e2_half {
    position: relative;
    background-color: blue;
}
#x25e2_half::before{
    content:" ";
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0px;
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid red;
    border-left: 0.5em solid transparent;
}
#x25e2_half::after{
    content:" ";
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0em;
    border-bottom: 0.5em solid transparent;
    border-top: 0.5em solid green;
    border-left: 0.5em solid green;

    transform: rotate(180deg);
    transform-origin:right center;
}

▏▎▍▌▋▊▉ 這些 (0x2589~0x258f)
單色:

代碼:

#x258f {
    position: relative;
    background-color: blue;
}
#x258f::after{
    content:" ";
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0em;
    border-top: 0.5em solid red;
    border-bottom: 0.5em solid red;
    border-left: 0.875em solid red;
}

雙色:

代碼:

#x258f_half {
    position: relative;
    background-color: blue;
}
#x258f_half::before{
    content:" ";
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0em;
    border-top: 0.5em solid red;
    border-bottom: 0.5em solid red;
    border-left: 0.5em solid red;
}
#x258f_half::after{
    content:" ";
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0.5em;
    border-top: 0.5em solid green;
    border-bottom: 0.5em solid green;
    border-left: 0.375em solid green;
}

▁▂▃▄▅▆▇ 這些 (0x2581~0x2587)
單色:

代碼:

#x2581 {
    position: relative;
    background-color: blue;
}
#x2581::after{
    content:" ";
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    left: -0.125em;
    border-top: 0.5em solid red;
    border-bottom: 0.5em solid red;
    border-left: 0.125em solid red;
    transform: rotate(90deg);
    transform-origin:right bottom;
}

雙色: 對...問題就出在雙色, 怎麼排都不對呀,
我遇到的問題: 方塊都是從左上開始畫的, 所以要產生在下方的方塊, 就只能用rotate去轉.
然後... top不能用, 因為它的top很怪, 設0px或0em, 都是從更上面一點的地方開始算.
CSS內我不能指定px這種值, 只能用em, 因為字體大小是變動的.
然後我沒辦法用rotate把方塊轉到下方(只有一半寬度) Orz
這樣有解嗎?

mmis1000 寫:

關於高度被撐高這個問題, 我把雙色字的那個span調成inline-block後, 解決了.
感謝, 難怪之前一直有左右對不起來的問題.

回頂端

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0

u881831

文章主題 : Re: BBSFox 相關討論

發表於 : 2014-07-02, 23:56

註冊時間: 2010-05-21, 03:08
文章: 29

ettoolong 寫:

u881831 寫:

這個修正我還沒在主要作業系統及主要瀏覽器之間完整測試過，
就我之前的經驗跨作業系統及瀏覽器的測試除錯相當的麻煩。

hhhmmm... 經過幾天的修改... 特殊符號用畫的部份大致上能套到目前的顯示模組裡,

▁▂▃▄▅▆▇ 這些 (0x2581~0x2587)
單色:

代碼:

#x2581 {
    position: relative;
    background-color: blue;
}
#x2581::after{
    content:" ";
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    left: -0.125em;
    border-top: 0.5em solid red;
    border-bottom: 0.5em solid red;
    border-left: 0.125em solid red;
    transform: rotate(90deg);
    transform-origin:right bottom;
}

0x2581~0x2587 的話我想應該可以用這個方法解決：

代碼:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style>
body {
    background-color: black;
    font-family: monospace;
    font-size: 48px;
    line-height: 1em;
}
.line {
    display: inline-block;
    height: 1em;
    overflow-y: hidden;
}
#x2581 {
    position: relative;
    background-color: blue;
}
#x2581::after {
    content:" ";
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    margin-top: 0.875em;
    border-bottom: 0.125em solid red;
    border-left: 0.5em solid red;
    border-right: 0.5em solid red;
}
#x258f {
    position: relative;
    background-color: blue;
    font-size: 1em;
}
#x258f::after {
    content:" ";
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    border-top: 0.5em solid red;
    border-bottom: 0.5em solid red;
    border-left: 0.125em solid red;
    border-right: 0 solid red;
}
</style>
</head>
<body>
<span class="line"><span id="x2581">　</span><span id="x258f">　</span></span>
</body>
</html>

不過很遺憾的是，
FX似乎偶爾會把margin-top和border-bottom 都無條件捨去到整數px再顯示，
於是下方就出現細線。
如果你的模組沒出現這個問題就不用管它，
如果出現的話就把margin-top或是border-bottom 稍微加大一點點，
我想重要的是不要產生細線，
填色方塊稍微偏離八分之一的比例也許不會大幅影響顯示效果。

ettoolong 寫:

mmis1000 寫:

關於高度被撐高這個問題, 我把雙色字的那個span調成inline-block後, 解決了.
感謝, 難怪之前一直有左右對不起來的問題.

其實這邊我想表達的是把包含整個行的容器限高並截掉超出去的部分，
就是我範例中的<span class="line"> ，
不過效果似乎沒有很好，
看起來上面被截掉一點下面還是有背景色的細線。

另外這個範例在使用者改變縮放比例時還是偶爾會出現縫隙，
我不知道這個問題有沒有嚴重到必須花時間去修正，
我想如果要修正的話，
也許也能用稍微放大填色方塊的方法解決。

回頂端

Mozilla/5.0 (Windows NT 6.3; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0

第 38 頁 (共 45 頁)

[ 665 篇文章 ]

前往頁數上一頁 1 ... 35，36，37，38，39，40，41 ... 45 下一頁

MozTW » 討論區首頁 » 附加元件 » Extension 擴充套件

所有顯示的時間為 UTC + 8 小時

誰在線上

正在瀏覽這個版面的使用者：沒有註冊會員和 26 位訪客

您不能在這個版面發表主題
您不能在這個版面回覆主題
您不能在這個版面編輯您的文章
您不能在這個版面刪除您的文章
您不能在這個版面上傳附加檔案

前往 :