Fireworksはどうしても文字組みに関して設定できる値が少ないせいか、PhotoshopやIllustratorを見ては指をくわえている状態です。しかし、IllustratorでコピーしたテキストはFireworksでも文字をある程度保ったまま、Fireworksにペーストすることができました。

成功した例、意図通りにペーストされなかったりとあったので一通りやってみた実験を紹介します。使用したのはWindows版のFireworks CS5とIllustrator CS5です。

今のところの成功例は次の通りです。スクリーンショットではFireworksにペーストされたものを掲載しています。

段落揃え

これが一番お客さんから言われてキツかったところだったと思いますが、きちんと右端が揃って一番最後の行は左揃えとしてペーストされています。

とりあえずベタで。行揃えのみを直してFireworksにペーストしただけなので、数字やアルファベッドの前後にスペースがありますが、これも下に書く文字組み次第でなくすことができます。

プロポーショナルメトリクス

使用フォントがOpenTypeフォントであればという前提ですが、プロポーショナルメトリクスもしっかりとカバーしています。この例でいうと、はっきりとひらがなが詰まったのわかりますね。

禁則処理

禁則処理も見事に再現しています。禁則処理なしというのはあまり使わないと思いますが、一応再現できたということで。

文字組み

Illustratorのデフォルトの文字組みは4つあるのですが、よく使いそうなもの2つ、挙げてみました。違いがはっきりわかるようにすべて左揃えです。句読点がそれぞれIllustratorでのアキ量を維持していますね。

ここまでできると、自分で設定したアキ量設定はどうなんだと気になってしまいましたので、さらに実験してみました。文字組みをなんでやねんDTPさんのところで公開されているHW_基本全角.aiを読み込んで設定してみました。
なお、HW_基本全角.aiでの文字のアキ量設定は下の通りです。

文字の回転

文字の組方向を縦にした場合、数字が傾かないことがほとんど。Fireworksでは傾けたい文字だけ分解して、見てくれを整えたりしていましたが、Illustratorで文字を回転させてからペーストすると、それを維持します。バナーを作るときにはちょっと覚えておくと便利かもしれませんね。

文字スタイル

文中の一部に色を付けて、さらにフォントウェイトを変更…Fireworksでやろうとすると、心が折れそうですね。Illustratorの文字スタイルを使って文字に着色やウェイト設定をし、Fireworksにペーストをすると、このようにスタイルを維持したまま、貼り付けることができました。

タブ揃え(追記:2012-04-17)

Illustratorにはタブの位置を整える機能があります。こちらも見た目が変わらずにペーストすることができました。

罫線を使わない表だったり、例に挙げているように「・」で間を埋めるようなメニュー表は文字組みをIllustratorで作ってFireworksにペーストし、背景などを入れていくというがいいかもしれませんね。

段落スタイル

文字スタイルができるなら段落スタイルではと思ってやってみましたが、文字の色までは持ってこれず、フォントウェイトだけを持ってきている感じです。

上の例では全文を1オブジェクトでコピー&ペーストしていましたが、見出しの箇所と本文の箇所を違うオブジェクトとしてペーストすると、文字の色も維持できるようになります。

ちょっと見出しの座標がズレていますが、心配していた文字の色は維持されてペーストできているのがわかるかと思います。

段組の文字

段組についてはもう一息といったところです。同じテキストが段組の数だけペーストされます。段組を疑似的に作ろうとすると、1段目の最終行が左揃えになっていまいます。最終行を両端揃えにすればとりあえず回避できますが、もう一声ほしいところですね。

アンチエイリアスの付き方

Illustratorでアンチエイリアスをシャープにしても、なしにしても、ペースト時には「アンチエイリアス - なめらかに」で統一されます。

今のところは完全とはいえず、メモリを使いまくるようなものはペースト時にアンチエイリアスがかかっていない状態の#000000でペーストされるのを確認しています。実験では再現できませんでしたが、実際に仕事中に起こりました。

ペーストする文字数が多い場合は文字のスタイル毎で分割するなどして、クリップボードの文字数を減らすとそのままでペーストできるみたいです。

以下はうまくいかなった例です。

合成フォント

FireworksでもPhotoshopでも、喉から手が出るほど欲しい機能がこの合成フォント機能ではないでしょうか?こちらは残念ながらうまくペーストできませんでした。

合字(リガチャ)

欧文組版だと必ず気にしなくちゃいけないとCSS Niteで聴いた覚えがありますが、合字は通常の設定でFireworksにペーストできませんでした。

ちなみに、Fireworksで合字を使うにはCSS Nite in Omotesando vol.2で関口さんが紹介されていたPreferences.txtで設定を変更します。EnableLigaturesの値をfalseからtrueとすると、ペーストが維持されます。

<key>EnableLigatures</key>
<bool>true</bool>

ただし、一時的に合字を使いたいからと設定を変更して、ペーストして、またfalseにしてFireworksを再起動し、テキスト編集モードに入ってしまうと合字が戻ってしまいますのでご注意ください。

まとめ

多少不便なところは残ってしまってますが、「行末だけでも揃えたい!」というときにはIllustratorがおすすめです。行末が揃うだけで、テキストの左側に見えない線が浮かんできますね。

根本的に本文はHTMLのほうが!っていうのは僕も思ってますが、コーポレートサイトの代表挨拶の長い文章や、ランディングページや楽天のページみたいに大きい文字で長文を画像で見せるときには使えそうです。

僕は「文言.ai」というファイルで文字だけのIllustratorファイルを作っておきました。Fireworksでもある程度の修正には対応できますが、これだと変更がきても安心して対応できそうです。