學術報告格式以CSS的方顯示

算是因為最近用MarkDown寫文件，要轉成HTML時候搜尋到CSS counter-reset Property（W3Schools），於是就想統整一下某些學術報告的常用格式如何以CSS方式展現

標題編號

首先就從標題開始好了。
論文或許不會用到，但是報告應該會吧……就是標題標示1.1、1.1.1.、2.1這種的

這種的用<ul>、<ol>的話，在沒調整CSS的情況下頂多只能用在目錄吧……
但既然是標題，那當然就是用 HTML headings ，這樣的話，就要用到上面提到的 CSS counter

首先是一篇文章

<h1>A Part of My Essay</h1>
<h2>Why Part A is important</h2>
<p>Bla Bla Bla</p>

<h1>Another Part of My Essay</h1>
<p>Bla Bla Bla<br/>Bla Bla Bla</p>
<h2>The Data I Used for this Part</h2>
<h3>Some Tables</h3>
<h4>Table 1</h4>
<h4>Table 2</h4>

<h3>Some Diagram</h3>
<h4>Diagram 1</h4>
<h5>The Reason I Choose This</h5>
<p>Bla Bla Bla</p>
<h6>Summary of Diagram 1</h6>
<p>Bla Bla Bla</p>

<h4>Diagram 2</h4>
<h5>The Argument of Diagram 2</h5>
<p>Bla Bla Bla</p>

<h1>Summary</h1>
<p>Bla Bla Bla</p>
<h2>Some Other Details</h2>
<p>Bla Bla Bla</p>

<h1>Reference</h1>
<div>Fetherston, T 2007,<em> Becoming an effective teacher</em>, Thomson Learning, South Melbourne.</div>
<div>Biggs, J 2003,<i> Teaching for quality learning at university: what the student does</i>, 2nd edn, Society for Research in Higher Education & Open University Press, Buckingham, UK.</div>

其實看W3Schools就能知道的大概了……先是設定 CSS counter，為了方便懶得想六個英文單字的人簡單一點，我conuter就取名counterH1～counterH6

body{
	counter-reset: counterH1; 
}
h1{
	counter-reset: counterH2;
}
/* 中略 */
h5{
	counter-reset: counterH6;
}

之後設定:before的counter-increment和content：

h1:before{
	counter-increment: counterH1;
	content: counter(counterH1) "."; 
}
/* 中略 */
h6:before{
	counter-increment: counterH6;
	content: counter(counterH1) "." counter(counterH2) "." counter(counterH3) "." counter(counterH4) "." counter(counterH5) "." counter(counterH6) "."; 
}

參考資料

再來是參考資料的部份，這部份基本上都是APA之類的格式，而APA的清單部份會用到的有斜體（用於書名等）和「首行突出的縮排格式」。
前者還算簡單，只要用<i>或<em>之類的tag即可；後者得用一個很少被使用的 CSS Property －－text-indent。

說真的，這個在英文的使用率還真不是普通低。英文，我當初上英文課時也是被教導說段落前面要空格，但是實際上離開了大學有多少人還會空格？網站？不會；blog？不會；報告？不會；履歷？不會……
而再來看看中文，小學生都知道作文文章每一段都要空兩格，但是這習慣除了作文外還會在哪裡出現？blog？沒有；履歷？沒有；報告？沒有……
所以text-indent也蠻可憐的……畢竟不是每個人都會寫CSS，而且網路文章也不要求開頭空格這種習慣……

廢話說的有點多了，總之，如果要用APA那樣的格式，則要寫成像下面這樣（參考資料清單先設 class name 為 reference，縮排的部份就先定為2em）：

.reference{
	padding-left: 2em;
	text-indent: -2em;
}

最終結果

最終的結果如下：

2015/08/04補充

目錄

另外關於目錄，像是 Markdown 轉成HTML時可以藉由插件來增加目錄。
但目錄你不知道程式是給你<ul>還是<ol>。
保險就兩邊都設，但這樣你到第六層就很長，有2⁶種可能，靠自己手寫根本是自虐。
幸好有SASS，設目錄放置在 <div class="toc">> 之中，那整個SASS大概長這樣（counter名稱設為 counterU2～counterU6）：

.toc{
	ul, ol{
		/* 通用部分 */
		list-style: none;
		padding-left: 0;
		li:before{
			min-width: 10em;
			display: inline-block;
		}
	}
	
	>ul, >ol{
		/*h1*/
		>li{
			counter-reset: counterU2;
			>ul, >ol{
				/*h2*/
				>li{
					counter-reset: counterU3;
					&:before{
						counter-increment: counterU2;
						content: "Section " counter(counterU2) ". ";
					}
					>ul, >ol{
						/*h3*/
						>li{
							counter-reset: counterU4;
							&:before{
								counter-increment: counterU3;
								content: "Section " counter(counterU2) "." counter(counterU3) ". ";
							}
							
							>ul, >ol{
								/*h4*/
								>li{
									counter-reset: counterU5;
									&:before{
										counter-increment: counterU4;
										content: "Section " counter(counterU2) "." counter(counterU3) "." counter(counterU4) ". ";
										
									}
									
									>ul, >ol{
										/*h5*/
										>li{
											counter-reset: counterU6;
											&:before{
												counter-increment: counterU5;
												content: "Section " counter(counterU2) "." counter(counterU3) "." counter(counterU4) "." counter(counterU5) ". ";
											}
											ul, ol{
												/*h6*/
												li:before{
													counter-increment: counterU6;
													content: "Section " counter(counterU2) "." counter(counterU3) "." counter(counterU4) "." counter(counterU5) "." counter(counterU6) ". ";
												}
											}
										}
										
									}
								}
							}
						}
					}
				}
			}
		}
	} 
}