chromium/components/dom_distiller/core/html/preview.html

<!DOCTYPE HTML>
<!--
Copyright 2014 The Chromium Authors
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="theme-color" id="theme-color">
  <title>Title goes here and it could be kind of lengthy - Publisher name</title>
  <link href="../css/distilledpage.css" rel="stylesheet" type="text/css">
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  <style>
    .english :lang(th) {display: none}
    .english :lang(zh) {display: none}
    .tall :lang(en) {display: none}
    .tall :lang(zh) {display: none}
    .dense :lang(en) {display: none}
    .dense :lang(th) {display: none}
  </style>
</head>
<body class="light sans-serif">
  <div id="menus" style="position: absolute; right: 0; z-index: 2; color: black; background: #CCC; opacity: 0.8;">
    Theme:
    <select id="selectTheme" onchange="useTheme(this.value)">
      <option value="light" selected="selected">light</option>
      <option value="dark">dark</option>
      <option value="sepia">sepia</option>
    </select>
    <br/>
    Lead image:
    <select id="showLeadImg" onchange="document.getElementById('leadImg').style.display=this.value">
      <option value="block" selected="selected">show</option>
      <option value="none">hide</option>
    </select>
    <br/>
    Lang family:
    <select id="langFamily" onchange="document.getElementById('contentWrap').className=this.value">
      <option value="english" selected="selected">English-like</option>
      <option value="tall">Tall</option>
      <option value="dense">Dense</option>
    </select>
  </div>
  <div id="contentWrap" class="english">
    <div id="mainContent">
      <article>
        <header id="articleHeader">
          <h1 id="titleHolder">
            <span lang="en">Title goes here and it could be kind of lengthy - Publisher name</span>
            <span lang="zh-tw">因為草的和暖的mixed顏色自然的喚起你童稚的words活潑 - 靜僻的道上</span>
            <span lang="th">คือ เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรือ</span>
          </h1>
        </header>
        <div id="content">
        <div id="leadImg">
          <img
          src="https://www.webkit.org/demos/srcset/image-1x.png"
          srcset="https://www.webkit.org/demos/srcset/image-1x.png 1x,
          https://www.webkit.org/demos/srcset/image-2x.png 2x,
          https://www.webkit.org/demos/srcset/image-3x.png 3x,
          https://www.webkit.org/demos/srcset/image-4x.png 4x">
          <div class="media_caption">
            <span lang="en">Head image with srcset attribute</span>
            <span lang="zh-tw">打攪你的清聽!小鵝,小琴</span>
            <span lang="th">งานเรียงพิมพ์</span>
          </div>
        </div>
        <h1 id="firstHeading">
          <span lang="en">The first heading might show up just below the header H1</span>
          <span lang="zh-tw">也不能給12我們利益,你才知道靈魂的English愉快是怎樣的</span>
          <span lang="th">วางจำหน่ายโดยมีข้อความบนนั้นเป็น Lorem Ipsum และล่าสุดกว่านั้น</span>
        </h1>
        <p>
        Lorem ipsum C<sub>sub</sub> 2<sup>sup</sup> sit amet, elit velit in vehicula et, blandit diam
        suscipit luctus in, <code>Code outside of PRE</code>. Aenean interdum nulla ridiculus nibh vitae.
        Placerat malesuada lorem, <a href="">visited link</a> sed cras enim in nibh nullam eros. Sed
        sapien etiam donec ipsum. Tristique tortor, <a href="link">link vestibulum eget
        amet</a>,
        sem vel. Leo euismod magna leo vestibulum, <cite>cite: massa sed amet pretium
        mattis quisque ipsum, ut iaculis consectetuer</cite>, semper facilisi et
        neque sit, in sit amet. Vel wisi viverra velit nullam velit vel,
        maecenas vestibulum ridiculus turpis, nec aliquam id, in dui.
        </p>
        <p>
        威武不能屈的好漢。您<sub>走了</sub>,我<sup>不知</sup>何時再能與他相見。<code>來聽他講學的人!</code>
        撥轉牛頭。<a href="">駝留峰!</a>傍午傍晚散了工。<a href="link">我才覺著骨肉的關連</a>,得用起重機,在空中發出幾點火花。
        臉上籠上了一層灰色。於是這位牛醫王大夫走近前。沒有出門,我將打開那扇門,溫兩碗酒,彼得,將死雞塞進網兜裡?
        不分。哈哈,女辛,我猜想。便又歎一口氣。<cite>我就整年地只給她吃烏鴉的炸醬麵,姚家,家中光景很是慘淡,也許是你自己種下的?</cite>
        愈久愈大。才回家吃早飯。使女們也一齊跟著他,待到講到,竟偷到丁舉人家裏去了,我去年就有四十五歲了。許是死了,我望著他走出去。
        </p>
        <p>
        ตรงกันข้ามกับความเชื่อที่นิยมกัน Lorem Ipsum ไม่ได้เป็นเพีย<sub>งแค่ชุด</sub>ตัวอักษร<sup>ที่สุ่มขึ้น</sup>
        มามั่วๆ <code>แต่หากมีที่มาจากวรรณกรรมละตินคลาสสิกชิ้นหนึ่งในยุค 45 ปีก่อนคริสตศักรา</code>
        ช <a href="">ทำให้มันมีอายุถึงกว่า</a> 2000
        <a href="link">ปีเลยทีเดียว</a>
        ริชาร์ด แมคคลินท็อค ศาสตราจารย์ชาวละติน จากวิทยาลัยแฮมพ์เด็น-ซิดนีย์ ในรัฐเวอร์จิเนียร์ นำคำภาษาละตินคำว่า
        consectetur <cite>ซึ่งหาคำแปลไม่ได้จาก Lorem Ipsum ตอนหนึ่งมาค้นเพิ่มเติม โดยตรวจเทียบกับแหล่งอ้างอิงต่างๆ ในวรรณกรรมคลาสสิก
        และค้นพบแหล่งข้อมูลที่ไร้ข้อกังขาว่า Lorem Ipsum นั้นมาจากตอนที่ 1.10.32 และ 1.10.33 ของเรื่อง "de Finibus Bonorum et Malorum"</cite>
        (The Extremes of Good and Evil) ของ ซิเซโร ที่แต่งไว้เมื่อ 45 ปีก่อนคริสตศักราช หนังสือเล่มนี้เป็นเรื่องราวที่ว่าด้วยทฤษฎีแห่งจริยศาสตร์ ซึ่งเป็นที่นิยมมากในยุคเรเนสซองส์ บรรทัดแรกของ
        Lorem Ipsum "Lorem ipsum dolor sit amet.." ก็มาจากบรรทัดหนึ่งในตอนที่ 1.10.32 นั่นเอง
        </p>
        <img
        src="https://www.webkit.org/demos/srcset/image-1x.png"
        srcset="https://www.webkit.org/demos/srcset/image-1x.png 1x,
        https://www.webkit.org/demos/srcset/image-2x.png 2x,
        https://www.webkit.org/demos/srcset/image-3x.png 3x,
        https://www.webkit.org/demos/srcset/image-4x.png 4x">
        <div class="media_caption">
          <span lang="en">Image with srcset attribute</span>
          <span lang="zh-tw">一包胡麻,她只對我一望</span>
          <span lang="th">ด้านล่างของหน้านี้คือท่อนมาตรฐานของ</span>
        </div>
        <pre>Pre: nulla libero elit sit, penatibus mi donec bibendum risus, aliquam elit orci, ducimus iaculis leo porta eget curabitur pede. <code>
Code inside PRE:

Justo dolor
  vehicula augue
  ante
    suspendisse
    mauris

eleifend sagittis tortor turpis.</code></pre>
        <pre>連母雞也不認識,書記先生竟打起磕睡來,他小時候,怎的。只要把話匣開上。不能怨,因此我想說的話或許還有人聽,殖民地。耳朵也不及分別那聲音,但聽的不很分明。<code>又是引經據典,
沈澱著彩虹似的夢,凡事總是先準備。

低聲說。
  交卸了的關官
  和還沒有做關官
    的隱士,到得關上。

農夫繼續種他的奇異果,正如我輕輕的來,才看見王升站在門外面!像你那謫期的簡淨?</code></pre>
        <pre>มีหลักฐานที่เป็นข้อเท็จจริงยืนยันมานานแล้ว ว่าเนื้อหาที่อ่านรู้เรื่องนั้นจะไปกวนสมาธิของคนอ่านให้เขวไปจากส่วนที้เป็น Layout เรานำ Lorem Ipsum มาใช้เพราะความที่มันมีการกระจายของตัวอักษรธรรมดาๆ <code>แบบพอประมาณ ซึ่งเอามาใช้แทนการเขียนว่า
‘ตรงนี้เป็นเนื้อหา, ตรงนี้เป็นเนื้อหา' ได้

เป็นแบบจำลองเนื้อหาที่เป็นค่าตั้งต้น
  คอลัมน์โทร
    และซอฟท์แวร์การสร้างเว็บเพจ
    หลายตัวที่ใช้

และยังทำให้มองดูเหมือนกับภาษาอังกฤษที่อ่านได้ปกติ</code></pre>
        <table>
          <thead>
            <tr>
              <th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th><th>Column 5</th>
            </tr>
          </thead>
          <tr>
            <td>12345678890</td>
            <td>12345678890</td>
            <td>12345678890</td>
            <td>12345678890</td>
            <td>Longer-than-expected-content</td>
          </tr>
        </table>
        <table>
          <thead>
            <tr>
              <th>Title 1</th><th>Title of column 2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Content of row one column 1 goes here</td>
              <td>Content of row one column 2 goes here</td>
            </tr>
            <tr>
              <td>row 2 column 1</td>
              <td>Content of row two column two goes here and it is much
              longer than the rest of the cells</td>
            </tr>
          </tbody>
        </table>
        <table>
          <thead>
            <tr>
              <th>對,手摩著</th><th>脫毛的舊豹皮</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>長劍!,我的箭法掌太巧妙了</td>
              <td>同八點三十二分開,哈哈哈,一過就是三個月,倒楣</td>
            </tr>
            <tr>
              <td>眼睛都望著碟子?</td>
              <td>老子就又靜下來。沉默了一會。留下紙條說?也不過五千個大字,自己是一動也不動。</td>
            </tr>
          </tbody>
        </table>
        <table>
          <thead>
            <tr>
              <th>มีท่อนต่างๆ</th><th>แต่ส่วนใหญ่</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>แล้วจะถูกนำไปปรับให้เป็นรูปแบบอื่นๆ</td>
              <td>ของ Lorem Ipsum ให้หยิบมาใช้งานได้มากมาย</td>
            </tr>
            <tr>
              <td>อาจจะด้วยการสอดแทรกมุกตลก </td>
              <td>หรือด้วยคำที่มั่วขึ้นมาซึ่งถึงอย่างไรก็ไม่มีทางเป็นเรื่องจริงได้เลยแม้แต่น้อย ถ้าคุณกำลังคิดจะใช้ Lorem Ipsum สักท่อนหนึ่ง คุณจำเป็นจะต้อง</td>
            </tr>
          </tbody>
        </table>
        <p>
        A ac, vitae tristique, aliquam vitae ut integer sed
        in pharetra, pharetra volutpat non porttitor nunc, massa curabitur
        officia. Q: <q>Sodales consectetuer pellentesque duis sed, at risus, risus
        enim lacus pede, morbi quis. Malesuada at, proin facilisis nec
        congue.</q> Dolor tincidunt eget massa eget neque ultrices, quis eu id
        semper, odio est elit in, dolor et, mauris suspendisse tellus
        dictum.
        </p>
        <p>拿我的射日弓來,老子到了函谷關!<q>本以為至少總可以有一兩匹狐兒兔兒的!話說的很少,
        蘿莉控們的成功!幸而。</q>不正是同道了嗎,哈哈哈。
        </p>
        <p>ตรวจให้แน่ใจว่าไม่มีอะไรน่าอับอายซ่อนอยู่ภายในท่อนนั้นๆ
          <q>
          ตัวสร้าง Lorem Ipsum บนอินเทอร์เน็ตทุกตัวมักจะเอาท่อนที่แน่ใจแล้วมาใช้ซ้ำๆ ทำให้กลายเป็นที่มาของตัวสร้างที่แท้จริงบนอินเทอร์เน็ต
          </q>
        ในการสร้าง Lorem Ipsum ที่ดูเข้าท่า ต้องใช้คำจากพจนานุกรมภาษาละตินถึงกว่า
        </p>
        <hr>
        <ol>
          <li>Justo convallis at porttitor
          <li>Sodales neque metus habitasse vel sem
          <li>Praesent ipsum nunc lorem dui pellentesque morbi
        </ol>
        <ul>
          <li>Mauris integer feugiat erat luctus
          <li>Orci netus pretium purus neque mauris arcu vel maecenas nec aliquam
          <li>Sed consequat
        </ul>
        <ol>
          <li>想像對方寫信時的心情!
          <li>一包胡麻,她只對我一望
          <li>當敵兵哀號著!
        </ol>
        <ul>
          <li>眼珠子動也不動,那裡那裡?
          <li>名為人生的冒險仍在進行
          <li>又回過頭去問道。庚桑楚出去了。
        </ul>
        <ol>
          <li>ผสมกับรูปแบบโครงสร้างประโยคอีกจำนวนหนึ่ง
          <li>เพราะฉะนั้น
          <li>Lorem Ipsum ที่ถูกสร้างขึ้นใหม่นี้ก็จะไม่ซ้ำไปซ้ำมา
        </ol>
        <ul>
          <li>ไม่มีมุกตลกซุกแฝงไว้ภายใน
          <li>หรือไม่มีคำใดๆ
          <li>ที่ไม่บ่งบอกความหมาย
        </ul>
        <h1>Fermentum ligula mauris cras h1</h1>
        <p>
        Blockquote:
        </p>
        <blockquote>
        Urna ad leo vel at,
        nibh purus arcu, penatibus maecenas tristique tristique proin,
        fermentum et feugiat. Netus in, sapien risus et in consectetuer,
        mauris egestas rhoncus dui duis malesuada. Laoreet eros eu posuere,
        neque arcu eget, sed nulla suspendisse, quis quibusdam sed tristique
        porta amet bibendum.
        </blockquote>
        <h2>Fermentum ligula mauris cras h2</h2>
        <p>
        Fermentum ligula mauris cras, elementum pede mi impedit mi nulla,
        tristique vitae nisl pede, blandit nec nullam semper cras a, sit
        iure eget hendrerit.
        </p>
        <p>
        Id elit nullam lorem mollit vitae, elementum
        at, pulvinar ipsum orci placerat vel velit nulla.
        </p>
        <p>
        Metus sagittis a
        lacus nec mattis vel, mauris malesuada et nisl, scelerisque risus,
        in pede morbi.
        </p>
        <h3>Fermentum ligula mauris cras h3</h3>
        <p>Laoreet urna dapibus at nulla ac, sed ornare
        lobortis, non id nascetur non. Placerat vitae at interdum duis hac,
        lacus luctus, amet dolore pharetra urna nulla vitae. Sed sit dui.
        <img
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Ara-Zoo-Muenster-2013-02.jpg/800px-Ara-Zoo-Muenster-2013-02.jpg">
        <img
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Ara-Zoo-Muenster-2013-02.jpg/800px-Ara-Zoo-Muenster-2013-02.jpg">
        <span>Span text between pics</span>
        <img
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Ara-Zoo-Muenster-2013-02.jpg/800px-Ara-Zoo-Muenster-2013-02.jpg">
        Ipsum aliquam placerat odio turpis, est lacinia, risus aenean
        adipiscing integer, semper wisi tortor.
        </p>
        <figure>
          <img
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Ara-Zoo-Muenster-2013-02.jpg/800px-Ara-Zoo-Muenster-2013-02.jpg">
          <figcaption>Figure with caption</figcaption>
        </figure>
        <h4>Fermentum ligula mauris cras h4</h4>
        <p>
        Quia in elementum senectus,
        sapien eu integer, id nibh, nec amet nibh suscipit. Hendrerit risus,
        est sit vestibulum erat eu rutrum, nulla natoque etiam vehicula eu
        pellentesque tincidunt, ligula neque praesent odio aliquam. Ultrices
        risus suscipit vel quam lacus, sed mauris elit suspendisse, enim
        risus convallis et, feugiat a integer ultrices, ut velit integer
        lectus velit volutpat et. Tellus suspendisse, aliquam nulla tempor
        praesent eget vestibulum.
        </p>

        <h1>看了片刻。荊棘刺入了行路人的脛踝</h1>
        <p>
        他們終於找到條正確的道路
        </p>
        <blockquote>
        姐已經不行了,被奇異果少女們圍毆,站住,我心頭便湧起了不少的感想?說。一溜煙跑下去了。
        你不能走得更遠一點的麼,做哥哥的就哭,兩腳再向上縮,三十年改革,諸君。而改當人口販子?
        我才覺著骨肉的關連,農夫把奇異果搬回家以後,並且在他活潑的神情裏我想見了你,那裡那裡。
        不是差不多嗎。
        </blockquote>
        <h2>天橋上積了水!得向腳夫行些小費。</h2>
        <p>
        他的眼色,總不許我哭出聲音來,天與地之間。又不會營生。幫助他們睜開眼睛,
        即使在email如此方便的今天?
        </p>
        <p>
        叫旅館裡一個熟識的茶房陪我同去?叫我披衣坐起。
        </p>
        <p>
        我趕緊拭乾了淚,也說明了當時蘿莉控的興起符合世界人民的利益和希望,王升呢,
        那知環境卻如此頹唐,我手捧著那收存你遺灰的錫瓶?
        </p>
        <h3>中央是一大碗烏鴉肉做的炸醬</h3>
        <p>
        同時她們講你生前的故事,不上一點鐘,諸君,盧矢?羿在垃圾堆邊懶懶地下了馬,葛德說的?
        只好明天再走了。中秋過後,而是那飄盪的不確定撞擊著想要安定的情緒,
        無奈這時魯般和墨翟還都沒有出世。
        </p>
        <h4>颼的一聲,許是死了</h4>
        <p>
        每每花四文銅錢,便替人家鈔鈔書。但現在卻還在睡大覺的敵人吧,弩機,在門口玩。彼得,
        是早就廢止了朝食的,同來的八人之外,孔乙己等了許久,詩意,涼?大約孔乙己的確死了。團結一致。
        弄到將要討飯了,討厭。是不完全變態真是太好了!自此以後,城市中唯一處有50度以上的溫度?
        陸海空軍都對付不了他們,在下更是嚐得比一般人更多,支支梧梧地說。有幾個還帶著筆,
        這回可是全是之乎者也之類。太太。是勉強爬得上的?回頭問著女辛道,我的你,
        掌燈時候就不看見了,他便很詫異。
        </p>

        <h1>เมเปิลทรู ชาร์ปโอเลี้ยง ทาวน์เฮาส์คอมเมนท์</h1>
        <p>
        เคสไฮบริด แล็บซันตาคลอสโปสเตอร์
        </p>
        <blockquote>
        แผดเผาแพนงเชิญพฤหัสสเตเดียม ทัวริสต์ดอกเตอร์ อุปัทวเหตุคลิปฮัลโลวีนโปร ฟาสต์ฟู้ดพูล เอ๋วอร์รูมมอลล์อิสรชน เซนเซอร์ สติ๊กเกอร์แกสโซฮอล์ฮอตดอกอึมครึม อาร์พีจีออร์แกนชัตเตอร์ วาไรตี้ โบรชัวร์ปักขคณนาเจล ศิรินทร์เสกสรรค์
        </blockquote>
        <h2>ฮาโลวีน เรซินอมาตยาธิปไตย</h2>
        <p>
        ราเมนมยุราภิรมย์สงบสุข หยวนเซฟตี้ แหววโอเคบ๋อยซาร์ดีนเชอร์รี่ เทรลเลอร์ว้อยซัพพลายเช็งเม้งบิล เคอร์ฟิว พอเพียงคอนเซ็ปต์ยนตรกรรมไนน์ มาเฟียสปอร์ตไกด์ เฟิร์มสแตนเลส สตูดิโอเมเปิล เบิร์น เอาต์ต่อยอดคอนโดซิ้ม เรซิ่น
        </p>
        <p>
        พรานแอดมิชชั่นคอรัปชันวิวเวิลด์ อพาร์ตเมนต์สติ๊กเกอร์คอรัปชันเรซิน
        </p>
        <p>
        ก๋ากั่นนอมินีเบลอไอซียู แกรนด์ โปรเจ็กต์สะบึมรีสอร์ต พาสปอร์ตฉลุย ล็อบบี้ ยะเยือกเตี๊ยมแชมเปี้ยนรองรับ เทเลกราฟแบล็ค ซิมฮาร์ด ลีกมวลชนดาวน์ไลฟ์ไทม์
        </p>
        <h3>แฟนตาซี ไฮเทค</h3>
        <p>
        โรลออนมัฟฟินมะกันวาไรตี้ จิตพิสัยบาร์บี้สตรอเบอรีเลคเชอร์เพาเวอร์ โต๊ะจีนก่อนหน้ารีสอร์ทแฮมเบอร์เกอร์ซาฟารี รวมมิตรว้อย รามเทพซันตาคลอสแซ็ก แกรนด์ว่ะรีสอร์ตเยลลี่ลาเต้ ซีนสหัสวรรษฮัมฮิปโป เซรามิก แซนด์วิชรอยัลตี้ ดาวน์อีโรติก เหี่ยวย่นบอยคอตต์วอล์คเพาเวอร์ สเตย์โฟน เอ็นทรานซ์กษัตริยาธิราชเอ็กซ์โปแจม คาปูชิโนแอคทีฟเกสต์เฮาส์ลาตินลิมูซีน
        </p>
        <h4>ไอติมตอกย้ำ โคโยตี้อึมครึมกรอบรูปฮ็อตด็อก บอมบ์เอ๋</h4>
        <p>
        โอเลี้ยงซิม อาข่าวัจนะไลน์ โอ้ย วาริชศาสตร์สี่แยกป่าไม้ แจ๊สลิมูซีนกัมมันตะ เบนโตะไฟลท์ โพลารอยด์ เครปจูเนียร์คำตอบ โฟมเฟรมโฮปภารตะซูชิ โง่เขลาธรรมาภิบาลดอกเตอร์คูลเลอร์เกย์ ตัวตน ไวอะกร้าจ๊าบ โมเต็ลติ่มซำ
        อพาร์ทเมนต์ช็อปปิ้งตู้เซฟ ตรวจทานแซ็กเกย์ รูบิกปิยมิตรโดมิโน แจ็กพอตมอนสเตอร์มอยส์เจอไรเซอร์จึ๊ก เกมส์เปราะบาง รีวิวเสกสรรค์อึ๋มเบบี้ราสเบอร์รี ก๋ากั่นแจ็กพ็อตซีนีเพล็กซ์ ผลไม้ ม็อบอิออน เวเฟอร์พฤหัส เฟอร์รี่ โฟนโคโยตีรีสอร์ทโปรเจ็คท์ลีเมอร์ ไฮเปอร์ สเตย์โยโย่ เฟรมสเตเดียมซิมติวตนเอง เดบิตโบว์ลิ่งม้าหินอ่อนมายองเนส
        </p>
        </div>
      </article>
    </div>
    <a href="" id="closeReaderView">Close Reader View</a>
  </div>
  <div id="feedbackContainer" class="footerFeedback hidden">
    <div class="feedbackContent">
      <div id="feedbackQuestion"></div>
      <div class="feedbackButtonWrap">
        <a class="feedbackButton" id="feedbackNo"></a>
        <a class="feedbackButton" id="feedbackYes"></a>
      </div>
    </div>
    <div class="clear"></div>
  </div>
</body>
<script src="../javascript/dom_distiller_viewer.js">
</script>
<script>
  showFeedbackForm('Was the text extracted correctly?', 'Yes', 'No');
</script>
</html>