因為是教小學，打從 Flash 時代設計的遊戲及工具，能在國字旁加上直式注音，幾乎是必備的功能。2012 年起，陸續將 Flash 版的工具改為 HTML5 版，哈！如果沒人提到有需求，國字加直式注音的功能就不見得會加到程式中。
最近為了幫 HTML5 版戳戳樂解決英文字串會太長，超過版面的問題，認真的研究了一下 CSS 中，有沒有可以解決的方法。找到了：
word-wrap: break-word;
用這個設定，可以強迫字串只要遇到邊界就換行，不管它是不是單字；這樣一來，就不會遇到像電子信箱地址，或是超長網址時，已經不在畫面範圍了，還不換行。
換行問題解決了，字的尺寸大小要如何找出最佳的數字？國字加注音使用的方法是先算出有多少國字，再利用一個字配一個空格的方式，讓程式去算出較接近的字型大小，並據以計算會有多少行中文字，交給國字加注音的模組去「排字」。哈！試了短句、長文，效果還不錯。
玩出趣味與成就感了，就這樣子，一口氣改了好幾支程式，甚至原來沒有國字加注音功能的，也順便加一下加了！
 |
| HTML5 樂透機國字加注音 |
 |
| HTML5 幸運轉盤國字加注音 |
 |
| HTML5 戳戳樂國字加注音 |
國字加注音的語法，可以使用網站中的這個語法產生器來製作：
例如：
圖片中的動物，英文該怎麼說？
如果以「注音在國字旁」的格式輸出，可以變成：
圖ㄊㄨˊ 片ㄆㄧㄢˋ 中ㄓㄨㄥ 的˙ㄉㄜ 動ㄉㄨㄥˋ 物ㄨˋ ，英ㄧㄥ 文ㄨㄣˊ 該ㄍㄞ 怎ㄗㄣˇ 麼˙ㄇㄜ 說ㄕㄨㄛ ？
如果將它放到戳戳樂的題庫中，就可以呈現出國字加直式注音的樣子：
 |
| HTML5 戳戳樂語法與畫面對照 |
前面說到估算字型大小的方法是以空格「斷字」，讓程式比較容易找到最接近的字形大小，中文字如此，英文字亦是。經過這樣的調整，相信可以讓文字在顯示時，不會出現奇寄怪怪的排列方式。
發表文章
沒有留言:
張貼留言