# 前言 在 web 的世界中有一個需要處理的是文字排版的呈現
因為從電腦到整個計算機科學的領域都是在拉丁語系為主宗的國家發展的
所以在介面的文字排版上自然以從左到右為主
但是在這世界上的文字排版有從左到右, 上到下, 右到左等呈現方式
所以需要依照需求或不同語系的文字上有相對應的處理, 尤其是在多語系的情況下
上到下的排版大多是書面用的排版, 相對在資訊領域比較少呈現, 且因為上到下的排版方式也大多是亞洲地區的國家, 在標準化的話語權不高
但也漸漸在 web 領域中有開始支援上到下的排版(writing-mode)
且在資訊領域也大多是用左到右的呈現, 所以影響相對小
額外補充一下大部分的方塊文字像是中文、日文、韓文等其實左到右、右到左、上到下都可以書寫與呈現
但在部份語系像是
阿拉伯文 烏爾都文 庫德文 波斯文 希伯來文 上述文字排版就固定都是從右到左
除了希伯來文以外都是從阿拉伯文字延伸的, 就像是英文、德文、法文都是拉丁文延伸出來一樣
至於為何在世界各地的文字排版會有差異其實主要是起源於早期該文字書寫的方式與被書寫在什麼材質上面為主
右到左主要起源於早期是文字是刻在石板上面, 左手拿鑿子, 右手拿錘子, 這樣從右到左是相對順手的
中文早期大多從上到下從右到左的排列主要起源於以前是在竹片上捲成冊的(竹簡)
在單片竹片上面書寫自然是上到下, 那捲成冊之後在閱讀時為了方便持握, 會是左手拿著竹簡, 右手打開來看內容, 自然就變成了右到左來閱讀
不過現在大多也因為資訊科學的發展後在電子載體上就沿用左到右的排版(前面提到電腦乃至資訊科學都是在拉丁語系的國家發展出來的)
不過在亞洲地區的國家部分書面印刷還是有保留上到下右到左的排版
不過有點扯遠了
# 實作 RTL(Right To Left) 的方式 這次主要是要處理 RTL 的問題
但其實在實作上也很好解
HTML tag 有個屬性是 dir 只要設定是 rtl 或是 ltr 就可以了
那麼要在什麼情況下設定這個東西?
大致上會在兩種情況設定
## 1. 多語系且有右到左語系 網站是多語系的網站且有右到左語系提供切換呈現
...
Category: HTML
一直以來大部分時間都在用 PHP 開發
所以也用 PHP 來處理 HTML Form
所以都下意識地認為 <input type="checkbox" name="game[]" value="FGO">
這樣的 name="game[]" 的處理方式是正規的處理 HTML Form 的多選的方式
也疑惑為何大多的 HTML Form 的教學甚至 MDN 都沒有提到這件事
就在某一天我在檢視到同事寫的 code 時
發現同事用 JavaScript 處理
硬爬出來自己組字串送出去
我才想起這令人感到恐懼的事情
因為公司同事是寫 golang 的專門, 就算前端不熟
應該也不至於連這樣概念都沒有就用硬爬的方式處理
所以再調整的同時也跟同事確認後
我也真正的直視這問題
到底要怎麼處理表單中多選的資料?
PHP 寫久的人大多都知道要用上面列出的方法
name="game[]"
就是 game + []
但是當我認真地尋找關於這個問題時
意外地發現了一篇 stackoverflow 的問答
Several Checkboxes sharing the same name
其實 W3C 根本沒有管你 name="" 重複要如何處理
以下是 PHP, nodejs, golang 的原生方式來測試的結果
# PHP 以下問答有提供了 PHP doc 說明 PHP 如何處理多選
...
# Something about favicon on website Favicon is a icon on browser tab.
But now we must do more thing on mobile device handle favicon.
## 2 way add browser favicon Put icon in url path <example.com>/favicon.png
Add meta tag <link rel="icon" type="image/png" href="favicon.png" />
Notice: I like use png as my favicon, because i can reuse this file.
Icon format case
<!-- IE --> <link rel="shortcut icon" type="image/x-icon" href="favicon.
...
# HTML - dns-prefetch, preconnect, prefetch, prerender 研究筆記 ## Intro 這幾個 meta 屬性早在幾年前就有不少外國文章和少部分的國內大神介紹過了
但當時我一直抱持這它還在 W3C 草案, 所以不急著用的心態, 且瀏覽器支持不高, 所以一直無視它…
直到最近不知怎麼地想說來繼續增加我們服務的 head 中的 HTML tag 的數量吧 XD
就來研究一下這些屬性
## dns-prefetch 預先解析 DNS, 簡單說一句就是把你的網站會用到的 domain 都塞上去
但我有點質疑實用性就是了, 因為通常會用到的 domain 都幾乎在該頁面用到了, 幾乎功效不大
因為在 head 預讀時有可能還沒解析完, 實際頁面已經需要對該 domain 發 request 了…
結論: 會改善但感覺改善幅度不大, 且你的服務內有用到多個 domain 或 subdomain 才有影響
## preconnect 會對設定的 domain 做 DNS 解析與 handshake
不過我覺得最大的好處是預先對該 domain 做 handshake
但就像上述所說大部分的情況是會用到的 domain 幾乎都在頁面上了
...
# HTML - redirect page from http-equiv ## Intro We can use JavaScript or PHP redirect page, we also can only use HTML redirect page
But not suggest use this way
Note: The value “refresh” should be used carefully, as it takes the control of a page away from the user. Using “refresh” will cause a failure in W3C’s Web Content Accessibility Guidelines.
使用 標籤進行重新導向可能會降低搜尋引擎排名。
## Usage <meta http-equiv="refresh" content="0;url=http://example.
...
# Web Develop - Flexible Footer Sometimes we think footer must fixed in website bottom or put it in last of content.
I provide a idea may be a good way. Content less browser view height, footer fixed in bottom. When content too much over browser view height, footer be put last of content.
## Feature flexible only use CSS ## Usage min-height: calc(100% - <footer height>);
#hd { height: 50px; background: #aaa; /*display: none;*/ } #bd { text-align: center; min-height: calc(100% - 50px); /* important */ background: #ccc; } #content { padding-bottom: 60px; } #footer { position: relative; bottom: 50px; text-align: center; height: 50px; background: #999; } 50px is footer height
...
# HTML5 - Video Introduction 這是一篇關於如何用 web 建置一個 video player 的文章, 這裡使用 HTML5 video 與一些 open source library 來建立 player
## Some Function ### Main video pause video play video autoPlay or no-autoPlay show current video time show total video time time jump full screen ### Other keyboard control mute control volume up & down buffer handle set quality Refer - Seeking API Refer - The State of HTML5 Video
...
# HTML Design Pattern ## 語意化(影響 SEO) ## 去 CSS 還可維持可讀性 ## 去 JavaScript 頁面還能 work -> 現在較不適用 ## 避免樣式標籤 <!-- not recommended --> <b></b> <i></i> <!-- use --> <strong></strong> <em></em> ## 避免將 style 寫在 HTML tag 上 ## 善用標籤以維持可讀性與語意化 ## 網頁上的載入圖片做適當的選擇 會變動的圖片以 <img src=""> 呈現 幾乎不會變動或重要性要低的圖片適合以 background 呈現 適當的利用 CSS sprite
...