用思源黑體有些字會被擋住

[sujunmin]

Debian buster + KDE Plasma

會像這樣

有些字會被蓋掉

用 Noto Sans CJK TC 思源黑體

[SmallpTsai]

同樣為這個問題所苦的人路過...

參考: https://stackoverflow.com/questions/31216103/how-to-prevent-span-tags-overlapping-each-other

利用 chrome DevTool (開發者工具), 手動幫 span b4/b7 加上 display: inline-block css 可以修正問題,

看了一下原始碼, 不太確定把 inline-block 加到所有的 span 是否合理, 而 b4/b7 看來語義也是上色, 而非 title, heading 這類的語義，所以把 inline-block 加到 b4/b7 也不見得對...

再麻煩其它高手提供意見了

[SmallpTsai]

另一種可能的解法是 在每一個 <span type="bbsrow"> 加上 overflow: hidden 防止畫出邊界 這個改法應該比較不會有副作用

[SmallpTsai]

@robertabcd,

環境

OS: MacOS Catalina Browser: Chrome

安裝 Noto Sans Mono CJK TC 字型 (https://www.google.com/get/noto/help/cjk/) 在 "設定 > 介面 > 字型"，使用 "Noto Sans Mono CJK TC" 就會看到如上的每欄都超出一部分

原因

參考: https://stackoverflow.com/questions/31216103/how-to-prevent-span-tags-overlapping-each-other

span 的大小是自動決定的，所以根據每個字型不同可能會有這種畫超過的問題

修改

我試著作了以下調整，為 bbsrow 加上 class=bbsrow 再為 bbsrow class 加上 overflow: hidden

在 local 看起來正常, 可以解決問題

這應該也不會影響用其它字型的情況

可以的話請看一下這樣的修改方式是否 ok, 若ok 我再提 PR，感謝

From 39d61763924364120edcaef22744c875232c25a6 Mon Sep 17 00:00:00 2001
From: Smallp Tsai <smallptsai@gmail.com>
Date: Tue, 26 Jan 2021 20:07:17 +0800
Subject: [PATCH] Add css overflow:hidden to bbsrow to prevent overdrawing when
 using "Noto Sans Mono CJK TC" fonts

---
 src/components/Row/index.js | 2 +-
 src/css/main.css            | 4 ++++
 src/js/term_view.js         | 2 ++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Row/index.js b/src/components/Row/index.js
index 23849a1..16d44e0 100644
--- a/src/components/Row/index.js
+++ b/src/components/Row/index.js
@@ -9,7 +9,7 @@ export const Row = ({
   onHyperLinkMouseOver,
   onHyperLinkMouseOut
 }) => (
-  <span type="bbsrow" srow={row}>
+  <span class="bbsrow" type="bbsrow" srow={row}>
     {chars
       .reduce(
         LinkSegmentBuilder.accumulator,
diff --git a/src/css/main.css b/src/css/main.css
index b63e372..e9710a4 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -369,3 +369,7 @@ span {
 .modal-backdrop {
   z-index: 1 !important;
 }
+
+.main .bbsrow {
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/src/js/term_view.js b/src/js/term_view.js
index 04db9ae..01ed097 100644
--- a/src/js/term_view.js
+++ b/src/js/term_view.js
@@ -805,6 +805,7 @@ TermView.prototype = {
     for (var i in lines) {
       var line = lines[i];
       var el = document.createElement('span');
+      el.setAttribute('class', 'bbsrow');
       el.setAttribute('type', 'bbsrow');
       el.setAttribute('srow', this.mainContainer.childNodes.length);
       this.mainContainer.appendChild(el);
@@ -816,6 +817,7 @@ TermView.prototype = {

   renderSingleRow: function(target, row) {
     var el = document.createElement('span');
+    el.setAttribute('class', 'bbsrow');
     el.setAttribute('type', 'bbsrow');
     el.setAttribute('srow', '0');
     target.appendChild(el);
-- 

[IepIweidieng]

我試著簡化了此修改內容。

在 src/css/main.css 中加上

.main [type='bbsrow'] {
  overflow: hidden;
}

即可。 bbsrow 已有 type="bbsrow" 此屬性，已可使用 CSS 選擇器指定出欲調整的 bbsrow 元素，因此不一定要增加新的 class。

參考資料

https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Selectors 請見「屬性選擇器（Attribute selector）」一項。

[IepIweidieng]

相關的 issue：https://github.com/iamchucky/PttChrome/issues/42

[Brli]

目前這個解法可以直接使用stylus/stylish套用 唯一的問題點在於有往下延伸的英文字母，ie. g,y,j,p,等，會被裁切

我試著簡化了此修改內容。

在 src/css/main.css 中加上

.main [type='bbsrow'] {
  overflow: hidden;
}

即可。 bbsrow 已有 type="bbsrow" 此屬性，已可使用 CSS 選擇器指定出欲調整的 bbsrow 元素，因此不一定要增加新的 class。

參考資料

https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Selectors 請見「屬性選擇器（Attribute selector）」一項。