HTMLは、Illustratorの夢をみるか？

HTMLは、写植屋さんの夢をみるか？

アドビのソフトはなんと言っても高いので、素人のなんちゃってデザイナーには到底手が出ません。

そこで、HTML+CSSで（スクリプトやSGVも動員して）、Illustratorと同等のチラシやパンフレットができるか？というコンテンツです。

むかしむかし、写植屋さんと版下屋さんというお仕事がありました。

どちらのお仕事も、ＩＴという鬼によって、滅亡してしまいました。

で、誰かさんは、とっととＩＴ鬼の軍門にくだりましたとさ。おしまい。

「この程度のことは、HTML+CSSでできますよ」というコンテンツですが、多分Firefox（Geckoをレンダリングエンジンとして使用している）とChromium（Blinkをレンダリングエンジンとして使用するWebブラウザ）以外は未サポートです。左側のフロートが丸くなくて、中の文字が読めてしまう場合は、残念ながら未サポートとなります。

本当は、『HTMLは、PageMakerの夢をみるか？』のつもりだったのですが、PageMakerが既に存在しないのを知って、タイトルを変更しました。

このコンテンツは、HTML+CSSでチラシやパンフレットを作って、PDFに出力することを名目上の目的としています。

その性格上フォントのサイズやファミリーの指定をしています。

また、一部ではWebフォントも使用しています。極力軽くするために、使っている文字だけを抽出して、100K未満にしています。

通常のWebコンテンツでは、見る側がフォントやそのサイズを指定するのが当たり前で、「作り手のわがままになんか付き合っていられるか！」というご意見はごもっともで、かくいう作者自身も、Web上で指定されたフォント関連の設定は無視するように、Webブラウザを躾けていたりします。

ということで、Webブラウザ上でコンテンツ側の設定を無視する指定がされている場合は、当然製作者の意図しない画面表示となりますが、その際に「なんじゃこれ」などと言わないでくださいね。

もし興味があれば、たまには作り手のわがままにも付き合ってやってください。

フォント

歯詰め

昔、版下という仕事をしていた頃（「切った貼ったのヤクザな商売」と、よく同僚が言ってました。まあ、文字通りです）、まだまだ手動の写植機がバリバリ現役の頃だったので、詰め印字というのは嫌がられました（空印字が必要なので、2回印字しなければいけなかった為です）。

しかし、今で言う等幅フォントしかなかったので、デザイナーは詰めたがりました。

で、苦肉の策が1歯詰めでした。

写植機は4分の1ミリずつ物理的に歯送りするので、一歯詰めは、文字間を0.25mm詰めます。よく使われていたのは、16Q一歯詰めだったので、文字サイズ4mmで文字送りが3.75mmです。

実はCSSでも、同じことが指定できます。

下の3つの例は、全てが固定ピッチのフォントで、文字サイズが4mmとなっています。一番上は何も指定してないので、文字送りも4mmです。次が、CSSのletter-spacingに-0.25mmを指定したものです。16Q一歯詰めを再現しました（あくまでも、Webフォントが有効な場合のみですが）。

一番下は、ひらがなとカタカナだけ文字間隔を3.75mmとしています。また、句読点の後ろも4分の1文字分詰めています（これはJavaScriptなので、ご参考）。

昔、印刷会社でデザイン系の仕事（版下という仕事は、昔からマイナーで、誰も知りませんでした。そして、ＡＩの出現を待つまでもなく、パーソナルコンピュータの出現により、消滅していしまいました。）をしていたので、レイアウトに関しては、案外うるさいのです。

プロポーショナルフォントが全盛の現在、何か意味があるのか？と尋ねられると、まあ、単なるノスタルジーかもしれませんが。

プロポーショナル指定の場合は、次のようになります。

フォントによっては、つまり過ぎなきらいがありますね。そんなときは、一歯詰めの反対で、letter-spacingに+0.25mmを指定してみましょう。

長体・平体・斜体

transformが使えるようになったので、長平体は簡単になりました。

transform: scale(0.9, 1);を指定すると、こうなります（効果がわかりやすいように、フォントサイズを1.5emにしています）。

縦書きは長体、横書きは平体を少しかけると、読みやすくなるというのが、当時の一般的な考え方でした。

transform: scale(1, 0.9);を指定すると、こうなります。

縦書きは長体、横書きは平体を少しかけると、読みやすくなるというのが、当時の一般的な考え方でした。

版下をやっていた当時、斜体は嫌いでした。

古い写植機（当時でも）では、斜めに印字されてしまいました。

こんな感じ。transform: skewY(-10deg);

斜体は、古い写植機で打ってほしくなかったです。めんどくさいから。

これを、同じ文字（この場合は"で"とか"く"。モバイルの場合は画面を横にして見てください）を使って水平に切り取り、版下に貼ります。

こんな感じ。transform: skewX(-10deg);

斜体は、古い写植機で打ってほしくなかったです。めんどくさいから。

たまに、こんなことになって、使い物にならなくなりました ^_^;

印画紙の何処に印字されているか、写植マン本人がちゃんと管理しなければいけない時代でした。アナログですねえ。

こっちは斜体じゃないよ。

斜体は、古い写植機で打ってほしくなかったです。めんどくさいから。

影をつける

打った写植をポジフィルムにして、ずらしたりしてました。今ではホンのワンステップ。

text-shadow: silver 0.1em 0.1em;

タイトルに影をつけるのは、一時期チラシなどで流行りました。

日食効果は、確か写植機の多重露光と、通常露光のポジフィルムを使って作りましたが、なかなか思ったとおりにはいかなくって。

text-shadow: black 0px 0px 5px;color: white;

日食（Eclipse）効果も簡単に実現できます。

影とは少し違いますが、文字のアウトラインもよく使われました。

これも、当初は写植機の多重露光と、通常露光のポジフィルムを使って作りましたが、ゴナＯやゴナＯＳの登場で、楽になりました。

今ではこれも、標準機能ではありませんが、容易に実現できます。

text-stroke: 2px black;
-webkit-text-stroke: 2px black;
color: white;

ゴナＯやゴナＯＳで、楽になりました。

テキストレイアウト

縦書き

Webには横書きが溢れています、というより横書きしかありません。

実は、IEは、かなり昔から縦書きに対応していました。しかし、フォントが対応していなかったので、とても使いづらいものでした。

横書きと縦書きでは、フォントフェイスが変わらなければいけないもの（例えば「ー」と「ー」）がありますが、このあたりが正しく表示されないこともしばしば。@マーク付きのフォントなんてのもありました（縦書きの時に指定するやつです）。

しかし、最近はフォントとフォントマネージャが、そのあたりを制御してくれるので、気にせず縦書きを使うことができます。

この例では、少しだけ長体をかけています。また、字間も0.25mm空けています。

今でも小説は、ラノベも含めて殆どが縦書きです。

長文は縦書きのほうが読みやすいと思うのですが、これも慣れなんでしょうか。

国語の教科書も、横書きになるなんて話もあるみたいで、縦書きは絶滅危惧種！なんてことになると、悲しいです。

但し、Webブラウザの対応状況は少し複雑で、現状の標準にはIEが未対応です。そのため、下記のような設定をしています。

writing-mode: vertical-rl;
-webkit-writing-mode: tb-rl;
-ms-writing-mode: tb-rl;

本来は、vertical-rlが正しい（標準）ですが、IEも含めて対応させたい場合は、tb-rlを使います。

フロートや段組も、綺麗に表示されます。

但し、スマホで縦書きの段組みをやると、非常に見づらいので、スマホの場合は段組みをしていません。右へスクロールしてみてください。

黒猫と言えば魔女の相棒です。

で、魔女の黒猫と言えば、ジジに代表されるようなほっそりとした姿を思い浮かべます。

うちにも黒猫がいます。

庭を走り回っていた頃は、ほっそりしていて尻尾も長く、魔女の黒猫にぴったりな感じでした。

しかし、保護した時に『クロザトウ』などという高カロリーな名前にしたせいか、ほんの少し（そう、ホントにほんの少し）横に大きくなってしまいました。

キキのホウキに乗るときには、追加料金をとられそうです。

クロザトウを保護したときには、既に大人の黒猫がいたのですが、男の子の割に面倒見が良くて、よく一緒に昼寝をしていました。

しかし、クロザトウが大人になってくると、少しずつ距離が離れて、今はこんな感じです。

縦書きのときのフロートは、上にフロートさせる場合がleft、下にフロートさせる場合がrightとなります。