💈

CSSで縦書きですぞ

2021/03/24に公開

Web書道とやらが終了していてかなしかったのでそれに着想を得、
http://web-shodo.com/

遊んだ
https://e99h2121.github.io/playground/shodo.html

縦書きという知識
https://qiita.com/moonglows76/items/a993aebd069142779ef1

https://qiita.com/skmtko/items/7e1eaa5723ef2c0926d1

Google Fontを有り難く使用
https://googlefonts.github.io/japanese/

ソース抜粋

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>CSS フォント</title>
    <!-- https://googlefonts.github.io/japanese/ -->
    <link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/earlyaccess/nikukyu.css" rel="stylesheet">
    <style>
      body {
        color:#630;
        font-size:5em;
      }
      p.font1{
        font-family: cursive;
      }
      p.font2{
        font-family: serif;
      }
      p.font3{
        font-family: "Nikukyu";
      }
      p.font4{
        font-family: "Hannari";
      }

      /* 縦書き */
      .v-writing {
        writing-mode: vertical-rl;
        display: inline-block;
        text-align: left;
      }
    </style>
  </head>
  <body>
    <div class="v-writing">
    <p class="font1" id="output_message1">fantasy</p>
    <p class="font2" id="output_message2">serif</p>
    <p class="font3" id="output_message3">fantasy</p>
    <input type="text" id="input_message"  size="20" maxlength="100" value="おこさまランチ">
    <p class="font4" id="output_message4">fantasy</p>
    <div id="output_message"></div>
    </div>


    <script language="javascript" type="text/javascript">
     function main() {
        var input_message = document.getElementById("input_message").value;
        document.getElementById("output_message").innerHTML = input_message;
        document.getElementById("output_message1").innerHTML = input_message;
        document.getElementById("output_message2").innerHTML = input_message;
        document.getElementById("output_message3").innerHTML = input_message;
        document.getElementById("output_message4").innerHTML = input_message;
      }
      document.getElementById("input_message").onchange = main;
      window.onload = main;
    </script>
  </body>
</html>

全体
https://github.com/e99h2121/playground/blob/main/shodo.html

その後こんなのを発見したので引き続き探求する
https://font.onl.jp/

自分でフォントファイルを置くには以下。
https://b-risk.jp/blog/2020/06/webfont/

複数ならこう

      @font-face {
        font-family: 'MyFontreisyo';
        src: url('./fonts/aoyagireisyosimo_otf_2_01.otf') format("opentype");
      }
      @font-face {
        font-family: 'MyFontsoseki';
        src: url('./fonts/AoyagiSosekiFont2.otf') format("opentype");
      }

Discussion