<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>博客詳情</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"><link rel="stylesheet" href="./static/css/typo.css"><link rel="stylesheet" href="./static/css/me.css"></head><body><!--導航--><nav class="ui inverted segment m-padded-tb-mini"><div class="ui container"><div class="ui inverted secondary stackable menu"><h2 class="ui teal header item">Blog</h2><a href="#"class="m-item item m-mobile-hide"><i class="mini home icon"></i> 首頁</a><a href="#"class="m-item item m-mobile-hide"><i class="mini idea icon"></i>分類</a><a href="#"class="m-item item m-mobile-hide"><i class="mini tags icon"></i>標簽</a><a href="#"class="m-item item m-mobile-hide"><i class="mini clone icon"></i>歸檔</a><a href="#"class="m-item item m-mobile-hide"><i class="mini info icon"></i>關于我</a><div class="right m-item item m-mobile-hide"><div class="ui icon inverted transparent input"><input type="text" placeholder="搜索...."><i class="search link icon"></i></div></div></div></div><a href="#"class="ui menu toggle black icon button m-right-top m-mobile-show"><i class="sidebar icon"></i></a></nav><!--中間內容--><div><div class="m-container-small m-padded-tb-big"><div class="ui container"><!--頭部--><div class="ui top attached segment"><div class="ui horizontal link list"><div class="item"><img src="http://unsplash.it/100/100?image=1005" alt=""class="ui avatar image"><div class="content"><a href="#"class="header">李仁密</a></div></div><div class="item"><i class="calendar icon"></i>2017-10-01</div><div class="item"><i class="eye icon"></i>2342</div></div></div><div class="ui attached segment"><!--圖片區域--><img src="http://unsplash.it/800/450?image=1005" alt=""class="ui fluid rounded image"></div><div class="ui attached padded segment"><!--內容--><div class="ui right aligned basic segment"><div class="ui orange basic label">原創</div></div><h2 class="ui center aligned header">關于刻意練習的清單</h2><br><div id="content "class="typo typo-selection m-padded-lr-responsive m-padded-tb-large"><h2 id="tagline"class="serif">一致化瀏覽器排版效果，構建最適合中文閱讀的網頁排版</h2><ol id="table"><li><a href="#section1">關于 <i class="serif">Typo.css</i></a></li><li><a href="#section2">排版實例</a><ul><li><a href="#section2-1">例1：論語學而篇第一</a></li><li><a href="#section2-2">例2：英文排版</a></li></ul></li><li><a href="#section3">附錄</a><ul><li><a href="#appendix1"><i class="serif">Typo.css</i> 排版偏重點</a></li><li><a href="#appendix2">開源許可</a></li></ul></li></ol><h2 id="section1">一、關于 <i class="serif">Typo.css</i></h2><p><i class="serif">Typo.css</i> 的目的是，在一致化瀏覽器排版效果的同時，構建最適合中文閱讀的網頁排版。</p><h4>現狀和如何去做：</h4><p class="typo-first">排版是一個麻煩的問題 <sup><a href="#appendix1"># 附錄一</a></sup>，需要精心設計，而這個設計卻是常被視覺設計師所忽略的。前端工程師更常看到這樣的問題，但不便變更。因為在多個 OS 中的不同瀏覽器渲染不同，改動需要多的時間做回歸測試，所以改變變得更困難。而像我們一般使用的Yahoo、Eric Meyer 和 Alice base.css 中采用的 Reset 都沒有很好地考慮中文排版。<i class="serif">Typo.css</i> 要做的就是解決中文排版的問題。</p><p><strong><i class="serif">Typo.css</i> 測試于如下平臺：</strong></p><table class="ui table" summary="Typo.css 的測試平臺列表"><thead><tr><th>OS/瀏覽器</th><th>Firefox</th><th>Chrome</th><th>Safari</th><th>Opera</th><th>IE9</th><th>IE8</th><th>IE7</th><th>IE6</th></tr></thead><tbody><tr><td>OS X</td><td>?</td><td>?</td><td>?</td><td>?</td><td>-</td><td>-</td><td>-</td><td>-</td></tr><tr><td>Win 7</td><td>?</td><td>?</td><td>?</td><td>?</td><td>?</td><td>?</td><td>?</td><td>-</td></tr><tr><td>Win XP</td><td>?</td><td>?</td><td>?</td><td>?</td><td>-</td><td>?</td><td>?</td><td>?</td></tr><tr><td>Ubuntu</td><td>?</td><td>?</td><td>-</td><td>?</td><td>-</td><td>-</td><td>-</td><td>-</td></tr></tbody></table><h4>中文排版的重點和難點</h4><p>在中文排版中，HTML4 的很多標準在語義在都有照顧到。但從視覺效果上，卻很難利用單獨的 CSS 來實現，像<abbr title="在文字下多加一個點">著重號</abbr>（例：這里<em class="typo-em">強調一下</em>）。在 HTML4 中，專名號標簽（<code><u></code>）已經被放棄，而HTML5 被<a href="//html5doctor.com/u-element/">重新提起</a>。<i class="serif">Typo.css</i> 也根據實際情況提供相應的方案。我們重要要注意的兩點是：</p><ol><li>語義：語義對應的用法和樣式是否與中文排版一致</li><li>表現：在各瀏覽器中的字體、大小和縮放是否如排版預期</li></ol><p>對于這些，<i class="serif">Typo.css</i> 排版項目的中文偏重注意點，都添加在附錄中，詳見：</p><blockquote><b>附錄一</b>：<a href="#appendix1"><i class="serif">Typo.css</i> 排版偏重點</a></blockquote><p>目前已有像百姓網等全面使用 <i class="serif">Typo.css</i> 的項目，測試平臺的覆蓋，特別是在<abbr title="手機、平板電腦等移動平臺">移動端</abbr>上還沒有覆蓋完主流平臺，希望有能力的同學能加入測試行列，或者加入到 <i class="serif">Typo.css</i>的開發。加入方法：<a href="https://github.com/sofish/Typo.css">參與 <i class="serif">Typo.css</i> 開發</a>。如有批評、建議和意見，也隨時歡迎給在 Github 直接提 <ahref="https://github.com/sofish/Typo.css/issues">issues</a>，或給<abbr title="Sofish Lin, author of Typo.css"role="author">我</abbr>發<ahref="mailto:sofish@icloud.com">郵件</a>。</p><h2 id="section2">二、排版實例：</h2><p>提供2個排版實例，第一個中文實例來自于來自于<cite class="typo-unique">張燕嬰</cite>的《論語》，由于古文排版涉及到的元素比較多，所以采用《論語》中《學而》的第一篇作為排版實例介紹；第2個來自到經典的Lorem Ipsum，并加入了一些代碼和列表等比較具有代表性的排版元素。</p><h3 id="section2-1">例1：論語學而篇第一</h3><p><small><b>作者：</b><abbr title="名丘，字仲尼">孔子</abbr>（<time>前551年9月28日－前479年4月11日</time>）</small></p><h4>本篇引語</h4><p>《學而》是《論語》第一篇的篇名。《論語》中各篇一般都是以第一章的前二三個字作為該篇的篇名。《學而》一篇包括16章，內容涉及諸多方面。其中重點是「吾日三省吾身」；「節用而愛人，使民以時」；「禮之用，和為貴」以及仁、孝、信等道德范疇。 </p><h4>原文</h4><p>子曰：「學而時習之，不亦說乎？有朋自遠方來，不亦樂乎？人不知，而不慍，不亦君子乎？」 </p><h4>譯文</h4><p>孔子說：「學了又時常溫習和練習，不是很愉快嗎？有志同道合的人從遠方來，不是很令人高興的嗎？人家不了解我，我也不怨恨、惱怒，不也是一個有德的君子嗎？」 </p><h4>評析</h4><p>宋代著名學者<u class="typo-u">朱熹</u>對此章評價極高，說它是「入道之門，積德之基」。本章這三句話是人們非常熟悉的。歷來的解釋都是：學了以后，又時常溫習和練習，不也高興嗎等等。三句話，一句一個意思，前后句子也沒有什么連貫性。但也有人認為這樣解釋不符合原義，指出這里的「學」不是指學習，而是指學說或主張；「時」不能解為時常，而是時代或社會的意思，「習」不是溫習，而是使用，引申為采用。而且，這三句話不是孤立的，而是前后相互連貫的。這三句的意思是：自己的學說，要是被社會采用了，那就太高興了；退一步說，要是沒有被社會所采用，可是很多朋友贊同<abbrtitle="張燕嬰">我</abbr>的學說，紛紛到我這里來討論問題，我也感到快樂；再退一步說，即使社會不采用，人們也不理解我，我也不怨恨，這樣做，不也就是君子嗎？（見《齊魯學刊》1986年第6期文）這種解釋可以自圓其說，而且也有一定的道理，供讀者在理解本章內容時參考。</p><p>此外，在對「人不知，而不慍」一句的解釋中，也有人認為，「人不知」的后面沒有賓語，人家不知道什么呢？當時因為孔子有說話的特定環境，他不需要說出知道什么，別人就可以理解了，卻給后人留下一個謎。有人說，這一句是接上一句說的，從遠方來的朋友向我求教，我告訴他，他還不懂，我卻不怨恨。這樣，「人不知」就是「人家不知道我所講述的」了。這樣的解釋似乎有些牽強。</p><p>總之，本章提出以學習為樂事，做到人不知而不慍，反映出孔子學而不厭、誨人不倦、注重修養、嚴格要求自己的主張。這些思想主張在《論語》書中多處可見，有助于對第一章內容的深入了解。</p><h3 id="section2-2">例2：英文排版</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'sstandard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make atype specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remainingessentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsumpassages, and more recently with desktop publishing software like Aldus PageMaker including versions of LoremIpsum.</p><blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</blockquote><h4>The standard Lorem Ipsum passage, used since the 1500s</h4><p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sintoccaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><h4>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h4><p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsamvoluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui rationevoluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipiscivelit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enimad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodiconsequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p><h4>List style in action</h4><ul><li>If you wish to succeed, you should use persistence as your good friend, experience as your reference, prudence asyour brother and hope as your sentry.<p>如果你希望成功，當以恒心為良友，以經驗為參謀，以謹慎為兄弟，以希望為哨兵。</p></li><li>Sometimes one pays most for the things one gets for nothing.<p>有時候一個人為不花錢得到的東西付出的代價最高。</p></li><li>Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult thingseasily.<p>只有有耐心圓滿完成簡單工作的人，才能夠輕而易舉的完成困難的事。</p></li></ul><h4>You may want to create a perfect <code><hr /></code> line, despite the fact that there will never have one</h4><hr/><p><abbr title="法國作家羅切福考爾德">La Racheforcauld</abbr> said:<mark>"Few things are impossible in themselves; and it is often for want of will, rather than of means, that man failsto succeed".</mark>You just need to follow the browser's behavior, and set a right <code>margin</code> to it。it will works nice as thedemo you're watching now. The following code is the best way to render typo in Chinese:</p><pre>/* 標題應該更貼緊內容，并與其他塊區分，margin 值要相應做優化 */
h1,h2,h3,h4,h5,h6 {line-height:1;font-family:Arial,sans-serif;margin:1.4em 00.8em;}
h1{font-size:1.8em;}
h2{font-size:1.6em;}
h3{font-size:1.4em;}
h4{font-size:1.2em;}
h5,h6{font-size:1em;}/* 現代排版：保證塊/段落之間的空白隔行 */.typo p,.typo pre,.typo ul,.typo ol,.typo dl,.typo form,.typo hr {margin:1em 00.6em;}</pre><h3 id="section3">三、附錄</h3><h5 id="appendix1">1、<i class="serif">Typo.css</i> 排版偏重點</h5><table class="ui table" summary="Typo.css 排版偏重點"><thead><tr><th>類型</th><th>語義</th><th>標簽</th><th>注意點</th></tr></thead><tbody><tr><th rowspan="15">基礎標簽</th><td>標題</td><td><code>h1</code> ～ <code>h6</code></td><td>全局不強制大小，<code>.typo</code> 中標題與其對應的內容應緊貼，并且有相應的大小設置</td></tr><tr><td>上、下標</td><td><code>sup</code>/<code>sub</code></td><td>保持與 MicroSoft Office Word 等程序的日常排版一致</td></tr><tr><td>引用</td><td><code>blockquote</code></td><td>顯示/嵌套樣式</td></tr><tr><td>縮寫</td><td><code>abbr</code></td><td>是否都有下劃線，鼠標 <code>hover</code> 是否為幫助手勢</td></tr><tr><td>分割線</td><td><code>hr</code></td><td>顯示的 <code>padding</code> 和 <code>margin</code>正確</td></tr><tr><td>列表</td><td><code>ul</code>/<code>ol</code>/<code>dl</code></td><td>在全局沒有 <code>list-style</code>，在 .<code>typo</code> 中對齊正確</td></tr><tr><td>定義列表</td><td><code>dl</code></td><td>全局 <code>padding</code> 和 <code>margin</code>為0， .<code>typo</code> 中對齊正確</td></tr><tr><td>選項</td><td><code>input[type=radio[, checkbox]]</code></td><td>與其他 <code>form</code> 元素排版時是否居中</td></tr><tr><td>斜體</td><td><code>i</code></td><td>只設置一種斜體，讓 <code>em</code> 和 <code>cite</code> 顯示為正體</td></tr><tr><td>強調</td><td><code>em</code></td><td>在全局顯示正體，在 <code>.typo</code> 中顯示與 <code>b</code> 和 <code>strong</code> 的樣式一致，為粗體</td></tr><tr><td>加強</td><td><code>strong/b</code></td><td>顯示為粗體</td></tr><tr><td>標記</td><td><code>mark</code></td><td>類似熒光筆</td></tr><tr><td>印刷</td><td><code>small</code></td><td>保持為正確字體的 80% 大小，顏色設置為淺灰色</td></tr><tr><td>表格</td><td><code>table</code></td><td>全局不顯示線條，在 <code>table</code> 中顯示表格外框，并且表頭有淺灰背景</td></tr><tr><td>代碼</td><td><code>pre</code>/<code>code</code></td><td>字體使用 <code>courier</code> 系字體，保持與 <code>serif</code> 有比較一致的顯示效果</td></tr><tr><th rowspan="5">特殊符號</th><td>著重號</td><td><em class="typo-em">在文字下加點</em></td><td>在支持 <code>:after</code> 和 <code>:before</code> 的瀏覽器可以做漸進增強實現</td></tr><tr><td>專名號</td><td><u>林建鋒</u></td><td>專名號，有下劃線，使用 <code>u</code> 或都 <code>.typo-u</code> 類</td></tr><tr><td>破折號</td><td>——</td><td>保持一劃，而非兩劃</td></tr><tr><td>人民幣</td><td>¥</td><td>使用兩平等線的符號，或者 HTML 實體符號 <code>&yen;</code></td></tr><tr><td>刪除符</td><td><del>已刪除（deleted）</del></td><td>一致化各瀏覽器顯示，中英混排正確</td></tr><tr><th rowspan="3">加強類</th><td>專名號</td><td><code>.typo-u</code></td><td>由于 <code>u</code> 被 HTML4 放棄，在向后兼容上推薦使用 <code>.typo-u</code></td></tr><tr><td>著重符</td><td><code>.typo-em</code></td><td>利用 <code>:after</code> 和 <code>:before</code> 實現著重符</td></tr><tr><td>清除浮動</td><td><code>.clearfix</code></td><td>與一般 CSS Reset 保持一對致 API</td></tr><tr><th rowspan="5">注意點</th><td colspan="3">（1）中英文混排行高/行距</td></tr><tr><td colspan="3">（2）上下標在 IE 中顯示效果</td></tr><tr><td colspan="3">（3）塊/段落分割空白是否符合設計原則</td></tr><tr><td colspan="3">（4）input 多余空間問題</td></tr><tr><td colspan="3">（5）默認字體色彩，目前采用 <code>#333</code> 在各種瀏覽顯示比較好</td></tr></tbody></table><h5 id="appendix2">2、開源許可</h5></div><!--標簽--><div class="m-padded-lr-responsive"><div class="ui basic teal left pointing label">方法論</div></div><!--贊賞--><div class="ui center aligned basic segment"><button id="payButton"class="ui orange basic circular button">贊賞</button></div><div class="ui payQR flowing popup top left transition hidden"><div class="ui orange basic label"><div class="ui images" style="font-size: inherit !important;"><div class="image"><img src="./static/images/wechat.jpg" alt=""class="ui rounded bordered image" style="width:120px "><div>支付寶</div></div><div class="image"><img src="./static/images/wechat.jpg" alt=""class="ui rounded bordered image" style="width:120px "><div>微信</div></div></div></div></div></div><div class="ui attached positive message"><!--博客信息--><div class="ui middle aligned grid"><div class="eleven wide column"><ui class="list"><li>作者: 李仁密（聯系作者）</li><li>發表時間:2017/10/0209:08</li><li>版權聲明: 自由轉載-非商用-保持署名（創意共享3.0許可證）</li><li>公眾號轉載: 請在文末添加作者公眾號二維碼</li></ui></div><div class="five wide column"><img src="./static/images/wechat.jpg" alt=""class="ui right floated rounded bordered image" style="width: 110px"></div></div></div><div class="ui bottom attached segment"><!--留言區域列表--><div class="ui teal segment"><div class="ui threaded comments"><h3 class="ui dividing header">Comments</h3><div class="comment"><a class="avatar"><img src="http://unsplash.it/100/100?image=1005"></a><div class="content"><a class="author">Matt</a><div class="metadata"><span class="date">Today at 5:42PM</span></div><div class="text">How artistic!</div><div class="actions"><a class="reply">回復</a></div></div></div><div class="comment"><a class="avatar"><img src="http://unsplash.it/100/100?image=1005"></a><div class="content"><a class="author">Elliot Fu</a><div class="metadata"><span class="date">Yesterday at 12:30AM</span></div><div class="text"><p>This has been very useful for my research. Thanks as well!</p></div><div class="actions"><a class="reply">回復</a></div></div><div class="comments"><a class="avatar"><img src="http://unsplash.it/100/100?image=1005"></a><div class="content"><a class="author">Jenny Hess</a><div class="metadata"><span class="date">Just now</span></div><div class="text">Elliot you are always so right :)</div><div class="actions"><a class="reply">回復</a></div></div></div></div><div class="comment"><a class="avatar"><img src="http://unsplash.it/100/100?image=1005"></a><div class="content"><a class="author">Joe Henderson</a><div class="metadata"><span class="date">5 days ago</span></div><div class="text">Dude,this is awesome. Thanks so much</div><div class="actions"><a class="reply">回復</a></div></div></div></div></div><div class="ui form"><div class="field"><textarea name="content" placeholder="請輸入評論信息..."></textarea></div><div class="fields"><div class="field m-mobile-wide m-margin-bottom-small"><div class="ui left icon input"><i class="user icon"></i><input type="text" name="nickname" placeholder="姓名"></div></div><div class="field m-mobile-wide m-margin-bottom-small"><div class="ui left icon input"><i class="user icon"></i><input type="text" name="email" placeholder="郵箱"></div></div><div class="filed m-margin-bottom-small m-mobile-wide"><button class="ui teal button m-mobile-wide"><i class="edit icon"></i>發布</button></div></div></div></div></div></div></div><br><br><!--底部內容--><footer class="ui inverted vertical segment m-padded-tb-massive"><div class="ui center aligned container"><div class="ui inverted divided stackable grid"><div class="three wide column"><div class="ui inverted link list"><div class="item"><img src="./static/images/wechat.jpg"class=" ui rounded image" alt="" style="width: 110px"></div></div></div><div class="three wide column"><h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4><div class="ui inverted link list"><a href="#"class="item">用戶故事（User Story）</a><a href="#"class="item">冠以刻意練習的清單</a><a href="#"class="item">失敗要趁早</a></div></div><div class="three wide column"><h4 class="ui inverted header m-text-thin m-text-spaced ">聯系我</h4><div class="ui inverted link list"><a href="#"class="item">Email：1440206921@qq.com</a><a href="#"class="item">QQ：1440206921</a></div></div><div class="seven wide column"><h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4><p class="m-text-thin m-text-spaced m-opacity-mini">這是我的個人博客、會分享關于編程、寫作、思考相關的任何內容，希望可以給來到這的人有所幫助...</p></div></div><div class="ui inverted section divider"></div><p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright ? 2016-2017 Lirenmi Designed by Lirenmi</p></div></footer><script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script><script>$('.menu.toggle').click(function (){$('.m-item').toggleClass('m-mobile-hide');});$('#payButton').popup({popup : $('.payQR.popup'),on :'click',position:'bottom center'});</script></body></html>
