Webページに縱ラテンを使ふ

How to use in your Web site How to use in your Web site

Webページ中に縱ラテンを使ふ方法を紹介します。CSSを設定できるWebページには簡単に導入出來ます。

Web Fontとして設定する

Web Font Web Font

Web Fontを使用すれば縱ラテンを簡単にWebページで使へます。CSSでは font-family 属性に依り文字に字體を指定できます。Web Fontに依れば、自前の font-family を指定したり、閲覧者がOSに install しなくても表示する字體をWebページ作成者が用意し指定出來ます。@font-face directive で自前の font-family を定義できます。

@font-face {
  font-family: vertical_latin;
  src        : url("/public/Vertical_Latin_Calligraphic.otf");
}

.verticalLatin {
  letter-spacing: 0;
  font-family   : vertical_latin;
}

此れに依り verticalLatin と云ふ class 属性を附けたHTML (XML) 要素に縱ラテンの字體が使はれます。@font-face directive の src 属性には、縱ラテンの字體文件のURLを記述してください。字體には縱ラテンの字體を下載して御使ひください。

字體文件をWeb serverに設置出來ない場合は、CSS中に data URLとして埋め込む事も出來ます。HTTP request 囘數を減らす方法としても此の方法は有益です。当siteでは gulp の gulp-css-base64 package を使ってゐます。

var gulp      = require('gulp');
var cssBase64 = require('gulp-css-base64');
gulp.task('build:css', () => {
  return gulp.src('src/stylesheets/**/*.css').
    pipe(cssBase64({
      baseDir          : '.',
      maxWeightResource: 32768 * 5,
    })).
    pipe(gulp.dest('assets'));
});

以上を gulpfile.babel.js に書き、gulp build:css command に依り字體文件をCSS文件に data URLとして埋め込めます。左記の如く成るでせう。


@font-face{
  font-family:UniSeiJi;
  src:url("data:application/x-font-ttf;base64,AAEAAAASAQAABAAgQkFTRfp8F6gAAcJAAAACaEZGVE1yCU9rAAHEqAAAABxHREVGANgABgABOhQ…(略)");
}

ページを橫書きの儘使ふ

Use in horizontal Web page Use in horizontal Web page

右記Web Fontの設定をしただけで其の儘使へます。先程の例では verticalLatin と云ふ class 属性値を持つ要素に縱ラテン字體が設定される樣記載しましたから、

<p>Vertical Latin. <span class="verticalLatin">Vertical Latin</span></p>

とすると、

と横書きで反時計囘りに直角に倒した縱ラテンを記載できます。

ページを縱書きにして使ふ

Use in vertical Web page Use in vertical Web page

Webページを縦書きにする前に、縦書きの Web design をする必要が有ります。縦書きの design 技法は、今迄主に印刷物の業界に在ったのでせう。

一般書籍。縦書きを基本とした design です。洋本以前からの手書きする縦書き design を其の儘発展させ、活字に親和する様にされたものです。ほぼ文章で構成され、本文のほぼ全てを縱書きします。右から左へ横 scroll し、縱には scroll しません。図の挿入には段を下げて空白を作り挿入します。大きな図は、ページの概念が在る場合はページまるごと使ひ、さうでない場合は行を空けて空白を作り挿入します。
雑誌。横書きに親和する design です。短い段に區切り、所謂段組みをします。上から下へ縱 scroll し、第一義としては横には scroll しません。ページの概念が在る場合は右から左にページを送ります。図は行を空けて挿入します。大きな図は數段分の右か左を切り取り、空白を作って挿入します。
ポスター。基本的には巨大な画像です。文章は自由な位置に自由な方向で配置されます。scroll する事は基本的には考へられません。scroll を時間軸と見做し、animation 効果を伴ひ scroll させる事も有ります。雑誌の design を併用する事も多く有ります。
漫画。画像を時間と空間に配置する技法です。文章はコマの中に空白を作って配置されます。セリフと云ふ特別な文は特別な空白を割り振られ載せられる事が殆どです。但し洋本漫画は異なった伝統を持ちます。scroll する事は考へられてゐず、ページ送りが基本です。

先ずは洞の種の縦書き design を手本とするか、Webページの内容を鑑みつつ決めるのが簡便でせう。scroll の方針は特に注意してください。又、画面の広いPC、tablet の縦置きと横置き、画面の小さい携帯端末の縦置きと横置きの最低五種の表示形式に対応する事を考慮してください。縦置きと横置きはページ表示中にも切り替はります。操作体系も考慮してください。PCはマウスとキーボード、tablet と小型携帯端末は指に依るフリックと假想キーボードにより操作されます。

CSSで縦書きを設定する

CSS writing-mode CSS writing-mode

IEは古くから縦書きやルビに対応してゐました。WebKit系のブラウザは、携帯端末で電子書籍を表示する必要から其れ爲りに高度に縦書きに対応してゐます。現在ではEdgeやGeckoやBlinkも程々に縦書きに対応してゐますから、殆どの閲覧者のWebブラウザにてCSSで縦書き表示を行へます。然し其れ等全てのWebブラウザで、全ての画面 size で、大量の文章を正しく縦書きに配置するのは長大な根氣が必要でせう。IE (Tridentを言ふ。Tasmanは含まない) は兎も角、Blink (Google Chrome、Opera、Vivaldi等) と Gecko (Firefox等) と WebKit (Safari等) と Edge には対応する必要が有るでせう。携帯端末の遅れた version や独自改造されたWebブラウザも考慮する必要が有ります。またGoogleやBing等 (Askとかも在ります。TwitterやFacebook等も一應は取得しに来ます) のbotを邪魔しない樣にもしなければなりません。コツは実際に test し続ける事だけでせう。

CSSでは writing-mode 属性で字竝びの方向を變へられます。加えて text-orientation 属性で字の回転方向を設定出來ます。

.vertical {
  text-orientation: sideways;
  writing-mode    : tb-rl;
  writing-mode    : vertical-rl;
}

此れが縦書きの基本 style です。行長等は別途適切に設定しなければなりません。

縱ラテンは右記のWeb Fontを使用すれば表示できます。

竹取JSに頼る

TAKETORI-JS TAKETORI-JS

ページの大部分を縦書きにする場合は、竹取JSを使ふのが簡便です。右記CSSで作成する場合の設定の大半を行ってくれます。non-designerとしては充分な品質のページを作製できるでせう。縦書きCSSに対応したWebブラウザでは出來る丈CSSにて縦書きにしてくれます。此の點が他の縦書きJavaScript library とは違ふ利点です。大変簡便なので、READMEを御読みください。