以前撰寫的 Flex 教學文章
本篇介紹是以資訊的流向為主
只要知道 Flex 屬性中的流向對應
就算掌握了八成以上的 Flex 應用
（不唬爛，大部分 Flex 運用都是在控制方向性）

#Flex
#CSS

[Science and Communication]
我還在讀本科時，年少無知，覺得做科學，應該不拘小節，論文、Poster、PowerPoint 等，只應在乎內容而非「格式」。只要內容好，科學準確，排版、字體、用色、甚至錯字都無所謂。

後來發現，科學領域內，傳訊十分重要，而且匯報是展現研究成果，注意細節，才是敬業樂業的表現。所以儘管本人視覺藝術天份奇差，也開始留意設計原理，也開始注意行內設計，才發現到處都是災難級的設計。

最近寫博士學位的期中報告，就Typography我已用了大半天參考不同文章。雖然對設計師來說可能見笑，但我這初哥已經盡力。最後Headings一致用無腦Helvetica，內文用Garamond，古典但優雅，讀起來才有可信、已確定(established) 的感覺，DNA序列用Courier，字距一致才容易做DNA並列對比。大家的論文又用什麼字體呢？（不才，懂設計的朋友請指教）

對於我這種設計白痴，中央聖學子的貼文都很啟蒙。從事科學的朋友，我們該好好注意自己的設計了，你的poster有犯這些錯誤嗎？

【Typography Matters】（營養長文!!!）香港美術及設計教育，一直以來都麻麻地重視 Typography（字體排印學）。近十多年遇着個別有熱誠有才能嘅教育工作者，偶爾會有小陽春，業界亦好視乎個別執業者取向；但整體上，香港地無論學院抑或業內，重視 Typography 嘅人，實屬小眾，practise 得好嘅，更係少之又少。個人電腦普及前，字體應用及排印，都必定交由專業人士負責，質素衰極有個譜；然而，差不多係人都識用 Word、Excel、小畫家等軟件打字、畫圖、列印、發佈後，因差劣 Typography 而引發嘅溝通錯誤及視覺污染——自文字及印刷術發明以來——係史上最最最最嚴重的。

科技賦予人類能力，但冇賦予知識。人人用電腦揀字款打字排版做所謂「文書處理」，但當中有幾多個懂得基本 Typography？或，當中有幾多個知道有「Typography」呢樣嘢呢？記得留學時老師講過，或許設計上有好多範疇都冇甚麼絕對黑白對錯，但係响 Typography 嘅領域，有唔少理論及應用係黑白分明對錯有特定準則的。「靚囉」好少會出自 typographer 把口。

早前有人留意到康文署有套經過精心設計嘅温文意雅告示標語橫額，甚為破格，引來網上小眾討論。今日陽光普照，離開鍵盤，到赤柱走走，畀我發現咗啲嘢。特意寫兩句與大家分享一下。🙂

［Layout］
求其粗疏地响聖士提反灣周圍𥄫𥄫，做咗個微型 visual audit，諗住學下嘢。Woow～！真係獲益良多，原來而家尖端標示設計嘅 typography 已經同我以前學嗰套好有距離。首先（見圖由上至下左至右），大大塊告示板，個 layout 唔似有 grid，相當 dynamic，四個主標示 zig zag 咁放，size 不大，語氣和善，活潑可人，綠綠藍藍與泳灘氣氛連成一片。

［Hyphen］
Typography 中，英語 punctuation（標點符號）往往最被忽略。「Please - No Kite-flying」三個字中有兩個 hyphens，「Kite-flying」嗰個冇咩問題，怪就怪在「Please」之後嗰個。因為 hyphen 一般用作 compound terms 或 word division，當破折號或冒號咁用好似比較罕見。

//
For most writers, the hyphen’s primary function is the formation of certain compound terms. Compound terms are those that consist of more than one word but represent a single item or idea.

In professionally printed material (particularly books, magazines, and newspapers), the hyphen is used to divide words between the end of one line and the beginning of the next. This allows for an evenly aligned right margin without highly variable (and distracting) word spacing.
//

同中文標點好唔同，英文類似破折號嘅短小橫線標點有三種：hyphen (-), en dash (–), em dash (—)，長度不一功能各異，唔可以亂用。

//
The en dash (–) is slightly wider than the hyphen (-) but narrower than the em dash (—). The typical computer keyboard lacks a dedicated key for the en dash, though most word processors provide a means for its insertion.
//

長話短說，日常應用嚟講 en dash 多數用嚟當「至」咁用，如日期或時間，「2005–2018」，「9:00 a.m.–5:00 p.m.」。正統前後冇 space，但我覺得若嫌太迫，kern 疏少少都無傷大雅。至於當破折號（或冒號）以作補充之用就應該用最長嘅 em dash。

//
The em dash is perhaps the most versatile punctuation mark. Depending on the context, the em dash can take the place of commas, parentheses, or colons—in each case to slightly different effect.

Notwithstanding its versatility, the em dash is best limited to two appearances per sentence. Otherwise, confusion rather than clarity is likely to result.

Do not mistake the em dash (—) for the slightly narrower en dash (–) or the even narrower hyphen (-). Those marks serve different purposes and are further explained in other sections.
//

［Apostrophe］
Prime mark (') 同 apostrophe (’)，前者係小直劃，後者係升高咗嘅𢭃號，再想發揮創意都唔應該用錯。鍵盤碼點打，呢度唔多講嘞，自己 google 啦。

［a.m. and p.m.］
「a.m.」、「p.m.」係拉丁文「ante meridiem」同「post meridiem」嘅縮寫，所以正寫應該係細階兼有點點。但係設計上有時想省略簡化正寫達至美感要求，我覺得响意思唔被干擾下，可以接受。但時間數字與 am 或 pm 中間，應該有 space，連埋寫成一個字咁會怪怪，尤其出現於正統聲明。

［Title Case vs Sentence Case］
究竟幾時用 title case，即每個字頭都大階；幾時先用 sentence case，即只得第一個字大階？！我有啲亂。我嘗試觸摸個 pattern，可能我資質太差，花咗成日都徒勞無功。

［Text Justification］
忽左忽右，我估本 guidelines 肯肯定有說明點用法，只係我呢個路人未察覺箇中奧妙而已。「Dangerous Goods Store」，畀我會將「Goods Store」排埋一行，以意思 break line 嘛。不過人哋咁排法，一定有 concept。

最後，發覺大標示板係用 Helvetica，小標語則用 Arial，當中有咩精心佈局或創意我唔敢亂估，只覺得呢種字款運用嘅 fusion 很富本地混雜視覺文化特色，好可愛。☺️

… … … … … … … … …

早前相關康文署標示淺評：
https://www.facebook.com/…/a.1015316723…/10159910797350570/…

Source & reference:
http://www.thepunctuationguide.com/hyphen.html
http://www.thepunctuationguide.com/en-dash.html
http://www.thepunctuationguide.com/em-dash.html
http://www.chicagomanualofstyle.org/…/HyphensE…/faq0002.html