CKEditor Japan

[Ckeditor-project] 書体の追加について

蒲生トシヒロ gamo****@it-pr*****
2009年 11月 9日 (月) 16:54:58 JST

• 前の記事 [Ckeditor-project] 書体の追加について
• 次の記事 [Ckeditor-project] 書体の追加について
• 記事の並び順: [ 日付 ] [ スレッド ] [ 件名 ] [ 著者 ]

山本さん、蒲生です。

> dakinyさんがこちらでスクリーンショットを挙げているように、編集画面での
> 見た目は10％刻みでも全く問題がないように見えます。しかし実際はブラウザに
> よって異なるので、現実的に合わせてあげるのがいいように思います。

疑問を思ったので、スクリーンショットを撮ってみました。

なお、ブラウザ間の文字サイズを同じにするのは下記コードを埋めてあればとい
うことが前提となりますのでで、CKEditorで利用するフォントサイズの値とは関
係ありません。

body {
    font:13px "ＭＳ Ｐゴシック",arial,helvetica,clean,sans-serif;
    *font-size:small;
    *font:x-small;
}
table {
    font-size:inherit;
    font:100%;
}

Windowsのみの検証ですが、Internet Explorer8、Firefox3.5.5、Safari4、
Google Chrome3にて、Movable Type 5.0 RC1のスクリーンショットを撮り、比較
対象できるようにまとめてみました。
※添付画像「browser.jpeg」をご覧ください。

IE8の文字に合わせてガイドラインを引いてます。
※なお基本となる、エントリーの文字サイズは11pxです。

ほぼ問題なしと判断しますが、いかがでしょうか？

以下、10%刻みとなった根拠を述べていきます。

■Webに対する解釈の違い

山本さんが基準とするのは、YUIのガイドラインであり、僕が基準とするのはW3C
のガイドラインです。よって実装の解釈が異なるのはおかしくありません。

どのように見せるのかのは、Webデザイナーや、マークアップエンジニアが考慮
すべき問題であり、基本実装はW3Cのガイドラインでよしとすべきかと考えます。

■W3Cのアクセシビリティガイドラインには固定フォントは推奨されていない。

W3のアクセシビリティガイドラインは、文字サイズは相対を利用すべきと記述し
てあることをご存じかと思います。

文字サイズの値で利用できるのは、相対値ですから、「%」か、「em」となりま
す。
emは専門的ですので、一般の人でも理解できる%を採用したのは、最初に述べた
通りです。

よって、基本フォントサイズも13pxと指定することは、ガイドラインに反します。

■アクセシビリティガイドラインは情報が正しく伝わることを前提としている

すべてのブラウザで、同じ大きさの文字を見ることは、現状ブラウザ間の調整で
ほぼ可能となっているのは、添付画像で見ての通りです。

これを完全に見るサイズを同じにするかどうかは、Web制作時の受注時の仕様に
よりますので、

文字の大きさ大小は見る人により異なることを前提としております。
では、それをpxに置き換える必要があるのか？

小数点以下を否定する必要はありませんが、それは理論上の計算値であり、コン
ピュータの画面単位であるpxには、現状小数点以下は存在しません。

■文字サイズの基準は人により異なる

山本さんの場合、あくまでも下記ソースを利用してという条件がつきますが、下
記ソースを利用する人は希であること。

body {
    font:13px "ＭＳ Ｐゴシック",arial,helvetica,clean,sans-serif;
    *font-size:small;
    *font:x-small;
}
table {
    font-size:inherit;
    font:100%;
}

あくまでも同じように見せるための工夫であり、このコードを入れてない場合は
意味がない。
※アクセシビリティガイドラインにこだわる人はpxを一切使いません。

■エントリーにbodyで指定した文字サイズを利用する人が少ないこと

エントリーで利用する文字サイズを100%とか、13pxと指定している場合は希だと
思います。

たとえば

エントリー本文を11pxに設定していれば、

10px　90.9%
11px　100%
12px　109.1%
13px　118.2%
14px　127.3%

エントリー本文を12pxに指定していれば

10px　83.3%
11px　91.7%
12px　100%
13px　108.3%
14px　116.7%

※小数点以下四捨五入

となるわけです。

ご覧のように基準となるフォントサイズが変われば、%の数値が変りますので、
YUIのガイドライン数値を、エントリーで利用するCKEditorで採用することの意
味合いは意味がない(？)と思われます。

■細かい調整は各自でやればいい。

「ckeditor_for_mt.jpg」は、MT版のプラグイン管理画面ですが、文字サイズや
書体は利用者によりカスタマイズできるように作られています。

MODx版でも採用してはいかがでしょうか？

ということで、基準はW3Cのアクセシビリティガイドラインにありますので、10%
刻みを改める気はありません。

ところで、こうしたものって、見ないとわからないのですが、MODx版はYahoo!ガイドライン
を参考にしてみえることですので添付画像と同じようなもの（比較対象できるも
の）、MODxのスクリーンショットから作って添付していただけませんでしょうか？

お時間があればで結構です。

On Mon, 9 Nov 2009 00:24:36 +0900
山本昌範 <yamam****@kyms*****> wrote:

> 山本です。今になって気付いたのですが
> 
> > 10px    77%
> > 12px    93%
> > 13px    100%
> > 14px    108%
> > 15px    116%
> > 16px    123.1%
> > 18px    138.5%
> > 20px    153.9%
> > 24px    182%
> > 26px    197%
> >
> > これを基調に修正しました。
> >
> > i.fontSize_sizes='80%/77%;90%/93%;100%/100%;110%/108%;115%/116%;125%/123.1%;140%/138.5%;150%/153.9%;180%/182%;200%/197%';
> 
> 今回はこれに合わせたのですが、
> 
> > 基本11pxとして、80%ならば、8.8pxですがブラウザ画面上では、最小単位が1px
> > ですから、小数点以下は存在せず、9pxとして表示されるのでは？
> >
> > 150%までは10%刻み、後は大まかに200%までいいのではと思いましたが、いかが
> > でしょうか？
> > ＃200%まで10%刻みでもかまいません。
> 
> ということですね。これについては実際に各ブラウザで表示確認してみると分かりますが、
> Yahooさんが定めたガイドラインが正確だと思います。なので、これに合わせてあげるのが
> (結果的には)フレンドリーな気がします。
> 
> http://www.dakiny.com/archives/movable-type/movable_type_5_ckeditor_for_movable_type_coming_soon/
> 
> dakinyさんがこちらでスクリーンショットを挙げているように、編集画面での
> 見た目は10％刻みでも全く問題がないように見えます。しかし実際はブラウザに
> よって異なるので、現実的に合わせてあげるのがいいように思います。
> 
> 内部的に123.1％とか131％とかを指定していることに気付かないデザイナー
> さんが大半とは思いますけどね。でも、気付かなくても問題が起きないように
> 配慮するなら、やはりYahooガイドライン(でしたよね)に合わせるのがいいと
> 思います。こういうことをちゃんと理解していないデザイナーさんが大半では
> ないかという気がしますので・・
> 
> 基本的にはdakinyさんの判断に合わせます。方針を示していただければと。
> 今までこういうことが問題になったという話も特に聞かないですし。
> 
> 
> ************************************************
> 山本 昌範  yamam****@kyms*****
> 　　　　　　ケイムズカンパニー
> 　　　　　　http://kyms.ne.jp/
> 　　　　　　Tel 090-8208-4878 Fax 020-4623-3429
> 　　　　　　callto://yamamoto.kyms/ (Skype)
> *************************************************
> 
> 
> 
> 
> 2009年11月8日0:11 蒲生トシヒロ <gamo****@it-pr*****>:
> > 蒲生自己補完です。
> >
> > よく考えたら、エントリーって、fontsize 100%で使っている人はいなくて、
> > 12pxか、11px相当にしている人が多いかと思います。
> > ＃僕は86%にしてますが、MTは11pxになってました。
> >
> > なので、コンテントエリアで、細かい指定をする必要はなく。
> >
> > 基本11pxとして、80%ならば、8.8pxですがブラウザ画面上では、最小単位が1px
> > ですから、小数点以下は存在せず、9pxとして表示されるのでは？
> >
> > 150%までは10%刻み、後は大まかに200%までいいのではと思いましたが、いかが
> > でしょうか？
> > ＃200%まで10%刻みでもかまいません。
> >
> > 御意見お聞かせください。
> >
> > On Sat, 07 Nov 2009 23:18:34 +0900
> > 蒲生トシヒロ <gamo****@it-pr*****> wrote:
> >
> >> 蒲生です。
> >>
> >> 日本語書体の追記と、フォントサイズの相対指定は、出来ました！
> >>
> >> ※jsファイルは添付してありますが、.txtにファイル名を変換してあります。
> >> ※修正箇所はわかりやすいように、暫定的に改行しました。
> >>
> >> 山本さん、アドバイスありがとうございます。
> >>
> >> On Sat, 7 Nov 2009 20:42:35 +0900
> >> 山本昌範 <yamam****@kyms*****> wrote:
> >>
> >> > 山本です
> >> >
> >> > > Webで使われるフォントサイズはアクセシビリティ上、相対表記が好ましいとさ
> >> > > れておりますので、数字を大まかにしたのは利用しやすさを考慮した上での採用
> >> > > です。
> >> > >
> >> > > 数値は、多くのWebが本文を表示サイズを12px相当に設定してある場合が多こと
> >> > > から、計算して選んであります。
> >> >
> >> > こちらの件ですが
> >> >
> >> > http://www.weblab.co.jp/blog/2009/01/post_65.html
> >> > 上記のチャートに照らし合わせてみると、実際は12pxの表示が抜けてしまうことに
> >> > なると思います。表記上は80％・90％・・・というふうに10％区切りにしておいて、
> >> > 内部的には77・85・93・100・・というふうに合わせてあげるのがフレンドリーかも？
> >> > （あまり自信なし）
> >>
> >> その案はいいかもです:-)
> >>
> >> 10px  77%
> >> 12px  93%
> >> 13px  100%
> >> 14px  108%
> >> 15px  116%
> >> 16px  123.1%
> >> 18px  138.5%
> >> 20px  153.9%
> >> 24px  182%
> >> 26px  197%
> >>
> >> これを基調に修正しました。
> >>
> >> i.fontSize_sizes='80%/77%;90%/93%;100%/100%;110%/108%;115%/116%;125%/123.1%;140%/138.5%;150%/153.9%;180%/182%;200%/197%';
> >>
> >> > > 下記のように、絶対と相対の両方の表記も可能ですが、ユーザーが紛らわしいの
> >> > > で、相対に絞りたいと思いますが、いかがでしょうか？
> >> >
> >> > そうですね、相対だけでいいと思います。あまり増やしてもどれを選んでいいのか
> >> > 悩みますよね。マウス操作も増えますし。
> >>
> >> 相対だけの方向とします。
> >>
> >> > > i.font_names='MS Gothic; MS PGothic; MS Mincho; MS PMincho; Arial/Arial, Helvetica, sans-serif;Comic Sans MS/Comic Sans MS, cursive;Courier New/Courier New, Courier, monospace;Georgia/Georgia, serif;Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;Tahoma/Tahoma, Geneva, sans-serif;Times New Roman/Times New Roman, Times, serif;Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;Verdana/Verdana, Geneva, sans-serif';
> >> >
> >> > 試してないので実際は分かりませんが、フォント名は日本語使えるのでは。
> >> > 「MSゴシック」などです。確かスラッシュで区切った前がラベルになるという
> >> > 仕様だったような気がします。Georgia/Georgia, serif;だったらGeorgia。
> >>
> >> スラッシュ前がラベルであることは理解しておりましたが、日本語はja.jsに追
> >> 記するものとばかり思い込んでましたが、表示されますね:-)
> >> アドバイスありがとうございます。
> >>
> >> i.font_names='MSゴシック/MS Gothic, Osaka-Mono; MS Pゴシック/MS PGothic, Osaka; MS UI Gothic/MS UI Gothic, Meiryo, Meiryo UI, Osaka; MS 明朝/MS PMincho; MS P明朝/MS PMincho, Saimincho; Arial/Arial, Helvetica, sans-serif;Comic Sans MS/Comic Sans MS, cursive;Courier New/Courier New, Courier, monospace;Georgia/Georgia, serif;Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;Tahoma/Tahoma, Geneva, sans-serif;Times New Roman/Times New Roman, Times, serif;Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;Verdana/Verdana, Geneva, sans-serif';
> >>
> >> 次は正規表現なんですけど
> >>
> >> strike
> >> ↓
> >> del
> >>
> >> u
> >> ↓
> >> ins
> >>
> >> に変更したいのですが、どこを修正するのかわかります？＞お二方
> >>
> >> その修正が終わったら、CKEditor for MTリリースしましょう＞天野さん
> >>
> >> > ************************************************
> >> > 山本 昌範  yamam****@kyms*****
> >> > ケイムズカンパニー
> >> > http://kyms.ne.jp/
> >> > Tel 090-8208-4878 Fax 020-4623-3429
> >> > callto://yamamoto.kyms/ (Skype)
> >> > *************************************************
> >> >
> >> >
> >> >
> >> >
> >> > 2009年11月7日20:05 蒲生トシヒロ <gamo****@it-pr*****>:
> >> > > 天野さん、山本さん
> >> > >
> >> > > 蒲生です。
> >> > >
> >> > > CKEditor/ckeditor/ckeditor.jsを触って
> >> > >
> >> > > ◇fontsize
> >> > >
> >> > > フォントサイズに該当する行を、TinyMCE for MTや、FCKeditor Jaで採用してい
> >> > > た、相対表記に変更してみました。
> >> > >
> >> > > i.fontSize_sizes='8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px';
> >> > >
> >> > > ↓
> >> > >
> >> > > i.fontSize_sizes='80%/80%;90%/90%;100%/100%;120%/120%;130%/130%;150%/150%;200%/200%';
> >> > >
> >> > > と修正してみました。
> >> > >
> >> > > Webで使われるフォントサイズはアクセシビリティ上、相対表記が好ましいとさ
> >> > > れておりますので、数字を大まかにしたのは利用しやすさを考慮した上での採用
> >> > > です。
> >> > >
> >> > > 数値は、多くのWebが本文を表示サイズを12px相当に設定してある場合が多こと
> >> > > から、計算して選んであります。
> >> > >
> >> > > 下記のように、絶対と相対の両方の表記も可能ですが、ユーザーが紛らわしいの
> >> > > で、相対に絞りたいと思いますが、いかがでしょうか？
> >> > >
> >> > > i.fontSize_sizes='8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px;80%/80%;90%/90%;100%/100%;120%/120%;130%/130%;150%/150%;200%/200%';
> >> > >
> >> > > ◇fontfamily
> >> > >
> >> > > ひとまず、Windows XPで使われている4書体を追記しました。
> >> > >
> >> > > i.font_names='MS Gothic; MS PGothic; MS Mincho; MS PMincho; Arial/Arial, Helvetica, sans-serif;Comic Sans MS/Comic Sans MS, cursive;Courier New/Courier New, Courier, monospace;Georgia/Georgia, serif;Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;Tahoma/Tahoma, Geneva, sans-serif;Times New Roman/Times New Roman, Times, serif;Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;Verdana/Verdana, Geneva, sans-serif';
> >> > >
> >> > > ◇今後の修正
> >> > >
> >> > > １．正規表現への修正
> >> > > ２．H1の削除
> >> > >
> >> > > ■開発の方向性
> >> > >
> >> > > こちらはお二人にお聞きしたいのですが、ckeditor.jsを直接ハックするのか、
> >> > > プラグインを読み込む形にして、そちらを修正する形にするのか、いずれがいい
> >> > > でしょうね。
> >> > >
> >> > > ひとまず、ファーストリリースは、ckeditor.jsを直接ハックする形でファイル
> >> > > 公開したいと思いますが、今後のことを考えると、
> >> > >
> >> > > １．ckeditor.jsを、プラグインを読み込む形に修正して、該当するプラグイン
> >> > > のjsファイルを修正する。あるいは新たにプラグインを作る。
> >> > >
> >> > > ２．ckeditor.jsに、custom.jsを読み込ませて必要箇所はそちらから、プラグイ
> >> > > ンが読めるように制御する
> >> > >
> >> > > のいずれかが好ましいように思われます。
> >> > >
> >> > > 御意見ください。
> >> > >
> >> > > -----------------------------------------------
> >> > > 蒲生トシヒロ（GAMO, Toshihiro）
> >> > >
> >> > > 有限会社ITプロフェッショナル 代表取締役
> >> > > 株式会社日本情報化農業研究所 執行役員(マーケティング担当)
> >> > >
> >> > > 〒227-0043 横浜市青葉区藤が丘2-38-3　シャルム藤が丘 206
> >> > > Phone & Fax : 045-972-6159
> >> > > Handy : 090-9339-0676
> >> > > E-mail & i-mode: gamo****@it-pr*****
> >> > > Skype ID: dakinyj53
> >> > > ITプロフェッショナル http://www.it-pro.co.jp/
> >> > > 日本情報化農業研究所 http://www.n-i-agroinformatics.com/
> >> > > mixi http://mixi.jp/show_profile.pl?id=1474285
> >> > > Twitter http://twitter.com/Dakiny
> >> > > Blog URLhttp://www.dakiny.com/
> >> > > ※メールの慣習にて、親しみをこめて「さん」づけで
> >> > > 失礼いたします。
> >> > > ----------------------------------------------
> >> > >
> >> > > _______________________________________________
> >> > > Ckeditor-project mailing list
> >> > > Ckedi****@lists*****
> >> > > http://lists.sourceforge.jp/mailman/listinfo/ckeditor-project
> >> > >
> >> > >
> >> > _______________________________________________
> >> > Ckeditor-project mailing list
> >> > Ckedi****@lists*****
> >> > http://lists.sourceforge.jp/mailman/listinfo/ckeditor-project
> >> >
> >>
> >> -----------------------------------------------
> >> 蒲生トシヒロ（GAMO, Toshihiro）
> >>
> >> 有限会社ITプロフェッショナル 代表取締役
> >> 株式会社日本情報化農業研究所 執行役員(マーケティング担当)
> >>
> >> 〒227-0043 横浜市青葉区藤が丘2-38-3　シャルム藤が丘 206
> >> Phone & Fax : 045-972-6159
> >> Handy : 090-9339-0676
> >> E-mail & i-mode: gamo****@it-pr*****
> >> Skype ID: dakinyj53
> >> ITプロフェッショナル http://www.it-pro.co.jp/
> >> 日本情報化農業研究所 http://www.n-i-agroinformatics.com/
> >> mixi http://mixi.jp/show_profile.pl?id=1474285
> >> Twitter http://twitter.com/Dakiny
> >> Blog URLhttp://www.dakiny.com/
> >> ※メールの慣習にて、親しみをこめて「さん」づけで
> >> 失礼いたします。
> >> ----------------------------------------------
> >
> > -----------------------------------------------
> > 蒲生トシヒロ（GAMO, Toshihiro）
> >
> > 有限会社ITプロフェッショナル 代表取締役
> > 株式会社日本情報化農業研究所 執行役員(マーケティング担当)
> >
> > 〒227-0043 横浜市青葉区藤が丘2-38-3　シャルム藤が丘 206
> > Phone & Fax : 045-972-6159
> > Handy : 090-9339-0676
> > E-mail & i-mode: gamo****@it-pr*****
> > Skype ID: dakinyj53
> > ITプロフェッショナル http://www.it-pro.co.jp/
> > 日本情報化農業研究所 http://www.n-i-agroinformatics.com/
> > mixi http://mixi.jp/show_profile.pl?id=1474285
> > Twitter http://twitter.com/Dakiny
> > Blog URLhttp://www.dakiny.com/
> > ※メールの慣習にて、親しみをこめて「さん」づけで
> > 失礼いたします。
> > ----------------------------------------------
> >
> > _______________________________________________
> > Ckeditor-project mailing list
> > Ckedi****@lists*****
> > http://lists.sourceforge.jp/mailman/listinfo/ckeditor-project
> >
> _______________________________________________
> Ckeditor-project mailing list
> Ckedi****@lists*****
> http://lists.sourceforge.jp/mailman/listinfo/ckeditor-project
> 

-----------------------------------------------
蒲生トシヒロ（GAMO, Toshihiro）

有限会社ITプロフェッショナル 代表取締役
株式会社日本情報化農業研究所 執行役員(マーケティング担当)

〒227-0043 横浜市青葉区藤が丘2-38-3　シャルム藤が丘 206
Phone & Fax : 045-972-6159
Handy : 090-9339-0676
E-mail & i-mode: gamo****@it-pr*****
Skype ID: dakinyj53
ITプロフェッショナル http://www.it-pro.co.jp/
日本情報化農業研究所 http://www.n-i-agroinformatics.com/
mixi http://mixi.jp/show_profile.pl?id=1474285
Twitter http://twitter.com/Dakiny
Blog URLhttp://www.dakiny.com/
※メールの慣習にて、親しみをこめて「さん」づけで 
失礼いたします。
----------------------------------------------
-------------- next part --------------
テキスト形式以外の添付ファイルを保管しました...
ファイル名: browser.jpg
型:         image/jpeg
サイズ:     267231 バイト
説明:       無し
Download 
-------------- next part --------------
テキスト形式以外の添付ファイルを保管しました...
ファイル名: ckeditor_for_mt.jpg
型:         image/jpeg
サイズ:     189380 バイト
説明:       無し
URL:        http://lists.sourceforge.jp/mailman/archives/ckeditor-project/attachments/20091109/0fb8163b/attachment-0003.jpg 

• 前の記事 [Ckeditor-project] 書体の追加について
• 次の記事 [Ckeditor-project] 書体の追加について
• 記事の並び順: [ 日付 ] [ スレッド ] [ 件名 ] [ 著者 ]