IE6/7/8 VMLのフォントサイズ問題（emはだめ？）

Question

お疲れ様です。周です。

■問題点詳細

下記のURLに記載されてVMLの例を実行しました。

http://msdn.microsoft.com/en-us/library/bb263935%28v=vs.85%29.aspx

問題なく、正常に表示できました。

引き継ぎ、下記のテストを実施しました。

①フォントサイズは36ptから、3emに変更したら、「VML Text」文字は見えなくなる。

②フォントサイズは100000emに変更したら、「VML Text」文字は再度見えるになる。

■テスト環境

　IE6/7/8

  OSは全部XPでした（SP2/SP3）。

■確認内容

　正しく表示できない原因を教えていただきませんか。

　 IE6/7/8のバグですか？テスト方法の問題？

　テスト方法の問題なら、正しく表示できる例をお願いいたします。

Answer 1

動作そのものについてはわかりませんが、どのようなサイズを指定したいのでしょうか？ というのも 1em というのはフォントサイズが確定した後で、アルファベット「m」の幅を指す単位ものです。

ですので 36em とは具体的にはどのような大きさを期待して指定しているのやら。手段が目的になっていませんか？

Answer 2

＞動作そのものについてはわかりませんが、どのようなサイズを指定したいのでしょうか？

ただの「em」単位をテストしたいので、サイズは特定していません。

テストの目的は、VML（IE6/7/8）はフォントサイズ単位のem/px/%/ptなど全部正しい対応しているかどうか検証しています。

※結果を言えば、em/exの場合、正しく表示できません。

念のため、検証用コードをリストします。

＜修正前＞

   <v:line from="50 100" to="400 100">
   <v:fill on="True" color="red"/>
   <v:path textpathok="True"/>
   <v:textpath on="True" string="VML Text"
   style="font:normal normal normal 36pt Arial"/>
   </v:line>
　※FROM：　http://msdn.microsoft.com/en-us/library/bb263935%28v=vs.85%29.aspx

＜修正後 例１＞

   <v:line from="50 100" to="400 100">
   <v:fill on="True" color="red"/>
   <v:path textpathok="True"/>
   <v:textpath on="True" string="VML Text"
   style="font:normal normal normal 3em Arial"/>
   </v:line>
＜修正後 例2＞
   <v:line from="50 100" to="400 100">
   <v:fill on="True" color="red"/>
   <v:path textpathok="True"/>
   <v:textpath on="True" string="VML Text"
   style="font:normal normal normal 100000em Arial"/>
   </v:line>
■補足

＞というのも 1em というのはフォントサイズが確定した後で、アルファベット「m」の幅を指す単位ものです。

元のサンプルにあった36ptは約1.27cmです。親要素のフォントサイズは16px(IE6/7/8のデフォルトフォントサイズ)の場合、３emは36ptは同じサイズと思います。

フォントサイズ関連説明は下記URLに参照してください。

http://www.w3.org/Style/Examples/007/units

http://www.adworks24.co.jp/archives/740.html

＞ですので 36em とは具体的にはどのような大きさを期待して指定しているのやら。手段が目的になっていませんか？

36emに指定いません。3emに指定しました。

サイズは気にしなくでもOKです。1emに指定もかまいません。

Answer 3

＞動作そのものについてはわかりませんが、どのようなサイズを指定したいのでしょうか？

ただの「em」単位をテストしたいので、サイズは特定していません。

どのようなサイズでも構わない、つまり現状0pxで正しく表示されていると判断されてはどうでしょうか。0px以外とお考えなのでしたら、その値を明示していただかないと。

ですが、emは相対サイズであり、その基準となるサイズがない以上、どうしようもないと思うのですが。

Answer 4

>ですが、emは相対サイズであり、その基準となるサイズがない以上、どうしようもないと思うのですが。

明示的にフォントサイズを指定しない場合、ブラウザのデフォルトフォントサイズ利用じゃない？

一つ補足です、同じ相対サイズ単位の％も、表示できます(文字が見える)。

＜修正後 例3＞
   <v:line from="50 100" to="400 100">
   <v:fill on="True" color="red"/>
   <v:path textpathok="True"/>
   <v:textpath on="True" string="VML Text"
   style="font:normal normal normal 600% Arial"/>
   </v:line>

基準となるサイズがないので、見えないの原因なら、なぜ例２、例３で「VML Text」文字が見えるになった？

Answer 5

佐祐理さんへ。
一般に、
　１．1ポイントは概ね1/72[inch](=0.3528mm)とされています。
　　　(ただし、
      didot point：1/72 old french inch＝0.3759mm
      american point：1/72.27 inch＝0.351459mm
      JIS-point＝0.3514mm)

　２．ディスプレイは96[dot/inch]と定義されている場合が多いので。
　３．1ポイントは 1/72[inch] * 96[dot/inch] = 1.333[dot/pt]となります。

さて、Zhouxiaoyongさんの主張どおり、親要素のフォントサイズが
16[dot]だった場合の3[em]ですが、この場合16[dot]が基準になると考えられ、

　４. 16ピクセルは、16[dot] / 1.333[dot/pt] = 12.000[pt]と換算できます。

従って、3[em]は

　５．3[em] * 12.000[pt]と計算すると　36[pt(ポイント)]に計算できます。

　６．従って 36[pt]は画面上で、1.333[dot/pt] * 36[pt] = 47.988[dot]

位のサイズで表示されるべきでありますが、
実際には「まったく表示されない」との症状を
Zhouxiaoyongさんは、発見したようですよ。

Answer 6

すみません、はっきり説明出来なかった。

仲澤＠失業者さんへ

説明ありがとうございます。

Answer 7

>ですが、emは相対サイズであり、その基準となるサイズがない以上、どうしようもないと思うのですが。

明示的にフォントサイズを指定しない場合、ブラウザのデフォルトフォントサイズ利用じゃない？

仕様書を確認しましたがそのような記述はありませんでした。VMLのtextpath要素にはfont-sizeはCSS1に従うことが書かれています。CSS1のfont-sizeにはemを指定した場合、親要素のサイズを使用すると書かれています。

さて今回の場合、v:textpathの親要素はv:lineでしょうか、そしてlineはfont-sizeを持っていません。

Answer 8

v:lineにfont-size指定しない場合、ブラウザのデフォルトフォントサイズ利用になりません？

Answer 9

アルファベット「m」の幅を指す単位ものです。

　「'M' の高さ」では？

---

Jitta＠わんくま同盟

Answer 10

中学で４線ノートにアルファベットを書きませんでしたか？ 大文字アルファベットの高さはすべて同じであり、あえて「M」を指定する意味はありません。さすがに指摘する前にこれぐらいのことは考えて欲しいです…。

それに対し横幅は文字ごとに異なるため「m」と特定することに意味があります。

Answer 11

>ですが、emは相対サイズであり、その基準となるサイズがない以上、どうしようもないと思うのですが。

明示的にフォントサイズを指定しない場合、ブラウザのデフォルトフォントサイズ利用じゃない？

仕様書を確認しましたがそのような記述はありませんでした。VMLのtextpath要素にはfont-sizeはCSS1に従うことが書かれています。CSS1のfont-sizeにはemを指定した場合、親要素のサイズを使用すると書かれています。

さて今回の場合、v:textpathの親要素はv:lineでしょうか、そしてlineはfont-sizeを持っていません。

v:lineのフォントサイズを指定したら、結果はどう？

＜修正後 例4＞
   <v:line from="50 100" to="400 100" style="font-size:36pt;">
   <v:fill on="True" color="red"/>
   <v:path textpathok="True"/>
   <v:textpath on="True" string="VML Text"
   style="font:normal normal normal 1em Arial"/>
   </v:line>
残念です。まったく表示されない。
＞仕様書を確認しました
すみませんが、どこの仕様書を確認しましたか？

Answer 12

上記URLにこのような説明がありました。

The font size is defined in points. The values are the same as the standard HTML style attributes.

ptサポートしかない？pxなどもサポートしているじゃない？

文書ミス？IEバグ？

Answer 13

> さて今回の場合、v:textpathの親要素はv:lineでしょうか、そしてlineはfont-sizeを持っていません。

v:lineのフォントサイズを指定したら、結果はどう？

line要素にはfont-sizeが定義されていません。

＞仕様書を確認しました

すみませんが、どこの仕様書を確認しましたか？

該当箇所にリンクしています。リンク先を読んでください。

Answer 14

＞line要素にはfont-sizeが定義されていません。

styleに定義しました。

例4の一行目
 <v:line from="50 100" to="400 100" style="font-size:36pt;">

＞該当箇所にリンクしています。リンク先を読んでください。

ありがとうございます。

でも、リンク先のはW3のサイトです。IEのサイトではありません。

各ブラウザでは、CSSの対応状況が違います。

また、「明示的にフォントサイズを指定しない場合、ブラウザのデフォルトフォントサイズ利用じゃない？」のは、IEの現況です。HTMLで検証できます。

Answer 15

The font size is defined in points. The values are the same as the standard HTML style attributes.
ptサポートしかない？pxなどもサポートしているじゃない？

 
私の解釈でも、pointのみを動作保証の対象としているのだと思いました。
#pointとはptだけを指すかは分かりませんが、おそらく。
ドキュメントにないものに関しては、pxのように妥当に動作するケースもあれば、しない場合もあると思います。（自己責任で使用）

　

特に、remarksに書かれている内容は、実際より厳しく書かれているケースはMSDN内に他にもあります。
# 一般に仕様は厳しめで書くかと思います。

Answer 16

私はZhouxiaoyongさんの得た現象が、仕様と照らし合わせて矛盾していないと主張しています。

それに対しZhouxiaoyongさんは何を根拠に「明示的にフォントサイズを指定しない場合、ブラウザのデフォルトフォントサイズ利用じゃない？」を主張されているのですか？ 「IEの現況です。HTMLで検証できます。」とのことですが、HTMLの検証されているのですか？ VMLの検証をしていたのでは？

Answer 17

The font size is defined in points. The values are the same as the standard HTML style attributes.
ptサポートしかない？pxなどもサポートしているじゃない？

 
私の解釈でも、pointのみを動作保証の対象としているのだと思いました。
#pointとはptだけを指すかは分かりませんが、おそらく。
ドキュメントにないものに関しては、pxのように妥当に動作するケースもあれば、しない場合もあると思います。（自己責任で使用）

　

特に、remarksに書かれている内容は、実際より厳しく書かれているケースはMSDN内に他にもあります。
# 一般に仕様は厳しめで書くかと思います。

そうですね。

①「The font size is defined in points. 」を読みしたら、ptサポートのみのイメージでした。

②「The values are the same as the standard HTML style attributes. 」を読みしたら、「CSSのfont-size属性と同じ」の認識がありました。

②は余計なもの？画蛇添足？

Answer 18

逆に、佐祐理さんに質問する。

①VML（IE6/7/8）の場合、フォントサイズ単位emは利用できますか？

　⇒利用出来ない場合、理由は？

　⇒利用できる場合、サンプルをください。

②他の相対フォントサイズ単位（ex,%）は利用できますか？

③テスト結果によって、emと%の表現が違います、理由は分かりますか？

　⇒サンプルの問題？emの利用方法が不正？

教えていただきませんか。

Answer 19

②は余計なもの？画蛇添足？

解釈が分かれそうですが、
他のfont系属性も一律記載されているので、記述様式や書式が標準HTMLと同じであることを指していると思いました。
CSSの単位のサポートを大きく意識したのではなく、他のページとの記述の統一性を重視したものではないかと思いました。(方針程度かも？)
まぁ読み手としては、ANDで両方みたすののみが対象と解釈すると安全かなと思ったりします。
 
IEの標準仕様との差は、この辺にあったりしますが、VMLの情報はないようですね。