O3noBLOG

去年因緣際會去了一趟新加坡，是我第一次去新加坡，看到不少建築覺得實在很厲害，想說紀錄一下。

這趟行程中，我看到覺得很厲害特別想介紹的建築有三個，首先第一個是聖陶沙上的 Resort World，規模超大，有飯店商場賭場等等，環球影城也是其中的一部分，不過只是這樣還不會到讓我覺得超厲害，最讓我驚艷的其實是它的地下車道，我不確定他是往下挖還是往上蓋（應該是往上蓋比較簡單），不過整個 Resort World 人行的地方，那些商店廣場的下面其實都是空的：

我只有拍這張照片，不過就是你仔細看你會發現對面深不見底，是不可思議的大的地下空間，裡面有錯綜複雜的車道、接送區、巴士站、停車場、甚至還有卡丁車賽車場，這個是屬於理論上做的出這種東西，技術上應該也沒太大困難，只是我沒想到會有人做出這麼大規模的地下車道系統。

第二個是彰宜機場的 JEWEL 的中間的那一區，就是有很多植物和中間一個瀑布（不知道該不該稱為瀑布，其實它叫 Rain Vortex）的那一區，那一區其實叫 Forest Valley。

這區我覺得讓我感到覺得驚豔的地方有兩個，第一個是那個瀑布，要怎樣能讓他不漏水。

這個瀑布水流到 B2 那層時，是一整圈透明的牆（我不確定材質）圍起來，不知道要怎樣能確保水不會滲漏，我有直接摸摸看，也找不到接縫，該不會是整塊玻璃一體成形吧。

PS. 我後來找到 News Asia 的專題，那塊是壓克力的，不過我還是不知道是怎樣可以弄成無縫的這麼大一塊，然後這個專題對於那個瀑布的介紹是聚焦在水流怎樣下來又上去的。

當時很趕時間沒拍照，還好 Google 街景有。

除了瀑布的漏水問題外，這區還有非常多的植物，而且不是小顆的花花草草，也有比較高大的樹木，置身在其中會覺得非常難以想像有人會放這麼多的植物在室內空間（請見影片），然後我就又想到他們的樹根會一直成長變長，不知道要如何確保數十年後，這些樹木的下面，通常是商店的地方，不會有漏水的問題出現...

最後一個要介紹的，是金沙酒店（Marina Bay Sands）的 Apple Store：

其實本來也沒特別有安排要去金沙酒店，後來也是最後一晚了不知道要幹嘛就跑去看水舞光雕表演，然後才發現這個 Apple Store，遠遠看到的時候就覺得：「不可能吧！」真的走到旁邊看的時候就覺得非常誇張，怎麼這麼有錢有閒弄一個浮在水中間的球。

裡面往上看圓頂。

圓弧形自動門，等很久都等不到全關，一直有人進出。

不意外的對得很齊，甚至對齊到地板的金屬飾板（請見影片）。

逛一逛意外的發現有電扶梯通往樓下，覺得不是獨立在水上的一顆球嗎，怎麼還有地下室，然後又想到，那行動不便的怎麼辦，蘋果不可能沒考慮到吧，尋找一陣子之後，發現了一個鏡面的圓柱體（請見影片），裡面就藏著電梯，然後下到樓下走一走，才發現是有通道金沙酒店商場內的。

我只能說這個建築設計真的是讓我當場覺得驚呆了，當時我以為這個 Apple Store 是一開始在蓋金沙酒店時就一起設計進去的，結果回來研究一下資料發現不是，這個 Apple Store 是後蓋的，努力搜尋一番有找到篇文章有些施工當時的照片。

• Is this Apple's Coolest new Store?

基本上就是圍了一塊範圍把水排掉後把它蓋起來，是可以想像得到的工法，只是想不到會有人這樣設計（Foster + Partners設計的），而且真的願意這樣施工，然後不免俗的，我又擔心起會不會漏水的問題了，不過後來想一想如果認真要處理防水應該不是問題吧，實在是被台灣的房子會漏水的觀念荼毒太久了。

新加坡整體而言，城市的魅力還是蠻高的，尤其是這些建築的設計更是讓我驚艷，光是來看看這些建築我就覺得蠻不錯的，不過物價實在是很高，然後天氣也是蠻熱的，有機會的話我是會願意再來一次去看看這次沒見到的地方，像是植物園那邊，金沙酒店這次也沒仔細逛（金沙酒店本身也是很厲害，商場裡面還有人工河和瀑布）。

大宮鐵道博物館（簡稱鐵博）也是知名景點了，網路上一堆介紹，所以這篇除了我們的遊記之外，還會有些博物館本身以外的內容。

續前一篇，這次東京自由行最後一個整天我們因為所以然後選擇了荒川線一日遊，結果而言蠻不錯的，網路上介紹過荒川線一日遊的文章其實也不少，所以這篇就來紀錄我們去的地方就好。

睽違三年，終於又去了日本了，這次因為太久沒去所以排比較多天，來回共十一天，從週五跨一個週間到週一，這篇想紀錄一下這次的行程規劃、後來實際進行的狀況以及覺得有點缺憾錯過的東西。

這趟的主行程其實是三年前本來要去的，結果遇到疫情爆發，當時想的就是帶小朋友去迪士尼玩和順便去看富士山泡溫泉，所以這次行程規劃也就把那次的缺憾放進來，不過我們決定的有點晚，加上日本最近一直有國內旅遊補助，所以安排住宿的時候一直蠻困擾的，最後基本上規劃成：

4/14 入境、上野採買
4/15 銀座採買
4/16 淺草、台場
4/17 迪士尼
4/18 迪士尼
4/19 富士山
4/20 富士山
4/21 大宮鐵道博物館
4/22 隨意
4/23 隨意
4/24 出境

在帶著一個拖油瓶的情況下，入住的飯店一共換了四間其實有點多，前三天住上野御徒町，然後迪士尼樂園大飯店，大倉東京灣酒店，然後河口湖，最後在池袋王子住四天，這樣安排主要是迪士尼本家飯店一來比較貴，二來也很難同一間連住兩天，本來是想說第二天玩完回去市區住，方便隔天搭巴士去河口湖，本來預期的兩大挑戰是：

1. 從上野到迪士尼，需要轉車加上搬運大量行李
2. 從迪士尼往富士山，需要去東京車站轉巴士，還要寄送行李到最後的住宿地：池袋王子大飯店

這兩個路程我都有仔細研究過，轉車要去哪一站，搭車要搭哪個位置上車比較好，還有怎樣的路線才有電梯等等，不過最後都沒派上用場，首先是從迪士尼離開去河口湖這段，我在出發前就決定改成租車去，這樣雖然有比較貴，但是好處多很多，最棒的就是我時間變多所以還多去了木更津的三井 outlet，以及穿越東京灣的 Aqualine 和海中間的水上螢火蟲休息站（本來是想繞東京灣一圈的，結果發現要兩個小時），尤其是後者我實在蠻有興趣，但是作為觀光客實在很難有機會，所以我的規劃就是一早搭 Disney Resort Line 單軌去舞濱站轉公車，不用跑去其他地方，直接在車站前面的公車站等公車，搭到猫実站（念作 Nekozane 四個音，我一時以為是三個音，還好司機聽得出來）然後走到 Toyota 租車浦安やなぎ通り店，接著開車回去大倉裝行李。

PS. 我蠻喜歡這間 Toyota 租車的，還有飲料可以給你外帶上車，包括咖啡、果汁、紅茶花傳無糖紅茶，相較於後來還車的東池袋店真是差很多。

至於第一個挑戰，其實本來還沒打算花錢解決，後來因為第一天光是從機場到飯店帶著拖油瓶就累死了，我們帶了兩個大行李箱、小孩有給他推車坐，雖然基本上是都找的到斜坡和無障礙的路線，但是常常需要一直繞路，並且有些路段也不是很好推，體力消耗不小，加上第三天招待我們的朋友也覺得花錢解決比較好，而且前兩天採買過後行李已經變多，所以那天變成直接用 uber 叫大車子來去迪士尼樂園大飯店，意外的很好叫。

在 responsive design 成為主流之後，有個問題也隨之被突顯出來，就是文字的換行，尤其是標題文字的換行位置，現在的瀏覽器的換行方式簡單來說就是超出區塊範圍的東西都往下放到下一行，所以在某些情況下，就會有第一行很長第二行很短的狀況，視覺上非常不平衡，以下圖為例，網頁的副標題沒有作特殊處理，所以會有可能會變成兩行長度差距很大的樣子：

這個問題有蠻多解決方法的，目前我知道的就有：

1. 微調 responsvie 的樣式來避免出現不平衡的狀態
2. 在特定地方插入 避免換行
3. 用 flex layout 來控制換行位置

基本上就是只要你不擇手段，問題還是可以解決的，不過我一直以來都是會偏好用標準的方法來解決問題，所以整理了一下我所知道可以拿來用的東西：

1. <wbr>HTML element
2. white-spaceCSS property
3. <nobr>HTML element
4. text-wrapCSS property

首先的想法是<wbr>配上white-space: nowrap;或是<nobr>，不過意外的是大部分瀏覽器都不支援這個組合，也就是說，包在<nobr>內的<wbr>的地方在現在大部分主流瀏覽器內是不會換行的：

<nobr>ChatGPT: Optimizing<wbr>Language Models<wbr>for Dialogue</nobr>

這就激起了我的好奇心了，於是我開始仔細的找資料，看看<nobr>和<wbr>到底是怎樣運作的。首先，就來看看<wbr>吧，雖然他第一次出現在 W3C 的文件內就是在 HTML5，但是其實它已經出現了 20 年以上，最早是作為Netscape 的 HTML 2 extension的一員：

The WBR element stands for Word BReak. This is for the very rare case when you have a NOBR section and you know exactly where you want it to break. Also, any time you want to give the Netscape Navigator help by telling it where a word is allowed to be broken. The WBR element does not force a line break (BR does that) it simply lets the Netscape Navigator know where a line break is allowed to be inserted if needed.

在 Internet Archive 上找到的備份，最早的定義其實明確的說著<wbr>處應該是要可以優先於<nobr>的，我甚至還在 bugzilla 上找到一個24 年前的 bug report在講這件事，根據這張票最後的關掉前的討論，其實可以用</nobr><nobr>來達成一樣的效果，然後 Firefox 不打算支援<wbr>，看到這邊，我只能說這解法怎麼這麼天才（稱讚的意味）。

查到這邊，我還是很好奇為什麼現在的主流瀏覽器依然<wbr>優先度比<nobr>還低，所以繼續找資料，這次看的就是最新的文件了，首先是<wbr>的定義，在 HTML5 中變成：

Thewbrelementrepresentsa line break opportunity.

從 "word break" 變成 "line break opportunity" 了，<nobr>則和<wbr>一樣一開始是 Netscape extension，不過他倒是沒有進到 HTML5，事實上，雖然<nobr>不是 HTML5 的一員，但是文件中定義的 default style 還是有它：

br { display-outside: newline; } /* this also has bidi implications */
nobr { white-space: nowrap; }
wbr { display-outside: break-opportunity; } /* this also has bidi implications */
nobr wbr { white-space: normal; }

其實就是等價於white-space: nowrap，而white-space屬性在 CSS2 時是用來定義空白的處理方式：

This property declares how white space inside the element is handled.

到 CSS Text Level 3 時定義說的更明確，是用來決定遇到 "line break opportunity" 時的處理方式和是不是要合併 space 字元的屬性：

• whether and howwhite spaceis collapsed
• whether lines maywrapat unforcedsoft wrap opportunities

其實在Level 4更是可以分開設定兩種屬性，white-space變成一個 shorthand，而看到這些定義的演進，其實也讓人發現最早命名時其實只有考慮到西方語言的特色。

看到這邊，會發現有一個新的名詞："line break opportunity"，有些地方是稱為 "wrap opportunity"，這個名詞其實是出現在 CSS Module Text 文件中的，顧名思義，就是可以換行的位置，而這份文件也是定義換行邏輯的文件，不過這邊其實沒把換行演算法（line breaking algorithm）明確定義下來，而是闡明各種相關的 CSS 屬性和它們會怎樣影響換行的結果，例如換行有分強制（<br>）和非強制（<wbr>），然後不同 CSS 屬性會影響這些換行點的出現與否，至於文本之中，哪些地方可以換行，就是換行演算法的部分了，這部份在 W3C 文件沒有定義死，所以是允許瀏覽器自己決定的，不過有提供一些參考文件，像是 Unicode 的附件 14："Unicode Line Breaking Algorithm"，或是稱為 UAX14，這份文件要搭配 Unicode Database（UCD） 的Line_Break Property 資料，文件中的第五章有仔細的說明各種不同的 line breaking class，然後資料庫則是定義了所有 Unicode 字元的 Line_Break property，接著的第六章就是最重要的換行演算法了，這邊列出了 31 條規則，基本上是反向列舉，說哪些地方不能換行，例如 WJ（word joiner）前後都不能換行，數字中間的符號前後也不能換行之類的，不過不確定哪些瀏覽器是實作 UAX14 的，Chrome 似乎有用到 UCD，Firefox 則是以 JIS X 4051 為基礎做的換行演算法，其實 JIS X 4051 是我所知道，二戰後世界，最早的正式的文字編排的標準，查到的紀錄是1989 有一版，而 UAX14 第一個非草稿的版本則是要到 1999 年才出來。

回到現在主流瀏覽器不支援<wbr>放在white-space: nowrap裡面無法換行的問題，其實要回到這個 HTML 標籤在繪製時，是不是有 magic 的，什麼是 magic 呢？簡單說就是，你能不能用 CSS 來定義該標籤的樣子，以及你能不能用 CSS 來改掉這些預設的樣式，而<br>和<wbr>正好是有 magic 的標籤，可以想想看，要怎樣用 CSS 讓文字內產生一個換行點，可能有人會說剛剛上面才看到的，不過，其實那幾個display-outside的值只存在於以前的草稿中，CSS-WG 決議不為了這個問題新增多的 display 狀態，所以問題就回到 HTML-WG 這邊了，CSS-WG 的 fantasai 其實有給了一組 default style：

br { all: unset !important; display: contents !important; content: "\a" !important; white-space: pre !important; }
wbr { all: unset !important; display: contents !important; content: "\200B" !important; }

我把!important拿掉整理一下：

br {
  all: unset;
  display: contents;
  content: "\a";
  white-space: pre;
}
wbr {
  all: unset;
  display: contents;
  content: "\200B";
}

其中，\a就是換行字元，\200B則是ZWSP，zero width space，因為是 zero width，所以看不到，然後又因為是 space，所以可以用來把字切開，也就表示可以在該處斷行。不過這個版本有些問題，因為有很多瀏覽器還不支援在::before, ::after以外的物件上套用content屬性，所以 fantasai 又提供一版用::before的版本：

br, wbr { all: unset !important; display: contents !important; white-space: pre !important; }
br::before { all: unset !important; content: "\a" !important; }
wbr::before { all: unset !important; content: "\200B" !important; }

但是，實際上直接拿這組定義來用，還是一樣有問題，就是有些瀏覽器已經讓<wbr>有 magic 了，結果wbr::before是沒有用的，目前HTML 標準的修改也就還卡在這邊（issue 則是另外一個），HTML-WG 的 Domenic 開了這個 PR 要讓<br>和<wbr>就用 magic 來實現效果，不過這討論已經停很久了，所以最後會是怎樣的方案還不知道。

總之目前的結論就是，現在如果想要讓<wbr>照其定義的一樣，可以在<nobr>或是white-space: nowrap內產生換行，是辦不到的，不過可以用其他的標籤來辦到，像是：

.wbr::before {
  display: inline;
  content: "\00200B";
  white-space: normal;
}

配上

<nobr>ChatGPT: Optimizing<span class="wbr">Language Models<span class="wbr">for Dialogue</nobr>

這個寫法也有出現在一份由 Leif Halvard Silli 在提交bug給 WebKit 所做的test 內。

到這邊，大概已經把自己控制換行位置的部分講的差不多了，不過其實，還有一個方法可以處理一開始所提到的換行結果不理想的問題，就是在 CSS Text Module Level 4 中有一個新的屬性叫做text-wrap，其中有一個屬性值是balance，合起來就是：

text-wrap: balance;

這樣設定，預期的結果就是會換行換在每一行的寬度最接近的位置，不過當然還沒有瀏覽器支援，連 caniuse 都還查不到text-wrap屬性，只是還是有 JS 的解決方案：

• Adobe 的 balance text，是 jQuery plugin，因為是認真去算長度的，效能比較不好；
• vanilla 版本的 balance text；
• nytimes（紐約時報）的 text-balancer，透過 binary search 改寬度來調整換行位置，效能比較好；
• React wrap balancer，React component，基本原理和前者一樣，但是還多支援ratio屬性。

最後的最後補上一些參考資料，一篇是古老的 IE 時代的東西，一篇則是現在的相關 CSS 屬性，一篇則是 balance wrap 的介紹：

• Word division in IE
• Deep Dive into Text Wrapping and Word Breaking
• Improving the New York Times' line wrap balancer