Word 和 Illustrator 中有個能將長篇文章左右兩端排列整齊的「分散對齊」功能。只要按一個按鈕就能整理好,是非常方便的功能。心想網頁當然也做得到,於是查了一下,發現在指定文字配置為靠左、置中、靠右的「text-align」中,有「justify(分散對齊)」這個值!立刻實作看看,原本右側沒有對齊整齊的長篇文章,竟然變得整整齊齊!正想著要是早點實作就好了,卻收到客戶說「並沒有對齊喔」的意見???平常我都是使用 Chrome,但在 IE 上,似乎至今光靠「text-align:justify;」還是無法漂亮地對齊。
只有 IE,文章右側沒有縱向對齊
濱松・掛川的網頁製作公司 Merci,從平面廣告到網路,廣泛地支援您的公司。歡迎隨時洽詢。濱松・掛川的網頁製作公司 Merci,從平面廣告到網路,廣泛地支援您的公司。歡迎隨時洽詢。濱松・掛川的網頁製作公司 Merci,從平面廣告到網路,廣泛地支援您的公司。歡迎隨時洽詢。濱松・掛川的網頁製作公司 Merci,從平面廣告到網路,廣泛地支援您的公司。歡迎隨時洽詢。
於是在同一處增加語法。據說只要追加「text-justify:inter-ideograph;」,IE 和 Edge 也能讓右側對齊。像日文這樣的全形文字,以及中文、韓文似乎也都沒問題。查了一下 text-justify,發現它是依語言調整行端對齊方式的 CSS。
以「text-justify:inter-ideograph;」實作
濱松・掛川的網頁製作公司 Merci,從平面廣告到網路,廣泛地支援您的公司。歡迎隨時洽詢。濱松・掛川的網頁製作公司 Merci,從平面廣告到網路,廣泛地支援您的公司。歡迎隨時洽詢。濱松・掛川的網頁製作公司 Merci,從平面廣告到網路,廣泛地支援您的公司。歡迎隨時洽詢。濱松・掛川的網頁製作公司 Merci,從平面廣告到網路,廣泛地支援您的公司。歡迎隨時洽詢。
好!這樣就全部都能漂亮對齊了………雖然很想這麼說,但「text-justify」這項規格,目前尚未成為 W3C 的正式規範。因此,即使現在實作了,今後也有可能無法使用(不被套用)。
此外,這段程式碼在半形英文的情況下,會導致字距過寬而變得難以閱讀。(因為這是為了日文這類全形文章而設計的寫法。)
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
濱松・掛川的網頁製作公司 Merci,從平面廣告到網路,廣泛地支援您的公司。歡迎隨時洽詢。
雖然也可以在請客戶撰寫的部落格中實作這個標籤,但必須讓客戶理解「加入半形英文可能會跑版」「今後瀏覽器版本升級等可能導致版面跑掉」…這些風險。
學生時代我非常不擅長英文,因此剛開始從事網頁製作工作時,總想著「要是程式碼和標籤都是日文就好了…」,但現在卻變成要與日文的麻煩之處奮戰…。想讓文章讀起來順暢又美觀!在網路上,全形半形混雜、平假名・片假名・漢字交錯的日文,似乎是一種相當微妙的語言。









