HTMLは、Illustratorの夢をみるか？

HTMLは、版下屋さんの夢をみるか？

まあ、昔の思い出話みたいなものです。

つい30年前は、コツコツ手作業でやってたなんて、ちょっと考えられないですね。

回転

文字を回転させるのは、デザイナーがよく指示してきたので、しょっちゅうやってました。

印画紙を一文字ずつ切り離して、アールに合わせて貼るのですが、たまに製版（隣の部署）に行くまでに一文字剥がれて、ちょっとした騒ぎになりました(^_^;

流石にこれは、CSSでもめんどくさいです。一文字一文字div要素でばらして、それぞれに下記のような設定が必要となります。 

transform-origin: 50% 400%;
transform: translate(0, 0.5em) rotate(-30deg);

transformは、ブロック要素にのみ有効なので、divが最適でしょう（もちろん、他の要素でも問題ないでしょうが）。

ただ、角度など全てを数値で指定するので、アナログな版下よりよっぽど正確です（まあ、それが見栄えの良さに直結するわけではありませんが）。

ピ
ョ
〜
ン
ピ
ョ
〜
ン
ピ
ョ
〜
〜
〜
ン
蚤

一文字ずつ回転（回転以外のtransformでも多分同様）させるような場合は、それぞれの文字を囲ったブロック要素に下記設定を行わないと、思ったとおりには回転されません。 

width: 1em;
height: 1em;
line-height: 1em;

特に、line-height: 1em;は忘れがちなので（僕だけかな）注意しましょう。

こんなこともできます。流石にこれは、アナログな版下ではできません。技術の進歩です。

く
る
く
る
く
る
く
る
回
転
回
転
く
る
く
る
く
る
く
る
回
転
回
転
く
る
く
る
く
る
く
る
回
転
回
転
く
る
く
る
く
る
く
る
回
転
回
転
く
る
く
る
く
る
く
る
回
転
回
転
く
る
く
る
く
る
く
る
回
転
回
転

図形（切り抜き）

版下には、ありとあらゆる図形が登場します。ロットリング（個人的にはステッドラー）の製図ペンでコツコツ描いてました。

HTML5には、SVGやcanvasといったベクターデータを扱う機能が追加された関係で、HTML+CSSだけで図形の描画ができるようになりました。

かなり応用も聞くので、いろいろなことができそうです。

しかし残念ながら、2019/3現在、多分Firefox（Geckoをレンダリングエンジンとして使用している）とChromium（Blinkをレンダリングエンジンとして使用するWebブラウザ）以外は未サポートです。

背景が透過されることが分かるように、バックに色を付けています。

最初の丸は、下記のような設定となります。 

width: 10em;
height: 10em;
clip-path: circle(40%);
background-color: #00afaf;

星は、3行目のclip-pathの指定が、下記のようになります。 

clip-path: polygon(
   50% 0, 35.5% 29.7%, 2.2% 34.3%, 26% 57.5%,
   20.5% 90.5%, 50% 75%, 79.5% 90.5%, 74% 57.5%,
   97.8% 34.3%, 64.5% 29.7%, 50% 0);

写真も切り抜ける

もちろん、こんなこともできます。

ちゃんとしたフロート（厳密な位置合わせ）

チラシやパンフレットを見ていると、たまに、いい加減な組版がしてあったりして、ちょっとイラッとするので、HTML+CSSでどこまでできるかやってみます。

もっとも、フォントサイズをピクセル単位で指定する必要が有るので、一般的なWebコンテンツでは使い難いかもしれませんが。

■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■

ここは、少し長いキャプションですよ。

■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■

ここも、キャプション

■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■

■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■​■

こういうレイアウトの場合は、写真（上記では単なる四角ですが）と文字の面が合っていないとおかしいですね。あと、写真毎に写真と文字の間隔（マージン）が違っているというのも最悪です。

縦の面はWebブラウザが勝手に合わせてくれますが、横の面は設定で合わせる必要があります。

上記の例では、文字サイズが16ピクセルで行間が16ピクセル（line-heightが2em）なので、写真の上マージンを0.5emとして面を合わせています。

写真のサイズも16の倍数として、キャプションのサイズも、12ピクセル+上マージン4ピクセルとしています。

長いキャプションは、1行で入るように長体をかけています。

これで、キャプションの下面と、横の文字の下面もだいたい合っているし、キャプションの下面と下の文字の上面の間が通常の行間と合うので、気持ちよく見えると思うんですけど。まあ、細かいところにこだわっても、だれも気が付かないんですけどね(;o;)

最近のちょっとしたフロート

切り抜きの回り込み

切り抜きの写真を文字が避けるレイアウトの場合、それなりに写植を打ってくれるんだけど、大抵はそのまま使えないので、写真のポジから紙焼きなりトレペにトレースするなりして台紙に貼って、それを避けるように1行1行写植を貼っていきます。

当然、お尻は合ってないといけないので（左側に写真が有るような場合）、点丸や細いカナの前後で字間を詰めたり広げたりして調整して。

今のオーサリングツールを使ってると考えられないかもしれないけど、まあ、楽しい作業でした(^-^)

なんと、最近（2019/3現在）のHTMLでは、そんな楽しい作業はさせてもらえません。

この例は、単純な丸い図形ですが、結構綺麗に避けてくれているのではないでしょうか。そして、なんと言っても、ほぼ問題ないくらいにお尻も揃ってます。

text-alignにjustifyを指定した場合、英単語が交じると、たまにとんでもないことをしてくれるのですが、そのあたりを注意すれば、これくらいはやってくれます。

丸い図形には、下記設定がされています。shape-outsideが、文字の回り込みの指定になります。ここでは、図形の切り抜き（clip-path）と同じ指定です。マージンが1em指定されているので、これが回り込みにも適用されています。 

margin: 1em;
width: 8em;
height: 8em;
clip-path: circle(50%);
shape-outside: circle(50%);
background-color: #af00af;
float: left;

文字側の指定は以下の通り。 

text-align: justify;

閑話休題

せっかく回り込むように写植を貼った台紙が、製版から戻ってくることがあります。

「これ、ポジに合っとらんが。」

で、ポジを見せてもらうと、「最初にもらったポジと違うやん。」

ひどい話です。