[HTML/CSS]利用CSS進行凸排效果

我們在Word上進行排版的時候會時常使用到凸排這一個功能

這是許多做報告做論文必備的技能之一

在Word2003或稍早的版本，只要在段落裡面設定即可，輕而易舉

但在網頁上呈現該效果，就必須倚賴CSS來進行編排

要做到凸排的效果要使用
text-indent
margin-left
這兩個屬性來做凸排效果

我們以字型大小的單位以pt為例，方便解說

假設大小為：12t，若要凸排3個字元，其屬性如下
text-indent:-36pt; margin-left:36pt;

效果展示：

漸凍人症是世界五大絕症之一，致病原因不明，目前無法治癒。好發於中年，男性多於女性，中華民國運動神經元疾病病友協會(漸凍人協會)每年服務約350位病友。由於運動神經元功能受損，造成漸進性的神經肌肉退化，病友接續面臨到四肢無力、吞嚥困難及有口難言的困境，平均3-5年呼吸衰竭。儘管肢體癱瘓，但是他們的心智正常、意識清楚，感覺也敏銳一如常人，因此其身心所受煎熬甚於其他疾病，亟需社會大眾的鼓勵與協助。

引用自：
2014年漸凍人家庭守護天使勸募計畫 用愛解凍 改變的力量 每天10元 每月300元
http://mndaals621.pixnet.net/blog/post/183866109

原始程式碼：


不難發現如果為16pt，若要凸排2個字元即為：

text-indent:-32pt; margin-left:32pt;

因此字型大小為Xpt、要凸排N個字元的公式如下：

font-size:Xpt;
margin-left:N*Xpt;
text-indent:-(N*X)pt;

那字型大小單位是px就不一樣了，必須改用em為單位，px轉em對照表可參考如下：

http://pxtoem.com/

以px為單位的公式如下：

margin-left:N*Yem;
text-indent:-(N*Y)em;

參考：
鳥毅的Blog: 首行凸排的CSS
http://blog.tenyi.com/2008/05/css.html

2014年漸凍人家庭守護天使勸募計畫 用愛解凍 改變的力量 每天10元 每月300元
http://mndaals621.pixnet.net/blog/post/183866109

Em Calculator
http://riddle.pl/emcalc/

PXtoEM.com: PX to EM conversion made simple.
http://pxtoem.com