將網頁文字改成直書顯示

網頁上的文字千篇一律都是由左至右的橫向排列, 若是想要做成直式排列, 多半會將文字製做成圖片再放置到網頁中, 雖然這是個解決之道, 但後續文字的編修會比較麻煩。

本文要介紹一個不需將文字製作成圖片, 即可將文字直排的技巧, 如果你的網頁中需要直式排列文字, 一定會覺得受益無窮喔！

TIP: 此效果不適用於 Firefox 瀏覽器。

文字橫向排列	文字改以直書顯示, 更加突顯古文詩詞的味道

製作方式

Step 1 我們在網頁中置入一個置中表格, 並安排好背景底圖, 而包含在表格中的詩句則套用了 ".type1" CSS 樣式。首先請執行『視窗/CSS 樣式』命令開啟 CSS 樣式面板, 點選 .type1 樣式, 再按下方的增加屬性項目, 我們要在 .type1 樣式中加入一行屬性設定使文字變成直書顯示。

Step 2 在左欄輸入 "writing-mode", 輸入好後按 Enter 鍵會切換到右欄, 請接著輸入 "tb-rl", 表示 topbottom-rightleft, 即由上而下、由右而左的排列順序。設定好此屬性後, 必須透過瀏覽器預覽才可看出實際效果, 因此請先存檔後按下 F12 鍵。在瀏覽器中你可看到文字已經變成直式排列了, 但是在網頁中安排好的位置卻跑掉了, 因此必須再稍微修改 .type1 樣式的其他屬性設定。

按 F12 鍵

變直式了, 但位置有點偏

Step 3 請在 CSS 樣式面板中點選 .type1 樣式, 接著在下方將屬性修改成如圖所示的設定值即可。修改時可邊在瀏覽器預覽實際效果, 邊修正數值以達理想效果。

按 F12 鍵