選單圖示

zhuhe

典藏資源

勸學新篇

作業系統


㊣中文直書網頁懸掛縮進和首行縮進

天承運

皇帝詔曰

數年以來中外臣工講求時務多主變法自強邇者詔書數下如開特科裁冘兵改武科制度立大小學堂皆經再三審定籌之至熟甫議施行

惟是風氣尚未大開論說莫衷一是或託於老成憂國以為舊章必應墨守新法必當擯除衆喙嘵嘵空言無補

試問今日時局如此國勢如此...將此通諭知之欽此


工部主事 康有為

工部主事 康有為
─────────



兩廣總督 孫氏為奏

聞續到洋舡事本年六月內到西洋兵頭來澳門換班如何如何如何如何...

聞在案如何如何如何如何...

命請聖安...

提報合併奏



知道了

各該衙門知道

康正叁拾叁年七月初五日 孫氏


㊣中文直書的網頁懸掛縮進和首行縮進

在中文文書的編輯中常常遇到段落的縮進

首行縮進和懸掛縮進

①用「 」中文全角的空白格完成縮進只適合文字非常少或便於編輯的狀態

②在微軟的Ofiice軟體中選擇要處理的文書段落點擊右鍵或者軟體的工具欄位通過段落選項卡編輯功能可以非常簡單的實現選項卡中有首行縮進和懸掛縮進功能

③在網頁html編輯中有些棘手一般用首行縮進text-indent控制縮進长度數值可正可負

第一個範例

點擊查看

或見附註

範例一實現了奉字縮進一格

但是出現一個問題:

<br>是換行

<p>是換段落

左側代碼中「皇帝詔曰」與「天承運」的行間距變大

這裡需要調整<p>上下所有高度

調整間距的說明

點擊查看

或見附註

優化後得到

第二個範例

點擊查看

或見附註

總結

配上中文直書的代碼就可以較為妥善的處理網頁直書

因為中文直書中最特殊的是詔書或上諭等要求抬格

抬格本身就要求「天」「皇帝」「皇太后」「太祖」等高於正文

如果只用text-indent縮進無法識別具體位置。

如果只用「 」中文全角的空白格編輯時不方便

增加padding的上下左右可以將正文先縮進兩個字體再將需要抬格的文字用text-indent提上來

擴展學習見

地址▼縮進與懸掛

①text-indent控制首行縮進後加縮進長度數值可以正負單位可以是是em百分比或者绝对单位

以数值2为例

取值為:

2em 參見em相對長度單位為父元素文本字體尺寸的倍數

2% 相對父元素宽度的百分比

2 in 英寸

2 cm 厘米

2 px 像素

2 pt 磅

地址▼CSS中文網padding的使用

②CSS中padding屬性定义元素邊框与元素内容之間的空白區域。

使用說明

padding-top: 10px;

padding-bottom: 2ex;

padding-left: 20%;

padding-right: 0.25em;

注意:這裡可以直接用padding: 2em;效果為上下左右均縮進兩個字符

地址▼邊界的控制

③拓展

margin

margin是指整個content的邊界padding是指content裡面的邊界。

地址▼代碼的展現

本頁面用到

code和pre和xmp

參見

一次搞懂 CSS 字體單位:px、em、rem 和 %

CSS font 文字屬性

CSS 透過 font-size 屬性設定文字大小

CSS font-size 文字大小

HTML font size 網頁文字大小設計

HTML font 标签

字體大小

HTML font 文字

最好的老師是谷歌

附註

第一個範例

返回正文


<p style="text-indent: 1em"><br>天承運

<p>皇帝詔曰

<p style="text-indent: 2em">數年以來中外臣工講求時務


調整間距

返回正文


CSS中padding屬性定义元素邊框与元素内容之間的空白區域。

使用說明:上下左右控制分別為

padding-top: 10px;

padding-bottom: 2ex;

padding-left: 20%;

padding-right: 0.25em;

那麼剛才的代碼優化為

第二個範例

返回正文


<p style="text-indent:-1em;padding-top:0em;padding-left:2em">

備註.「奉」從左縮一個字符上方零字符文字縮兩字符

<p style="text-indent:-2em;padding-top:0em;padding-left:2em">天承運

備註.「天承運」從左縮兩字符上方零字符文字縮兩字符

<p style="text-indent:-2em;padding-top:0em;padding-left:2em">皇帝詔曰

備註.「皇帝詔曰」從左縮兩字符上方零字符文字縮兩字符

<p style="text-indent:0em;padding-top:0em;padding-left:2em">數年以來中外臣工講求時務

備註.「內容」從左縮兩字符上方零字符文字縮零字符

<padding和text-indent效果可以相互抵消呈現出没有縮進的效果或抵消後的效果如-2em和2em相互抵消-2em和1em實際效果為-1em效果


關鍵詞

text-indent:2em;

padding:2em;

padding-top:2em;

padding-left:2em;

margin

code

pre

xmp


關於臣字的小寫:

<b><small><small><<small></small></small></small></b> 康有為

<b style="font-size:0.6em;"></b> 康有為

補充一

.

絕大多數情況下電腦作業系統預帶的字體漢字顯示的大小基本相同

少數字體如漢儀永樂大典字體電腦字體設計的時候臣字就小一號所以臣字在少數字體下無需用代碼小寫

補充二

.

測試句讀測試

測試句讀測試

測試句讀°測試

測試句讀º測試

測試句讀◦測試

第一種句讀表現最好適應性亦好

關於現代漢語中的逗號我本來想用藍色句讀以示區分但是想了想還是算了都標記好就不會主動理解漢語語言本身的意思了