ಠ_ಠ
@anonymous
偷偷說
Wed, Jun 19, 2024 10:07 PM
43
16
Wed, Jun 19, 2024 10:21 PM
AO3
WorkSkin
因為這一篇
ಠ_ಠ - 從沒想過但今天突然冒出來的問題 為什麼日本文手都會把文直式書寫、分成兩欄、輸出成圖?還都很貼...
寫了一個縱書的work skin
縱書文本格式 Vertical Writing work skin - Anonymous - No F...
我也不習慣看縱書,但感覺很酷就寫了
Sat, Jun 22, 2024 8:19 AM
AO3
WorkSkin
縱書
直書
因為這一篇
ಠ_ಠ - 從沒想過但今天突然冒出來的問題 為什麼日本文手都會把文直式書寫、分成兩欄、輸出成圖?還都很貼...
寫了一個縱書的work skin
縱書文本格式 Vertical Writing work skin - Chapter 1 - Anon...
我也不習慣看縱書,但感覺很酷就寫了
rice2737
Wed, Jun 19, 2024 10:20 PM
噗主有要分享嗎
ಠ_ಠ
Wed, Jun 19, 2024 10:20 PM
有 忘記貼連結了XDD
ಠ_ಠ
Wed, Jun 19, 2024 10:20 PM
縱書文本格式 Vertical Writing work skin - Anonymous - No F...
ಠ_ಠ
Wed, Jun 19, 2024 10:21 PM
rice2737: 謝提醒XDD
rice2737
Wed, Jun 19, 2024 10:26 PM
太酷了!!不過要作者編輯文本內容才行是嗎?
swan5282
Wed, Jun 19, 2024 11:35 PM
好酷
ಠ_ಠ
Thu, Jun 20, 2024 9:17 AM
rice2737: 是的
也可以放在site skin,但這樣閱讀其他語言也會變成縱書;或利用腳本或書籤小工具,這部分有一點超出我的知識範圍
rice2737
Thu, Jun 20, 2024 12:34 PM
來回報一下,請不要在意內容XDD
用電腦看而已,手機沒測試
效果很好欸!!
文字應該強制新細明體比較好?標點會至中。
在想英文中用em強調的斜體應該可以用標楷體呈現?(沒有要麻煩噗主的意思,自己要弄的話大概寫得出來XD)
竹取 JS
不過這個粗體強調會在旁邊加點不知道怎麼弄的XDD
總之謝謝噗主!!
ಠ_ಠ
Thu, Jun 20, 2024 2:49 PM
rice2737: 哇謝謝回報
新細明體看起來很不錯,應該在div.userstuff .vertical底下新增一個 font-family: "PMingLiU"; 就行了
調整斜體跟粗體的概念很棒,謝謝分享!
標楷體也是類似,調整斜體的字型是多一個div.userstuff .vertical
em
, div.userstuff .vertical
i
{ font-style: normal; font-family: cursive或DFKai-SB; }
rice2737
Thu, Jun 20, 2024 2:53 PM
ಠ_ಠ: 謝謝噗主還是把CSS寫出來了XD
ಠ_ಠ
Thu, Jun 20, 2024 2:55 PM
然後粗體強調的加點我找到方法了是這樣
div.userstuff .vertical strong, div.userstuff .vertical b { font-weight: normal; text-emphasis: filled; }
也可以把斜體改成類似書名號
div.userstuff .vertical em, div.userstuff .vertical i { font-style: normal; text-decoration: underline wavy; }
這個text-emphasis或text-decoration蠻好用的,很適合縱書文字的標點符號,更多請參考
這裡
!
ಠ_ಠ
Thu, Jun 20, 2024 2:57 PM
rice2737: 哈哈哈因為難得有人真的用了,很感動
rice2737
Thu, Jun 20, 2024 6:15 PM
再來回報一下~
目前是em用標楷體
strong用微軟正黑體加粗(雖然點點很酷但好像不適合XD)
然後噗主在文中補充的文字直立部分,需要用到的數字和字母我用span包起來加text-orientation: upright
遇到的小問題(噗主不一定要幫忙解答,因為我覺得這些問題不大)
rice2737
Thu, Jun 20, 2024 6:15 PM
微軟正黑的的音界號不知為何直書變句號
微軟正黑的標點沒有置中(好像無解?)
日期數字不知可不可以並排?目前這樣好像也沒關係就是
rice2737
Thu, Jun 20, 2024 6:16 PM
書信的表示不知有沒有更好的寫法?
目前是屬名置右,祝福語置中
rice2737
Thu, Jun 20, 2024 6:18 PM
用sup寫的footnote超連結不知為何有線干擾
然後用firefox看的冒號沒有轉直(想放生不管XD)
用手機看字體沒有變新細明體(我直接寫建議電腦看,反正手機就不適合XD)
大概就這樣,再次感謝噗主,縱書看起來實在太有趣了XDD
ಠ_ಠ
Thu, Jun 20, 2024 6:56 PM
rice2737: 哇謝謝旅人 看起來好像出版書好讚
字型真的無解XD 如果有支援noto sans tc可以試試看,我發現這個字型標點符號表現上幾乎沒問題
footnote問題大概是預設的超連結底線,加一個div.userstuff .vertical a { border: none; 或 text-decoration: none; } 應該可以解決
日期數字跟書信現在有想到解法,明後天再來試試看能不能成
另外也可以告知讀者能夠點擊頁面上方的Hide creator's style就會回到橫書了!(em、strong、footnote會變回預設格式,[align]不會
難得收到回覆,看到旅人真的用了覺得好開心,謝謝
ಠ_ಠ
Thu, Jun 20, 2024 7:01 PM
ps. 我發現那個粗體點點好像是日文一種叫做著重號的標點符號,以前中文也有類似的,不過我們目前好像很少用到了
rice2737
Thu, Jun 20, 2024 7:03 PM
我是把橫書和直書分成兩篇放,所以有些橫書看起來會怪的就不管了(欸
截圖起來真的好像出版書好好玩
噗主也好晚睡,晚安感謝XD
rice2737
Thu, Jun 20, 2024 9:42 PM
noto sans tc和超連結border: none;都解決了,謝謝!(不過只能建議讀者下載思源黑體沒辦法head載入對嗎?反正把正黑放在第二順位了)
用思源黑體音界號也正常顯示
rice2737
Thu, Jun 20, 2024 9:47 PM
目前就剩書信排版稱謂頂格,和祝福語不知怎麼放了
再次感謝噗主,這個格式看起來真的好酷XDD
rice2737
Thu, Jun 20, 2024 10:25 PM
欣賞一下標點置中的思源黑體(?
rice2737
Fri, Jun 21, 2024 2:07 AM
然後這是用三星平板看的,亂加字形不知道哪個生效的(
不知為何空兩格便空一格(手機平板暫時放生)
ಠ_ಠ
Fri, Jun 21, 2024 2:17 AM
rice2737: 耶思源黑體讚!(是的,目前AO3沒有支援導入字型,大概跟授權有點關係,未來可能也不會開放
稱謂頂格的部分,文章最底下補充的 .no-indent { text-indent: 0; } 可以取消空兩格的縮排~
然後我發現我不太清楚書信排版的位置XD 不知道能不能請旅人在圖上稍微標一下擺在哪裡比較理想,謝謝
rice2737
Fri, Jun 21, 2024 2:33 AM
頂格處理OK多謝
書信這邊其實也不是標準寫法XD理想是想要這樣,在屬名的斜上方
但如果無法的話中間偏下就好
真的不強求!!噗主大大
rice2737
Fri, Jun 21, 2024 2:36 AM
或這樣之類的
ಠ_ಠ
Fri, Jun 21, 2024 2:57 AM
rice2737: 給我一兩天思考一下,沒想到辦法就算了XD
日期那個應該可以做到,晚上確定一下再來回
rice2737
Fri, Jun 21, 2024 3:01 AM
ಠ_ಠ: 真的非常感謝!!噗主有在用噗幣嗎?不知道該如何表達謝意了
ಠ_ಠ
Fri, Jun 21, 2024 4:35 PM
rice2737: 不知不覺又改天了XD 有想到辦法了!
日期的部分,如果旅人需要直立顯示的大部分是日期數字的話,可以把.upright的CSS調整成這樣
writing-mode: horizontal-tb; /*
改回橫書
*/
text-orientation: upright; /*
文字直立顯示
*/
text-indent: 0; /*
刪去縮排
*/
後面是註解,貼上CSS之後會自動刪除。只是如果超出兩個數字,例如英文縮寫,就會拉寬段落p的寬度
ಠ_ಠ
Fri, Jun 21, 2024 4:42 PM
謝謝旅人
願意用這個work skin我就很開心了,畢竟我本來就是想做給大家用才做的
rice2737
Fri, Jun 21, 2024 5:33 PM
成功!
看來感謝方法是多多推廣了XD
ಠ_ಠ
Sat, Jun 22, 2024 8:24 AM
上傳了新的一章把之前我們提到的內容補充進去了!
縱書文本格式 Vertical Writing work skin - Chapter 2 - Anon...
rice2737
Sat, Jun 22, 2024 8:28 AM
喔喔看到書信格式了!謝謝,晚點來測試!
ಠ_ಠ
Sat, Jun 22, 2024 8:34 AM
rice2737: 目前可能沒辦法做到能夠自動重疊(職銜的最後一個字與屬名第一個字)。
如果作品裡這樣的內容不多,可以給它專門設一個class,例如: .position { margin-bottom: -1em; } 表示底部邊距突出1個字元。
另外旅人的範例裡會需要用到兩次footer,第一次給祝福語、服務單位,第二次給職銜、屬名~
rice2737
Sat, Jun 22, 2024 8:35 AM
好的!感謝,正在研究中
ಠ_ಠ
Sat, Jun 22, 2024 8:35 AM
rice2737: 也謝謝旅人回報讓這個work skin可以更完整
ಠ_ಠ
Sat, Jun 22, 2024 8:38 AM
啊話說,我看到旅人的inspire了!請問我可以列到作品介面底下嗎
rice2737
Sat, Jun 22, 2024 8:40 AM
可以XD就給大家當參考
rice2737
Sat, Jun 22, 2024 9:27 AM
成功了
只是不知為何margin-bottom -1em要加important才顯示的出來
修完其他書信部分就完成啦!!感謝噗主!!!!
ಠ_ಠ
Sat, Jun 22, 2024 9:36 AM
rice2737: 好像是因為我原本的CSS有疊很多層選擇器的關係
如果改成div.userstuff .vertical .footer .position 應該可能就不用!important了,但是直接用!important比較方便XD
ಠ_ಠ
Sat, Jun 22, 2024 9:46 AM
rice2737: 旅人我發現我字型用的times new roman會導致刪節號沒有置中QQ 看起來沒辦法選好的英文字型了,可惡
rice2737
Sat, Jun 22, 2024 10:01 AM
啊對欸,只好改回去XD
載入新的回覆
因為這一篇
縱書文本格式 Vertical Writing work skin - Anonymous - No F...
我也不習慣看縱書,但感覺很酷就寫了
因為這一篇
縱書文本格式 Vertical Writing work skin - Chapter 1 - Anon...
我也不習慣看縱書,但感覺很酷就寫了
也可以放在site skin,但這樣閱讀其他語言也會變成縱書;或利用腳本或書籤小工具,這部分有一點超出我的知識範圍
來回報一下,請不要在意內容XDD
用電腦看而已,手機沒測試
效果很好欸!!
文字應該強制新細明體比較好?標點會至中。
在想英文中用em強調的斜體應該可以用標楷體呈現?(沒有要麻煩噗主的意思,自己要弄的話大概寫得出來XD)
竹取 JS 不過這個粗體強調會在旁邊加點不知道怎麼弄的XDD
總之謝謝噗主!!
新細明體看起來很不錯,應該在div.userstuff .vertical底下新增一個 font-family: "PMingLiU"; 就行了
調整斜體跟粗體的概念很棒,謝謝分享!
標楷體也是類似,調整斜體的字型是多一個div.userstuff .vertical em, div.userstuff .vertical i { font-style: normal; font-family: cursive或DFKai-SB; }
div.userstuff .vertical strong, div.userstuff .vertical b { font-weight: normal; text-emphasis: filled; }
也可以把斜體改成類似書名號
div.userstuff .vertical em, div.userstuff .vertical i { font-style: normal; text-decoration: underline wavy; }
這個text-emphasis或text-decoration蠻好用的,很適合縱書文字的標點符號,更多請參考這裡!
目前是em用標楷體
strong用微軟正黑體加粗(雖然點點很酷但好像不適合XD)
然後噗主在文中補充的文字直立部分,需要用到的數字和字母我用span包起來加text-orientation: upright
遇到的小問題(噗主不一定要幫忙解答,因為我覺得這些問題不大)
微軟正黑的的音界號不知為何直書變句號
微軟正黑的標點沒有置中(好像無解?)
日期數字不知可不可以並排?目前這樣好像也沒關係就是
書信的表示不知有沒有更好的寫法?
目前是屬名置右,祝福語置中
用sup寫的footnote超連結不知為何有線干擾
然後用firefox看的冒號沒有轉直(想放生不管XD)
用手機看字體沒有變新細明體(我直接寫建議電腦看,反正手機就不適合XD)
大概就這樣,再次感謝噗主,縱書看起來實在太有趣了XDD
字型真的無解XD 如果有支援noto sans tc可以試試看,我發現這個字型標點符號表現上幾乎沒問題
footnote問題大概是預設的超連結底線,加一個div.userstuff .vertical a { border: none; 或 text-decoration: none; } 應該可以解決
日期數字跟書信現在有想到解法,明後天再來試試看能不能成
另外也可以告知讀者能夠點擊頁面上方的Hide creator's style就會回到橫書了!(em、strong、footnote會變回預設格式,[align]不會
難得收到回覆,看到旅人真的用了覺得好開心,謝謝
截圖起來真的好像出版書好好玩
噗主也好晚睡,晚安感謝XD
用思源黑體音界號也正常顯示
再次感謝噗主,這個格式看起來真的好酷XDD
欣賞一下標點置中的思源黑體(?
不知為何空兩格便空一格(手機平板暫時放生)
稱謂頂格的部分,文章最底下補充的 .no-indent { text-indent: 0; } 可以取消空兩格的縮排~
然後我發現我不太清楚書信排版的位置XD 不知道能不能請旅人在圖上稍微標一下擺在哪裡比較理想,謝謝
書信這邊其實也不是標準寫法XD理想是想要這樣,在屬名的斜上方
但如果無法的話中間偏下就好
真的不強求!!噗主大大
日期那個應該可以做到,晚上確定一下再來回
日期的部分,如果旅人需要直立顯示的大部分是日期數字的話,可以把.upright的CSS調整成這樣
writing-mode: horizontal-tb; /*改回橫書*/
text-orientation: upright; /*文字直立顯示*/
text-indent: 0; /*刪去縮排*/
後面是註解,貼上CSS之後會自動刪除。只是如果超出兩個數字,例如英文縮寫,就會拉寬段落p的寬度
成功!
看來感謝方法是多多推廣了XD
縱書文本格式 Vertical Writing work skin - Chapter 2 - Anon...
如果作品裡這樣的內容不多,可以給它專門設一個class,例如: .position { margin-bottom: -1em; } 表示底部邊距突出1個字元。
另外旅人的範例裡會需要用到兩次footer,第一次給祝福語、服務單位,第二次給職銜、屬名~
成功了
修完其他書信部分就完成啦!!感謝噗主!!!!
如果改成div.userstuff .vertical .footer .position 應該可能就不用!important了,但是直接用!important比較方便XD