« [YouTube]広告挿入位置 | トップページ | [TV]House M.D.【エンディング曲】 »

[ppi]ブラウザ印刷とスクリーン解像度の不思議な関係

私も含めて
『ポストスクリプト』な人(どんな人..w)ほど
陥りやすい誤解と
ブラウザから印刷する制作物(主にHTML)を
作成する場合に
あらかじめ知っておくべき事項としての
(すみません前置き長くて)
『画面解像度』について
ちょっと解説します。

ブラウザ経由での印刷物作成時に
『100%実寸印刷サイズ』な
印刷結果が必要な場合に
知っておくべき事です
(まぁ一般利用なら気にしなくても良い事です)

 

『100%』印字した場合の
『印刷サイズ』について解説します。

サンプルは
無印良品の封筒
商品番号 8486540
コットンペーパー封筒・横型 
105×215mm[LINK]新しいウィンドで開きますを使います。

Force4u00221011_54440

↑のように
作成者の意図する寸法で
ブラウザ経由で印刷させたい
これがテーマです。

一般的にポストスクリプトな人が
HTMLを作る場合
このような発想で作成します。

Force4u00221012_145645

『だってピクセル・パー・インチだからこれで良いでしょ』
って事なんですが
『100%実寸印刷』がからむとちょっと違います。
(昔はこれでも良かったんですけど今は...)
72ppiで作成(計算)すると
Force4u00221012_145746

このように小さくなります。
(経験ありますかぁ?w)

 


ブラウザーからの印刷(Safari)は
※FirefoxやChromeは用紙の余白について『ページ設定』を無視してブラウザが勝手に余白設定するのでブラウザの余白設定を別途考慮する必要があります。


Force4u00221012_135457

ファイル

ブラウザ表示

システム

モニタ表示

プリンターへ

の流れになるので
『画面解像度』
を考慮しないと
実寸では印刷されません。

 

さっしの良い人は
もう気がついたと思います
『画面解像度』なるほどねぇ〜とw

 

一般的にカタログ等のスペックを見ると
画面解像度って言うと
例えば
Force4u00221012_72247

こんな風に表示されている
と思います。
これはこれで
『画面解像度』なんですが

『画面サイズ』
が関係すると
『スクリーン解像度』としての
『ppi』
が関係します。

Force4u00221012_124511

↑これは24inのimacな場合の『画面サイズ』
ですね
これを
計算すると
のようになります

Force4u00221012_151336

MacBookProなら

Force4u00221012_135824

スクリーン解像度は128ppiとなります。

では
計算したppiに基づいて
作ればいいわけです
から

iMac2009アーリー 24inモニタの場合は

Force4u00221012_141107

として作れば

Force4u00221012_140815

100%で用紙サイズジャスト
で作る事が出来ます。

この考え方で作れば
例えば任意の位置に任意の文字を印字
したりする事が可能になりますね。

ただ
先に説明した通り

機種が違えばスクリーン解像度が違いますので
それぞれ
計算して算出する必要があります。
そんなわけですので
72ppiで計算すると
一般的にユーザーは
『小さく見えている』事を
分かっていれば良いと思います

 

AI→PSD→PNGやGIF
の作業手順を考えた時に
考えやすい数値としてPSD書き出し時に

 123456789
72ppi72144216288360432504576648
96ppi96192288384480576672768864

上記の表から考えて
小さいものなら576
大きめの物なら288
で考えて
最終的には
96ppi換算でサイズを考えておくだけで十分かもしれませんね。

 


サイズの計算する場合に
WEBな場合は
何ppi
より
何px
なのか?
が重要ですので

『100%実寸印刷』を考慮しない時は

全く気にしなくていい事ですね.....笑

■機種別でスクリーン解像度ppiが違う
■余白制御がブラウザによって違う
■ブラウザ別のCSS制御の違い等

から
ブラウザから正確な印刷はまだまだ出来ませんね。
各ブラウザも
印刷機能はオマケ的な感じですので
ブラウザから正確な(制作者が意図した通りに)
印刷が出来るようになるのは
まだもう少し先になるのかなぁ

逆に考えると
『ユーザー毎』で印刷結果はまちまち
って考えて丁度いいかもです。


 


この計算は
エクセルやナンバーズ
を使って計算しても良いですが
(ああぁ三角関数ぅ.....遠い目線...w)

このようなサービス

Force4u00221012_153644
Display Dimensions Calculator[LINK]新しいウィンドで開きます

を使った方が簡単ですね。


 

ちなみに
今回のサンプルで作ったのは
こんな制作物(実際の物とは違いますが)
封筒の宛名に
GoogleMapを入れる
って物でした。

Force4u00221012_145258

クリックでサンプルHTMLを開きます
地図をグリグリできますので
宛先のソバの地図にしてから印刷します。


 

また
機種別の
『画面サイズ』
『画面解像度』

こちら

Force4u00221012_161202
Mactracker[LINK]新しいウィンドで開きます

を使って
調べる事ができます。

参考にしてください。

    

|

« [YouTube]広告挿入位置 | トップページ | [TV]House M.D.【エンディング曲】 »

Print」カテゴリの記事

コメント

この記事へのコメントは終了しました。