CSS3文字處理與Block配置

by Vivid 13. 三月 2013 00:25

.NET Magazine國際中文電子雜誌
作 者:許薰尹
審 稿:張智凱
文章編號:N130313401
出刊日期:2013/3/13

CSS3新增一些文字處理的功能,在這一篇文章中,將介紹CSS、以及CSS3文字處理的議題,像是內嵌字型供用戶端下載,此外也會介紹一些CSS3新增的Block樣式,例如outline屬性的用法。

在撰寫HTML網頁時,有時文章內會使用到非常長的英文字,以往會在CSS中使用word-break強制斷行來解決長字超過畫面寬度的問題,不過使用word-break有時會斷行在很奇怪的地方,尤其是搭配text-align: justify時。例如以下範例程式包含P1、P2兩個段落,段落包含多個拼字很長的英文單字,其中利用CSS設定了P2套用「word-break: break-all;」樣式:

 

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8">
  <title> word-break </title>
  <style type = "text/css">
    div {
      width : 200px;
      border : solid 1px black;
      text-align : justify;
    }
    #p1 {
    }
    #p2 {
      word-break : break-all;
    }
  </style>
</head>
<body>
  <div>
    <p id = "p1"> methionylglutaminylarginyltyrosylglutam ylserylleucylphenylalanylalanylglutamin ylleucyllysylglutamylarginyllysylglutam ylglycylalanylphenylalanylvalylprolylph </p>
    <p id="p2"> methionylglutaminylarginyltyrosylglutam ylserylleucylphenylalanylalanylglutamin ylleucyllysylglutamylarginyllysylglutam ylglycylalanylphenylalanylvalylprolylph </p>
  </div>
</body>
</html>

 

在Firefox瀏覽器測試此範例可以看到,第二個P標籤中的文字,被隨意地斷行了,請參考下圖所示:

clip_image001[4]

圖 1:使用word-break強制斷行。

 

使用hyphens斷行

CSS3新增hyphens屬性來設計斷行,w3對於hyphens的說明如下(http://www.w3.org/TR/html401/struct/text.html#h-9.3.3),分為兩種:

  • Plain hyphens 使用「-」符號來斷字
  • Soft hyphens使用「&shy;」來區別,&shy;是看不見的字,也不佔空間。

Hyphens屬性值可以設定為none、manual與auto。修改上個範例程式碼,改用hyphens範例如下:

 

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8">
  <title> Web Font </title>

  <style type = "text/css">
    div {
      width : 200px;
      border : solid 1px black;
      text-align : justify;
      font-family : Batang;
      text-indent : 2rem;
    }

    #p1 {
      -ms-hyphens : auto;
      -webkit-hyphens : auto;
      -moz-hyphens : auto;
      hyphens : auto;
    }

    #p2 {
      -ms-hyphens : manual;
      -webkit-hyphens : manual;
      -moz-hyphens : manual;
      hyphens : manual;
    }

    #p3 {
      -ms-hyphens : none;
      -webkit-hyphens : none;
      -moz-hyphens : none;
      hyphens : none;
    }
  </style>

</head>

<body>

  <div>
    <p id = "p1"> methionylglutaminylarginyltyrosylglutam ylserylleucylphenylalanylalanylglutamin ylleucyllysylglutamylarginyllysylglutam ylglycylalanylphenylalanylvalylprolylph </p>
    <p id = "p2"> methionylglutaminy&shy;larginyltyrosylglutam ylserylleucylphenylalanylalanylglutamin ylleucyllysylglutamylarginyllysylglutam ylglycylalanylphenylalanylvalylprolylph </p>
    <p id = "p3"> methionylglutaminylarginyltyrosylglutam ylserylleucylphenylalanylalanylglutamin ylleucyllysylglutamylarginyllysylglutam ylglycylalanylphenylalanylvalylprolylph </p>
  </div>
</body>
</html>

 

使用Ie10瀏覽器測試範例,呈現的效果如下,第一個P段落,hyphens設為auto,因此文字換行時,會自動加上「-」號連結文字;第二個P段落,hyphens設為manual,並且在文字中手動加入「&shy;」來強迫斷字。第三個P段落則完全沒有斷字效果,請參考下圖所示:

clip_image002[4]

圖 2:使用hyphens斷字,在Ie10瀏覽器執行結果。

使用Firefox瀏覽器呈現的效果和IE10瀏覽器相同,請參考下圖所示:

clip_image003[4]

圖 3:使用hyphens斷字,在Firefox瀏覽器執行結果。

不過,在這個範例中要特別注意,在Firefox 與 IE10瀏覽器執行時要加上lang="en" attribute 才會有效果,出現「-」符號,因此範例中在HTML標籤中加入此lang="e" attribute就是因為這個緣故。

另外在Chrome瀏覽器(版本24)不能正確顯示,請參考下圖所示,Chrome瀏覽器執行的結果通通不斷行:

clip_image004[4]

圖 4:使用hyphens斷字,在Chrome瀏覽器執行結果。

您可以查閱http://caniuse.com/css-hyphens網站,從網頁中很明確地可以看出,目前Chrome瀏覽器(版本24)還不支援這個功能,請參考下圖所示:

clip_image006[4]

圖 5:caniuse.com網站可以查詢瀏覽器支援的功能。

不過根據以下網頁中的描述:「http://blog.chromium.org/2012/11/a-web-developers-guide-to-latest-chrome.html」,目前的Chrome Beta版有提供hyphens支援,未來hyphens支援應該指日可待。您可以從「https://www.google.com/intl/en/chrome/browser/beta.html」網址下載Beta版進行測試。

 

@font-face

寫網頁最怕使用到用戶端電腦沒有安裝的字型,網頁的內容無法正確如預期地在用戶端的瀏覽器中顯示。CSS3 新增@font-face功能能夠自動下載字型檔案到用戶端來解決這個問題。

由於不同作業系統與瀏覽器使用與支援的字型格式並不相同,因此若要使用CSS3 @font-face功能下載字型檔案到用戶端,可以先連到以下網站,將字型轉換成能在Web中使用的格式:「http://www.font2web.com/」。注意,網頁上有這麼一行「I HAVE CHECKED THE FONT LICENSE AND IT ALLOWS EMBEDDING OF THE FONT ON A WEBSITE」,也就是說,您必需自行確保已取得字型檔的授權才行,建議只有沒有授權問題的字型才這麼設計,若需要免費的字型檔案,可以參考http://www.free-fonts.com/網站。

點選網站頁面中的「瀏覽」按鈕,選取想要轉換的本機字型檔,然後按下「CONVERT & DOWNLOAD」按鈕,就可以自動轉換格式,包裝成zip檔案以供下載,請參考下圖所示:

clip_image008[4]

圖 6:轉換與下載zip檔案。

瀏覽器會詢問是否將檔案儲存,按下「儲存」按鈕,請參考下圖所示:

clip_image009[4]

圖 7:下載zip檔案。

解壓縮下載下來的zip檔案,其中有一個fonts.css檔案,與一個fonts目錄,和一個demo.html使用範例檔案,請參考下圖所示:

clip_image010[4]

圖 8:解壓縮下載下來的zip檔案檔案清單。

檢視fonts目錄包含許多格式的字型檔案,以提供給不同的瀏覽器或平台來使用,請參考下圖所示:

clip_image011[4]

圖 9:字型檔案清單。

開啟fonts.css檔案,定義font-face如下:

 

@font-face {
    font-family : 'Conv_BAUHS93';
    src : url('fonts/BAUHS93.eot');
    src : local('☺'), url('fonts/BAUHS93.woff') format('woff'), url('fonts/BAUHS93.ttf') format('truetype'), url('fonts/BAUHS93.svg') format('svg');
    font-weight : normal;
    font-style : normal;

 

 

 

其中font-family和src是必要的,其它則可以省略。屬性設定說明如下:

• font-family:設定樣式使用的字型名稱,目前名稱為「Conv_BAUHS93」。

• font-weight:設定字型是否為粗體(bold)、標準(normal),或是一個介於100與900之間的值。

• font-style:設定字型是否為斜體。

• src:定義要下載的字型檔案所在URL,以及字型檔案的類型。因為大部分的瀏覽器都有支援@font-face規則,但不同瀏覽器支援的字型格式卻不相同,因此,最好參考此範例,將embedded-opentype、woff、truetype 與svg四種格式的定義明確地註明。

為了讓IE10瀏覽器能夠正確地使用到此型,建議手動修改fonts.css檔案的內容如下,在src加上url('fonts/BAUHS93.eot') format('embedded-opentype')這段設定:

 

 

@font-face {
    font-family : 'Conv_BAUHS93';
    src : local('☺'),url('fonts/BAUHS93.eot') format('embedded-opentype'), url('fonts/BAUHS93.woff') format('woff'), url('fonts/BAUHS93.ttf') format('truetype'), url('fonts/BAUHS93.svg') format('svg');
    font-weight : normal;
    font-style : normal;
}

 

 

 

使用local()的用意是讓瀏覽器盡量使用本機電腦已安裝的字型來做顯示,若要使用到沒有在本機安裝的字型,才透過網路進行下載。

另外demol.html檔案則有使用此字型檔案的範例,參考以下程式碼, demo樣式定義了要使用「Conv_BAUHS93」字型:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
    <title>@font-face Demo</title>
    <link rel = "stylesheet" href = "fonts.css" type = "text/css" charset = "utf-8" />
    <style type="text/css">
    body {
        background-color : white;
        font-family : Verdana, Tahoma,Arial, Sans-Serif;
        color : black;
        font-size : 12px;
    }

    .demo
    {
        font-family : 'Conv_BAUHS93',Sans-Serif;
        width : 800px;
        margin : 10px auto;
        text-align : left;
        border : 1px solid #666;
        padding : 10px;
    }
    </style>
</head>
<body>
    <div class = "demo" style = "font-size:25px">
        The quick brown fox jumps over the lazy dog.
    </div>
</body>
</html>

 

 

 

分別在Chrome、Firefox與ie10瀏覽器中做測試,皆可正確下載並顯示我們指定的字型,請參考下圖所示:

clip_image013[4]

圖 10:font-face測試。

 

Outline box

CSS在Box Model(content, padding, border,與margin)之外,增加許多屬性,其中定義了outline box。outline box不會新增整體的寬度與高度,而是位於margin之上。例如以下範例定義一個P標籤,套用樣式,設定outline寬度3px,綠色實線:

 

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
  <title> demo </title>
  <style type = "text/css">
    p {
      border : 3px dashed red;
      outline : 3px solid green;
      outline-offset : 5px;
      margin : 10px;
    }
  </style>
</head>
<body>
  <div>
    <p> CSS在Box Model(content, padding, border,與margin)之外,定義outline box,outline-offset為border與 outline之間的距離。注意,IE 10 不支援 outline-offset,但支援 outline </p>
  </div>
</body>
</html>

 

Outline後方的屬性設定使用快捷語法定義,分別為outline-width、outline-style與outline-color,而outline-offset是CSS3新功能,快捷語法還不支援,因此得個別定義。此範例的P樣式也可以改寫如下:

 

 

p {
  border-width : 3px;
  border-style : dashed;
  border-color : red;
  outline-width : 3px;
  outline-style : solid;
  outline-color : green;
  outline-offset : 5px;
  margin : 10px;
}

 

 

Outline可以定義以下屬性:

· outline-width:設定outline的寬度。可以設為thin、medium、thick或固定的值,例如範例中的3px。

· outline-style:outline的線條樣式,可設為none、dotted、dashed、solid。

· outline-color:outline的顏色。

· outline-offset:outline-offset為border與 outline之間的距離。

此範例呈現在Chrome瀏覽器的結果如下,利用開發人員工具檢視CSS樣式,從右下方的Metrix區塊圖式中,可以很清楚地看到P標籤的Box Model外部綠色線條即為outline,而border與outline之間的空白則是outline-offset,請參考下圖所示:

clip_image015[4]

圖 11:外部綠色線條為outline。

若將滑鼠移動到右下角Marin上方,檢視上方區塊反白的部分,可以更明確地看到outline位於margin之上,請參考下圖所示:

clip_image017[4]

圖 12:outline位於margin之上。

另外要注意的是,並不是所有瀏覽器都支援outline-offset屬性,例如IE 10瀏覽器就不支援,在IE 10瀏覽器執行的結果,請參考下圖所示,沒有offset。

clip_image019[4]

圖 13:IE 10瀏覽器不支援outline-offset屬性。

讀者可以查閱微軟的文件「 http://msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx」,來了解IE瀏覽器對CSS3屬性的支援程度,請參考下圖所示:

clip_image021[4]

圖 14:微軟官方文件IE10 CSS3支援程度。

 

Box屬性:border-radius

以往要設計圓角效果都要透過一些煩瑣的CSS設定,在CSS3,則提供更簡潔的做法,若要為Box設計圓角效果可以利用border-radius屬性,參考以下範例P樣式border-radius設定為2px:

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
  <title> demo </title>
  <style type = "text/css">
    p {
      border-width : 3px;
      border-style : dashed;
      border-color : red;
      border-radius : 2px;
    }
  </style>
</head>
<body>
  <div>
    <p> Border Radius </p>

  </div>
</body>
</html>

 

範例呈現的效果如下圖所示:

clip_image022[4]

圖 15:利用border-radius屬性設計圓角效果

 

Box屬性:border-radius fallback

要查詢瀏覽器是否支援CSS3的某項屬性實在很麻煩,還好有一個好用工具可以使用「modernizr」,它是JavaScript程式,可以很容易判斷瀏覽器支援的CSS3屬性,透過它可以在HTML標籤中自動加上class attribute,以進行判斷。

例如我們想要判斷是否支援border-radius,您可以先連結至「http://modernizr.com/download/」,勾選CSS3中的border-radius,然後按下「Generate」按鈕,下方會自動產生一些JavaScript程式碼,您可以按下「DOWNLOAD」按鈕將JavaScript程式下載下來,請參考下圖所示:

clip_image024[4]

圖 16:利用modernizr檢查CSS3的支援度。

接著在網頁中,就可以使用<script>區塊引用下載下來的JavaScript:

 

<script src = "Scripts/modernizr.custom.13346.js"> </script>

參考以下範例引用modernizr來判斷瀏覽器對border-radius屬性的支援度,若瀏覽器不支援則套用替代方案的CSS樣式:

 

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8">
  <title> demo </title>
  <script src = "Scripts/modernizr.custom.13346.js"> </script>
  <style type="text/css">
    p {
      border-width : 3px;
      border-style : dashed;
      border-color : red;
      border-radius : 5px;
    }
    .no-borderradius p {
      /*自行撰寫替代方案*/
      border-color : green;
    }
  </style>
</head>
<body>
  <div>
    <p> Border Radius </p>
  </div>
</body>
</html>

 

在有支援border-radius屬性的Chrome瀏覽器執行時,從開發人員工具檢視網頁執行的結果,modernizr在HTML標籤產生了這段class設定:「class=" js borderradius"」,請參考下圖所示:

clip_image026[4]

圖 17:引用modernizr來進行判斷,modernizr會自動加上borderradius樣式。

使用IE 10瀏覽器的IE8文件模式中測試看看,因為IE8不支援border radius屬性,所以HTML標籤產生了這段class設定:「class=" js no-borderradius"」,請參考下圖所示:

clip_image028[4]

圖 18:IE8不支援border radius屬性。

我們便可以自行定義一個.no-borderradius樣式來撰寫替代方案,由於本範例僅供展示,故只將border-color設為綠色來測試是否如預期運作,執行的結果如上圖所示。

 

Box屬性:overflow-x與overflow-y

overflow-x與overflow-y屬性可以控制當元素(element)的內容(content)超過box的寬高時,該如何處理,常用的設定值如下:

• visible:顯示內容,但內容(content)會溢出於box之外。

• hidden:隱藏內容,超出的內容不顯示。

• scroll:顯示內容,並額外產生捲軸。

• auto:自動判斷是否顯示捲軸。

參考以下範例,P標籤內含在div標籤之中,p的寬度(200px)大於div(150px):

 

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8">
  <title> demo </title>
  <style type = "text/css">
    div {
      width : 150px;
      overflow-x : scroll;
      border-width : 3px;
      border-style : dashed;
      border-color : red;
    }
    p {
      width : 200px;
      height : 100px;
    }
  </style>
</head>
<body>
  <div>
    <p> HTML5新增許多新的輸入型別(Input Types),以方便我們設計網站應用程式,由其是經常需要輸入的電子郵件、URL、電話、生日…等等欄位,在HTML5中這些常用的項目都有新的標籤可以使用,這些新項目有些提供了一些自動驗證的功能,讓我們可以減少一些時間,不用再花時間再自行撰寫程式碼,如JavaScript來進行資料驗證的動作。本文將介紹HTML5新增的表單輸入項目與驗證項目。 </p>
  </div>
</body>
</html>

 

 

 

當overflow-x屬性設定為「scroll」時,底下X軸會自動出現捲軸,可以左右捲動,顯示超出div的文字,請參考下圖所示:

clip_image029[4]

圖 19:overflow-x設定為「scroll」時,X軸會自動出現捲軸。

當overflow-x屬性設定為「hidden」時,X軸超出div的文字將被隱藏,請參考下圖所示:

clip_image030[4]

圖 20:overflow-x設定為「hidden」時,X軸超出div的文字將被隱藏。

 

Box屬性:resize

Resize屬性可以讓使用者變更元素的寬、高度。可以設定的值為:

• none:不可變更寬、高度。

• both:可變更寬或高度。

• horizontal:可變更寬度。

• vertical:可變更高度。

建議resize屬性要搭配min-width與max-width、min-height與max-height屬性一起使用,設定元素最小必要寬度、最大可用寬度、最小必要高度、最大可用高度,免得在使用者變更大小時破壞整個頁面的排版。

resize屬性要和overflow屬性一起使用才會有效,參考以下範例程式碼,resize屬性設為both,overflow設為auto:

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8">
  <title> demo </title>
  <style type = "text/css">
    p {
      width : 200px;
      height : 100px;
      border-width : 3px;
      border-style : dashed;
      border-color : red;
      min-width : 60px;
      max-width : 400px;
      min-height : 50px;
      max-height : 200px;
      resize : both;
      overflow : auto;
    }
  </style>
</head>
<body>
  <div>
    <p> HTML5新增許多新的輸入型別(Input Types),以方便我們設計網站應用程式,由其是經常需要輸入的電子郵件、URL、電話、生日…等等欄位,在HTML5中這些常用的項目都有新的標籤可以使用,這些新項目有些提供了一些自動驗證的功能,讓我們可以減少一些時間,不用再花時間再自行撰寫程式碼,如JavaScript來進行資料驗證的動作。本文將介紹HTML5新增的表單輸入項目與驗證項目。 </p>
  </div>
</body>
</html>

 

在瀏覽器測試時,可以利用滑鼠拖曳右下角,即可改變寬度與高度,請參考下圖所示:

clip_image031[4]

圖 21:Resize屬性可允許使用者變更元素的寬、高度。

 

CSS Flexbox Layout Module

CSS3新增Flexbox(CSS Flexible Box Layout Module)配置,在筆者《HTML5配置與CSS3》這篇文章之中,介紹過CSS Flexbox Layout Module「http://blogs.uuu.com.tw/Articles/post/2012/10/10/HTML5%E9%85%8D%E7%BD%AE%E8%88%87CSS3.aspx」。但幾個舊版的語法,不同版本中不太一樣,實在很容易讓人家混淆。整理如下:

版本 

語法 

Editor's Draft, 5 February 2013  

display: flex;

W3C Candidate Recommendation, 18 September 2012  

display: flex;

W3C Working Draft, 22 March 2012  

display:flexbox;

W3C Working Draft, 29 November 2011  

display:flexbox;

W3C Working Draft, 22 March 2011  

display:flexbox;

W3C Working Draft, 23 July 2009  

display: box;

以下為一個Flexbox範例,-ms-flexbox是給ie瀏覽器專用的設定:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type = "text/css">
    div > div {
      display : flexbox;
      display : -ms-flexbox;
      border : 5px solid red;
    }
  </style>
</head>
<body>

  <div id = "Parent">
    <div id = "Child1">
      Mary
    </div>
    <div id = "Child2">
      Candy
    </div>
  </div>
</body>
</html>

 

 

Child1、Child2由上至下以垂直的欄位顯示,請參考下圖所示:

clip_image032[4]

圖 22:flexbox。

Tags:

.NET Magazine國際中文電子雜誌 | HTML | 許薰尹Vivid Hsu

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List