HTML5

#HTML(HTML5):字詞分行

在HTML裡面,如果打了太長的一連串的英文字,瀏覽器會把它當作一個詞彙,並且不會在空間狹小的時候做分行(除非中間有-,?……等等之類的分隔符,會在分隔符處分行)。不過我們平常打中文沒有這個問題,中文一個一個字,中間就算沒空白也會以字為單位去做分行。但是就算打英文文章,好似也很少遇過會有一個單字長到完全裝不下的情形。其實是真有這情況會需要,那就是網址,網址中間通常都不會有分隔符,而偏偏又得連在一起,就會導致以下的結果:
wbr.png

那該怎麼做去解決這個問題呢?就利用wbr標籤吧!

wbr:字詞方行

wbr.html
1
2
3
...
  http://this<wbr />.is<wbr />.a<wbr />.really<wbr />.long<wbr />.example<wbr />.com/With<wbr />/deeper<wbr />/level<wbr />/pages
...

以上是個例子,我們在我們認定可以斷行的地方去加上wbr標籤,瀏覽器就會在裝該文字的容器塞不下的時候選擇適當的wbr標籤去斷行。若文字能夠完美得塞進容器內那就不會進行斷行。

可完美放入的時候:
wbr1.png

無法完美放入的時候:
wbr2.png

(此範例對於網址的分段方法是依照DevDocs上所言The Yahoo Style Guide的分行方法。)

參考資料

  1. DevDocs:http://devdocs.io/html/
  2. w3schools.com > HTML <wbr> Tag:http://www.w3schools.com/tags/tag_wbr.asp

#HTML(HTML5):多媒體嵌入

今天終於要來提HTML5的新功能之一-放置多媒體的部分,底下一樣就用範例來解說。

embed:外部嵌入播放器播放音樂與影片

media.html
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>多媒體</title>
  </head>
  <body>
    <embed src="Sonic Generations [OST] - Rooftop Run (Modern).mp3" />
    <embed src="[灆洢]Sonic Generations - Sky Sanctuary Act2 - 0225.13-087-Rank S.mp4" />
  </body>
</html>

media01.png

這個embed標籤從很早以前就有了,不過直至HTML5才將之納為標準。

embed主要是用外部的播放程式鑲嵌在網頁上來播放音樂或影片,利用src屬性去放置音樂或影片的連結。如果該瀏覽器找不到可播放此音樂或影片的播放程式,那麼就沒辦法播放了。

不過在HTML5的標準裡,已經支援讓瀏覽器去播放音樂或影片了!底下就來看看直接讓瀏覽器播放音樂或影片的標籤吧!

audio:播放音樂

media02.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>多媒體</title>
  </head>
  <body>
    <p>
      <audio src="Sonic Generations [OST] - Rooftop Run (Modern).mp3" controls autoplay loop>
      對不起,您的瀏覽器不支援HTML5。
      </audio>
    </p>
  </body>
</html>

media02.png

audio標籤用於放置音樂,屬性有很多,在此列舉常用的controls、autoplay、loop,這些屬性跟以前看到的屬性有點不同,以前的屬性都要代值,但是HTML5中很多標籤是具有布林屬性:有出現就有功能,沒出現就沒功能。controls表示是否要出現控制面板,autoplay表示是否要自動播放,loop表示是否要循環。

audio裡面的內容可放置文字,來讓不支援HTML5的瀏覽器可以顯示。

video:播放影片

media03.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>多媒體</title>
  </head>
  <body>
    <p>
      <video src="[灆洢]Sonic Generations - Sky Sanctuary Act2 - 0225.13-087-Rank S.mp4" controls autoplay loop>
      對不起,您的瀏覽器不支援HTML5。
      </video>
    </p>
  </body>
</html>

media03.png

video標籤用於放置音樂,屬性跟audio一樣有很多,範例中一樣列舉常用的controls、autoplay、loop,這些屬性跟audio的同名屬性類似,就不多提了。

video裡面的內容一樣可放置文字,來讓不支援HTML5的瀏覽器可以顯示。

瀏覽器支援音樂、影片列表

由於audio與video是使用瀏覽器自身來播放音樂與影片,故就要來稍微注意一下每個瀏覽器支援的音樂與影片格式有哪些了,底下是列表:

音樂格式支援

Browser mp3 wav ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera NO YES YES

影片格式支援

Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera NO YES YES

看完上面的表,不知道各位有沒有發現,上面沒有一種格式可以在每個瀏覽器上皆可執行,那該怎麼辦呢?這時候就要來使用source標籤了!

source:設定音樂與影片的來源

media04.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>多媒體</title>
  </head>
  <body>
    <p>
      <audio controls autoplay loop>
        <source src="music.ogg" type="audio/ogg">
        <source src="music.mp3" type="audio/mpeg">
        對不起,您的瀏覽器不支援HTML5。
      </audio>
    </p>
    <p>
      <video controls autoplay loop>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        對不起,您的瀏覽器不支援HTML5。
      </video>
    </p>
  </body>
</html>

將audio或video內的src屬性拿掉,換成在audio或video內容內加入來source標籤,每個source標籤就代表一個音樂或是影片的來源,瀏覽器在讀的時候會照順序找尋可播放的來源,若找到有可以播放的來源時,就會播放。

最後給各位一個不錯的支援多瀏覽器的方法如下:

media05.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
...
<p>
  <audio controls autoplay loop>
    <source src="music.ogg" type="audio/ogg">
    <source src="music.mp3" type="audio/mpeg">
    <embed src="music.ogg" />
  </audio>
</p>
<p>
  <video controls autoplay loop>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    <embed src="movie.mp4" />
  </video>
</p>
...

除了原本加source的版本外,在給不支援HTML5的瀏覽器就用embed來取代,這樣就又可以支援更多的瀏覽器了!

參考資料

  1. DevDocs:http://devdocs.io/html/
  2. w3schools.com > HTML5 Audio:http://www.w3schools.com/html/html5_audio.asp
  3. w3schools.com > HTML5 Video:http://www.w3schools.com/html/html5_video.asp

#HTML(HTML5):文字標音

本來是沒特別想寫這篇,不過想想這功能在最近已經被廣泛支援了,故就想說一定要好好來介紹一下!

大家在打入中文、日文的時候,有時候應該會想加入標音吧!正好以前IE有個標籤叫做ruby標籤可以做到這樣的事情,而在HTML5終於把ruby標籤做為標準加入了!

標音

底下一樣先用一個範例來解釋:

ruby01.html
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>標音</title>
  </head>
  <body>
    <ruby><rt></rt></ruby>まれた<ruby><rt>はな</rt></ruby> <br /><ruby><rt>ㄐㄧㄢˋ</rt><rt>ㄊㄚˋ</rt></ruby>的花朵
  </body>
</html>

ruby01.png
上面的排版有點亂,不過為了不要讓文字中間出現空白,只好擠成一行了,底下列一下通用式用法的解說:

rubyusage.html
1
2
3
4
5
<ruby>
  [欲加上標音的字詞1] <rt>[標音1]</rt>
  [欲加上標音的字詞2] <rt>[標音2]</rt>
  ...
</ruby>

大體上就是如此,整個標音群組用ruby標籤包住,打上要標音的詞彙後,加上rt標籤去做標音,就可以達到標音的效果了!

rb標籤:早期的寫法會把[欲加上標音的字詞]包在<rb>...</rb>內,但是收錄進HTML5標準的時候,去除了rb標籤,所以目前的標準是要省略rb標籤的唷!

不支援標音之瀏覽器的表現方法

假設今天要讓不支援標音的瀏覽器上看起來也要至少正常一點,可以將要多餘顯示的文字用rp標籤包住。這樣的話,有支援標音的瀏覽器會忽略rp標籤裡的內容,而不支援標音的瀏覽器就會顯示rp標籤裡的內容。底下看個範例:

ruby02.html
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>標音</title>
  </head>
  <body>
    <ruby><rp></rp><rt></rt><rp></rp></ruby>まれた<ruby><rp></rp><rt>はな</rt><rp></rp></ruby> <br /><ruby><rp></rp><rt>ㄐㄧㄢˋ</rt><rp></rp><rp></rp><rt>ㄊㄚˋ</rt><rp></rp></ruby>的花朵
  </body>
</html>

ruby02.png
左邊Google Chrome可以使用標音功能,故就直接顯示其標音,rp標籤裡之內容不管;而右邊Firefox不能使用標音功能,故就把rp標籤內的內容也一併顯示出來。

  1. 與w3schools.com裡的內容不同:rp標籤我是放在rt標籤外才能讓有標音功能的瀏覽器顯示正常,但w3schools.com內的卻放在rt標籤內。
  2. Firefox支援Ruby否?根據w3schools.com的內容是說已經支援了,但我的Firefox還是沒有。如果你的Firefox沒有標音功能,可以到這裡(HTML Ruby)下載套件安裝一下就支援了!

參考資料

  1. w3schools.com > HTML <ruby> Tag:http://www.w3schools.com/tags/tag_ruby.asp
  2. w3schools.com > HTML <rp> Tag:http://www.w3schools.com/tags/tag_rp.asp
  3. Re: <rb> as part of HTML5 ruby? from Dean Lee on 2011-12-29 (public-html-ig-zh@w3.org from December 2011):http://lists.w3.org/Archives/Public/public-html-ig-zh/2011Dec/0021.html
  4. 日文歌詞標音編輯器:http://but.lolicom.org/tool/