css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
                <!-- <div class="c-switcher"> -->
    <input type="checkbox" name="mode" id="switcher" class="c-switcher__checkbox" checked>
    <label for="switcher" class="c-switcher__label">竪排</label>
  <!-- </div> -->

  <main>
    <h1>文字的故事</h1>
    <p>記錄:演變 05/20/2014</p>
    <p>人類和其他生物物種總是在以自己獨特的方式和語言給大自然和自己的生命歷程留下一些印跡。當遠古時期的獵人根據熊掌印開始追踪的時候,那便是最早的「視覺交流與傳播」(Visual Communication)的開始。</p>
    <figure>
      <figcaption>最早的視覺傳達方式基本都是利用圖形進行的。這是北美印地安在史前的岩洞壁畫</figcaption>
      <div class="img-wrapper img-double">
        <img src="https://www.chenhuijing.com/zh-type/assets/img/pictograms-1.jpg">
        <img src="https://www.chenhuijing.com/zh-type/assets/img/pictograms-2.jpg">
      </div>
    </figure>
    <figure>
      <figcaption>法國發現的拉斯考克岩洞中,古代人類的原始繪畫,大約西元前一萬——萬五千年</figcaption>
      <div class="img-wrapper img-single">
        <img src="https://www.chenhuijing.com/zh-type/assets/img/wall-painting.jpg">
      </div>
    </figure>
    <figure>
      <figcaption>古代中亞文明的黑石鴨形,是由烏爾王奉獻給南那神的供品,公元前3000年左右</figcaption>
      <div class="img-wrapper img-single">
        <img class="img-rotate" src="https://www.chenhuijing.com/zh-type/assets/img/obsidian-duck.jpg">
      </div>
    </figure>
    <p>一本完整的平面設計史,是應該從人類開始記錄或傳播自己的思想開始的。人類為了記錄自己的思想、活動、成就,開始是利用圖畫作手段,但是圖畫對於思想的表達能力非常有限,特別是對於比較抽象的思想的記錄,幾乎無能為力。後來,人類創造了文字,進而發展為不同的文字系統和傳播手段;現在,文字成為了視覺傳播體系中一個最基本的元素。文字發展的歷史幾乎也就是整個平面設計發展的全過程。在歐美傳統」學院派」的設計教育課程體系中,字體設計(Typography)始終是最基礎而不可缺少的訓練內容。 </p>
    <p>世界上最古老的文字符號主要有五種:蘇美爾人的「楔形文字」、古埃及人的「聖書字」、中國的「象形文字」、印度的「印章文字」以及「瑪雅文字」,公元前3500年以前,西亞兩河流域的蘇美爾(Sumer)人創造了最早的文字。它起初主要是像形符號,後來以軟泥板為紙、小支乾為筆,壓刻成「楔形文字」,這種文字曾經在西亞通用了近4000年。</p>
    <figure>
      <figcaption>波斯國王大流士一世(公元前552年~公元前486年)時期的銀板,晚期楔形文字的典型代表</figcaption>
      <div class="img-wrapper img-single">
        <img src="https://www.chenhuijing.com/zh-type/assets/img/cuneiform.jpg">
      </div>
    </figure>
    <figure>
      <figcaption>古埃及圖特摩斯一世統治時期(約公元前1450年)的一部史書(聖書字的典範)</figcaption>
      <div class="img-wrapper img-single">
        <img src="https://www.chenhuijing.com/zh-type/assets/img/hieroglyphs.jpg">
      </div>
    </figure>
    <figure>
      <figcaption>江西清江吳城文字中的單字</figcaption>
      <div class="img-wrapper img-double">
        <img src="https://www.chenhuijing.com/zh-type/assets/img/neolithic-china-1.jpg">
        <img src="https://www.chenhuijing.com/zh-type/assets/img/neolithic-china-2.jpg">
      </div>
    </figure>
    <p>北非尼羅河流域的古代埃及人創造的「聖書字」(Hieroglyphics),孕育於公元前4500年~公元前3100年,在公元前3100年~公元前343年的法老王時代的前期發展成熟並定型。但一般學者都認為,「聖書字」的產生要略晚於蘇美爾文字,起初也是像形符號,後來由於書寫工具的演變發展成「僧侶體」,及至公元前7世紀左右的草書體文字——「世俗體」。聖書字及聖書字變體也使用了3000多年,經歷了希臘、羅馬統治埃及的時期,它所包含的標聲符號成為後來創造字母的主要源泉。</p>
    <p>這兩種代表人類早期文化的重要文字,在公元初期先後消亡,變成了歷史陳跡。兩河流域和埃及的現代主人-阿拉伯人,跟古代原居民的宗教文化已經截然不同,古代的燦爛文化,沉睡在漫長的歷史長河中。 </p>
    <p>而中國的象形文字,卻巋然獨存,經五千年的世事滄桑,仍然沒有磨滅它智慧的光焰,漢字的生命力還在繁榮的漢字文化圈中延續、生長……無論是從使用的人口數目還是傳播的地域面積比較,漢字在世界的文字分佈中都顯示出她輝煌的文化魅力和獨特的藝術氣質。</p>
    <p>其實,這幾種不同文字的發展的命運給我們的啟示應該不僅僅是作為一個中華民族的自豪,在英語全球化的普及和信息數字化趨勢的影響下,我們也應該看到,文字的發展並不總是一帆風順的,即便是漢字近代發展史上,就有好幾次危機:「五.四」時期的白話文運動和拼音化大辯論、建國初期的異體字整肅和簡體字推廣、當代書法的衰微與漢字的信息化解決方案等,都對漢字的發展有重要的影響。因此,不同的社會發展階段,文字所代表的文化形式和應用方法都應該有不同的特點和要求。</p>
    <figure>
      <figcaption>從文字應用的角度來看,在古文字階段時期,不同文字的形態和運用方法都比較接近,如圖所示</figcaption>
      <div class="img-wrapper img-double">
        <img src="https://www.chenhuijing.com/zh-type/assets/img/evolution-1.jpg">
        <img src="https://www.chenhuijing.com/zh-type/assets/img/evolution-2.jpg">
      </div>
    </figure>
    <p>文字基本上是對自然和社會現象的樸素的描繪,中西文中的某些字甚至用驚人的想像力表達了同樣的意義。如圖中所示的古埃及象形字與中文的「昔」字幾乎一樣,表達的意義也非常接近:大水過後,人們逃到山頭上,夕陽西下,遙望村莊不再,追撫今昔,感慨萬千!整個場景簡直就是一個完美而有詩意的畫面!之後,儘管中國率人先發明了活版印刷術,但是東西方對於文字的運用方法是沿著完全不同的軌跡,總體上西方的文字走向更抽象的符號系統和後來的工業化、現代主義的道路,而漢字的主要藝術形式表現為個性化的書法和篆刻等形式,在「書寫文化」的時期,技術發展相對比較緩慢,書法逐漸成熟為一種有獨立性格的、最能體現中華民族審美意識的藝術形式。在書法批評中,「功力、人格、修養、淵源、個性」等要素一直是書法評論的主要內容,因而,書法活動及表現形式一直局限於「文人活動圈」,屬於一種純化的藝術活動。而在工業化和後工業化時期,可以預見漢字的傳統藝術形式、生態環境和物理生存的活動空間已經發生根本性的變化。漢字設計面臨的是當今日新月異的媒體和傳播科技的變化、多元化的商業文化信息需求、現代化的建築與視覺生存環境,形體的表達不再局限於真實和審美的範疇,漢字既要是具有審美情趣,又要表達更多的認知內容或商品信息。我們可以從很多方面發現漢字的適應力並沒有在現代社會中得到充足的表現和發展,中國的漢字藝術似乎在遠離悠遠豐厚的文化積累的同時,並沒有找到使它融入現代社會的合理軌道。</p>
    <p><small>原文:<a href="http://www.comdesignlab.com/typochina/chinese/archives/393">Typochina</a> (圖案有所更改)</small></p>
  </main>
            
          
!
            
              html {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  writing-mode: vertical-rl;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  font-family: "Microsoft JhengHei", "微軟正黑體", "Heiti TC", "黑體-繁", sans-serif;
  text-align: justify;
  margin: 0;
  padding: 0;
}

main {
  margin-top: 2.5em;
}

img {
  max-height: 100%;
  max-width: 100%;
}

p {
  line-height: 2;
}

figure {
  margin: 0;
}

figcaption {
  font-family: "MingLiU", "微軟新細明體", "Apple LiSung", serif;
  line-height: 1.5;
}

.img-single {
  margin: auto;
}

// Old-school with JS toggle
// .c-switcher {
//   writing-mode: horizontal-tb;
//   position: fixed;
//   top: 0;
//   left: 0;
//   padding: 0.25em;
//   background-color: #fff;
// }

// figure {
//   text-align: center;
// }

// figcaption {
//   text-align: justify;
//   display: inline-block;
// }

// .vertical {
//   writing-mode: vertical-rl;

//   main {
//     max-height: 35em;
//     margin-top: auto;
//     margin-bottom: auto;
//   }

//   figure {
//     margin-left: 1em;
//   }

//   figcaption {
//     max-height: 30em;
//     margin: auto 0.5em;
//   }

//   .img-single {
//     max-height: 20em;
//   }
// }

// .horizontal {
//   writing-mode: horizontal-tb;

//   main {
//     max-width: 40em;
//     margin-left: auto;
//     margin-right: auto;
//   }

//   figure {
//     margin-bottom: 1em;
//   }

//   figcaption {
//     max-width: 30em;
//     margin: 0 auto;
//   }

//   .img-single {
//     max-width: 20em;
//   }

//   .img-rotate {
//     transform: rotate(-90deg);
//   }
// }

// Old school with checkbox hack
.c-switcher__checkbox,
.c-switcher__label {
  position: fixed;
}

.c-switcher__checkbox {
  top: 0.5em;
  left: 0.5em;
}

.c-switcher__label {
  top: 0.25em;
  left: 2em;
  writing-mode: horizontal-tb;
}

figure {
  text-align: center;
}

figcaption {
  text-align: justify;
  display: inline-block;
}

.c-switcher__checkbox:checked ~ main {
  max-height: 35em;
  margin-top: auto;
  margin-bottom: auto;

  figure {
    margin-left: 1em;
  }

  figcaption {
    max-height: 30em;
    margin: auto 0.5em;
  }

  .img-single {
    max-height: 20em;
  }
}

.c-switcher__checkbox:not(:checked) ~ main {
  writing-mode: horizontal-tb;

  figure {
    margin-bottom: 1em;
  }

  figcaption {
    max-width: 30em;
    margin: 0 auto;
  }

  .img-single {
    max-width: 20em;
  }

  .img-rotate {
    transform: rotate(-90deg);
  }
}

@media screen and (min-width: 40em) {
  .c-switcher__checkbox:not(:checked) ~ main {
    max-width: 40em;
    position: absolute;
    top: 0;
    right: 50%;
    transform: translateX(50%);
  }
}

// Flexbox with JS toggle
// .c-switcher {
//   writing-mode: horizontal-tb;
//   position: fixed;
//   top: 0;
//   left: 0;
//   padding: 0.25em;
//   background-color: #fff;
// }

// figure {
//   display: flex;
// }

// .img-wrapper {
//   text-align: center;
// }

// .vertical {
//   writing-mode: vertical-rl;

//   main {
//     max-height: 35em;
//     margin-top: auto;
//     margin-bottom: auto;
//   }

//   figure {
//     flex-direction: column;
//     align-items: center;
//     margin-left: 1em;
//   }

//   figcaption {
//     max-height: 30em;
//     margin-left: 0.5em;
//   }

//   .img-single {
//     max-height: 20em;
//   }
// }

// .horizontal {
//   writing-mode: horizontal-tb;

//   main {
//     max-width: 40em;
//     margin-left: auto;
//     margin-right: auto;
//   }

//   figure {
//     flex-wrap: wrap;
//     justify-content: center;
//     margin-bottom: 1em;
//   }

//   figcaption {
//     max-width: 30em;
//     margin-bottom: 0.5em;
//   }

//   .img-wrapper img {
//     vertical-align: middle;
//   }

//   .img-single {
//     max-width: 20em;
//   }

//   .img-rotate {
//     transform: rotate(-90deg);
//   }
// }

// Flexbox with checkbox hack
// .c-switcher__checkbox,
// .c-switcher__label {
//   position: fixed;
// }

// .c-switcher__checkbox {
//   top: 0.5em;
//   left: 0.5em;
// }

// .c-switcher__label {
//   top: 0.25em;
//   left: 2em;
//   writing-mode: horizontal-tb;
// }

// figure {
//   display: flex;
// }

// .img-wrapper {
//   text-align: center;
// }

// .c-switcher__checkbox:checked ~ main {
//   max-height: 35em;
//   margin-top: auto;
//   margin-bottom: auto;

//   figure {
//     flex-direction: column;
//     align-items: center;
//     margin-left: 1em;
//   }

//   figcaption {
//     max-height: 30em;
//     margin-left: 0.5em;
//   }

//   .img-single {
//     max-height: 20em;
//   }
// }

// .c-switcher__checkbox:not(:checked) ~ main {
//   writing-mode: horizontal-tb;

//   figure {
//     flex-wrap: wrap;
//     justify-content: center;
//     margin-bottom: 1em;
//   }

//   figcaption {
//     max-width: 30em;
//     margin-bottom: 0.5em;
//   }

//   .img-wrapper img {
//     vertical-align: middle;
//   }

//   .img-single {
//     max-width: 20em;
//   }

//   .img-rotate {
//     transform: rotate(-90deg);
//   }
// }

// @media screen and (min-width: 40em) {
//   .c-switcher__checkbox:not(:checked) ~ main {
//     max-width: 40em;
//     position: absolute;
//     top: 0;
//     right: 50%;
//     transform: translateX(50%);
//   }
// }

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console