ヘルプの「Windows 10 でのファイル拡張子関連付け」「Grep」「Grep置換」の画像がやたら大きくて見づらい問題に対処 #1328

beru · 2020-06-28T01:49:02Z

PR の目的

ヘルプの「Windows 10 でのファイル拡張子関連付け」「Grep」「Grep置換」ページの画像がやたら大きくて見づらい、という問題報告に対処するのが目的です。

カテゴリ

ドキュメント修正

PR の背景

OSのディスプレイ設定の表示スケールが 100% の動作環境でサクラエディタのHTMLヘルプファイルを表示すると、特定のページで画像がやたら大きく表示されて見づらい問題があります。

この問題はややこしくて、高DPI環境（OSのディスプレイ設定の表示スケールが 200% とかのかんきょう）で同じようにHTMLヘルプでそのページを表示すると、画像がそこまでやたら大きくは表示されないので問題に気付きません。

そして、Chrome等の一般的なウェブブラウザでの挙動はまたHTMLヘルプファイルを表示する時とは異なります…。

PR のメリット

画像の表示が大き過ぎる問題が解消されます。

テスト内容

編集したページをブラウザで確認しました。また、build-chm.bat 実行して作成されるHTMLヘルプのファイル sakura.chm を開いて確認しました。

Windows 10 でのファイル拡張子関連付け

Grep

Grep置換

参考資料

Qiita : srcset属性について

AppVeyorBot · 2020-06-28T02:11:26Z

✅ Build sakura 1.0.2865 completed (commit a816762706 by @beru)

berryzplus

CSSで手軽に対応しましょう！って提案には賛成します。

とりあえず、単純ミスと思われる指摘をコメントしときます。

berryzplus · 2020-06-28T12:30:12Z

help/sakura/res/HLP000067.html

@@ -12,7 +12,7 @@
 <noscript>[<a href="HLP000001.html">目次</a>]<br></noscript>
 <h2>Grep</h2>

-<img src="images/Grep.png"><br>
+<img src="images/Grep.png" style='width:50em;'><br>


HTMLの属性値を囲う引用符には ' ではなく " を使用すべきです。

画像幅の単位は cssピクセルを利用すべきだと思います。

em は要素に指定されたフォントの幅を基準にした単位なので、フォントを変えるとズレたりするのでめんどくさいです。文字サイズの変更に追随させたい特殊な状況を除いては、画像サイズにフォント幅を基準とする単位を利用すべきじゃないと思います。

親要素に対する相対サイズ(パーセント)で指定してもよいと思います。

HTMLの属性値を囲う引用符には ' ではなく " を使用すべきです。

HTMLの規格としては属性をシングルクォートで囲うのでも問題無いと思うんですけど、他の記述に合わせるとなるとダブルクォートで囲った方が良いかもしれないですね。

画像幅の単位は cssピクセルを利用すべきだと思います。

em は要素に指定されたフォントの幅を基準にした単位なので、フォントを変えるとズレたりするのでめんどくさいです。文字サイズの変更に追随させたい特殊な状況を除いては、画像サイズにフォント幅を基準とする単位を利用すべきじゃないと思います。

親要素に対する相対サイズ(パーセント)で指定してもよいと思います。

Chrome等のウェブブラウザで表示する場合はOSのディスプレイ設定の表示スケールのパーセントに応じて拡大して表示されます。ピクセルという絶対単位で指定しているのに本来はおかしな話ですが、そうでもしないと高DPI環境でウェブブラウザを使った時に色々なサイトで画像が小さく表示されてしまうのでそういう挙動にしているんだと思います。

ヘルプファイル(*.chm) のビューワーはウェブブラウザとは挙動が違っていて、OSのディスプレイ設定の表示スケールに関係なく画像が等倍サイズで表示されます。つまりピクセル単位で指定すると、表示環境のDPIによって画像のサイズが異なって表示される問題がそのまま残ります。つまり画像のサイズを指定していない現状と同じ問題が残ります。

じゃあどの単位を使うべきなのか？という疑問が浮かびますが、試しにパーセントで指定すると親要素に対する相対サイズで表示されます。ヘルプのウィンドウのサイズを変えるとそれに応じて画像のサイズが変わります。これはちょっと使っていて不思議な感じですね。自分はこの挙動は良くないと思うのでパーセントを単位に使うのは反対です。

CSSで手軽に対応しましょう！って提案には賛成します。

CSSで対応しないで画像を #1325 で @arigayas さんや @k-takata さんが作ってくれたものに差し替える対応でも良い気もしてきました。

高DPI環境で chm ファイルを表示すると（DPIが100%の環境でキャプチャした）画像が小さく表示されてしまう問題がありますが、それってhh.exe (HTMLヘルプ実行プログラム) の問題であって最近のウェブブラウザで表示すると拡大して表示されるのでそこまで気にはなりません。

Microsoftはもうレガシーな hh.exe を更新してくれない事を考えると、それにまともに向き合うのもなんか徒労に感じてきました。あと高DPI環境でHTMLヘルプを表示すると、ページ上の画像が小さく表示される問題以外にGUI部分のアイコンが小さく表示されてしまったりして微妙に使いづらいです。

その後調べてみたところ、img タグの srcset 属性を使う事でデバイスのDPIに合わせて別々の画像を読み込むように指定出来る事が分かりました。きっと最近のウェブサイトのコンテンツを作っている人達はこれを活用してるんだと思います。

@k-takata さんが #1325 (comment) に添付してくれた画像を使うように変更しました。これでHTMLヘルプの「Windows 10 でのファイル拡張子関連付け」ページを表示した際に画像がやたら大きくて見づらい問題は解消されます。

あと img タグの srcset 属性も使用してみました。高DPI環境でChromeブラウザなどでそのページを表示したときには、元々使っていた画像が表示されます。解像度が大きい画像ですがブラウザ側で引き延ばされて表示はされないので見づらく無いです。高DPIではない環境、つまりディスプレイ設定の表示スケールが 100% の動作環境で表示すると、今回追加した100%でキャプチャした小さい画像が使われる為に見やすく表示されます。

HLP000067.html と HLP000362.html にも同様の対処をした方が良いですね。最近のペースだと #1323 の問題への対処がすぐに完了するとは思えないので、こちらで表示スケール 100% のスクリーンショットを取って使う事にします。

cssで指定するpxは cssピクセル だから、表示環境のdpiに応じてサイズが変わるのは cssの仕様 と言ってます。

WWW創世記の経緯により、シングルクォートで囲う記述や引用符を省略する記述も「許容」ではあると思います。
専門家じゃない人にホームページを作ってもらうためにあいまいな記述を許容しとく必要があったからです。
で、ぼくらって専門家じゃないんでしたっけ？ということで指摘をした感じです。

そんなに強くこだわる気はありませんけど。

私が無知なのかもしれませんが、シングルクォートで囲むよりダブルクォートで囲む方が推奨されるというのは初めて聞きました。

https://dev.w3.org/html5/html-author/Overview.src.html
なお規格には下記のように書かれてました。

There are four slightly different syntaxes that may be used for attributes in HTML: empty, unquoted, single-quoted and double-quoted. All four syntaxes may be used in the HTML syntax, depending on what is needed for each specific attribute. However, in the XHTML syntax, attribute values must always be quoted using either single or double quotes.

検索してもシングルクォートで囲む書き方が推奨されないという情報はまだ見つけることは出来てません。

なお自分はマークアップの専門家ではないです。またwebの技術には詳しくないです。

cssで指定する px は論理単位で cssピクセル という論理単位です。
デバイスピクセルが実際の1ドットを表すのに対し、cssピクセルは 72dpi 相当の幅・高さを表します。

cssピクセルっていう用語について知らなかったです。勉強になりました。
デバイスピクセル比で引き伸ばされて表示されるのも規格で規定されてそうですね。

HTML Help WorkShopが本来対応するHTML規格は HTML3.2 らしいです。

https://weblog.west-wind.com/posts/2012/feb/15/make-your-chm-help-files-show-html5-and-css3-content#Web-Browser-Control----perpetually-stuck-in-IE-7-Mode

によるとIE7モード固定の動作みたいです。レジストリ設定でIEのバージョン指定が出来るらしいですが、まぁ微妙ですね。

IE後継のEdgeもChromeに合わせてBlink使うようになったし、もう時代遅れのHTMLヘルプはやめてブラウザで見るように出来たら良いなぁ…。

本物のブラウザではなくブラウザコンポーネントを使った表示なので、ヘルプビューアでは指定したcssが正しく認識されない可能性はあると思います。ただし、修正前の画像のcss指定は style="zoom:1.0" だったようなので、原寸表示された原因はソレかも知れません。

実際にソレが原因なのか確認を取った上でのコメントではなくて推測の発言だと思うので残念です。

実際に高DPI環境で確認しないで想像上での意見であれば的を外しちゃいます。

デバイスピクセル比で引き伸ばされて表示されるのも規格で規定されてそうですね。

調べてみたところ、それっぽい事が書かれていました。

https://drafts.csswg.org/css-values-3/#reference-pixel

Note: This definition of the pixel unit and the physical units differs from previous versions of CSS. In particular, in previous versions of CSS the pixel unit and the physical units were not related by a fixed ratio: the physical units were always tied to their physical measurements while the pixel unit would vary to most closely match the reference pixel. (This change was made because too much existing content relies on the assumption of 96dpi, and breaking that assumption broke the content.)

既存コンテンツとの兼ね合いを考えて、CSSピクセル単位を実デバイスのピクセルにはしない事に決めたようです。

https://hacks.mozilla.org/2013/09/css-length-explained/

上のURLはFirefox開発元のMozillaの人が書いた解説ですがそこでも同様の説明が有りました。

日本語のページだと下記のページで分かりやすく解説されてました。

https://d-fount.com/about-resolution/#outline_4_2

http://site.oukasei.com/?p=2332

https://www.atmarkit.co.jp/ait/articles/1308/29/news004.html

なおHTML5規格が出てからは img タグの srcset 属性等で対処が可能な事が分かったので、このPRではそれを使いました。高DPI環境でHTMLヘルプを表示すると画像の見え方がブラウザと違う件についての対処は諦めます。

表示スケール100%のキャプチャ画像を使うように変更 srcset属性を使うように記述変更

AppVeyorBot · 2020-06-28T18:35:31Z

✅ Build sakura 1.0.2866 completed (commit 48a27cc297 by @beru)

「Grep」と「Grep置換」ページに表示するスクリーンショット画像をディスプレイ設定の表示スケール100%でキャプチャしたものに差し替え「Windows 10 でのファイル拡張子関連付け」ページに表示するスクリーンショット画像の上下に余白を確保 strong タグで囲まれた文字の下に2重線が表示されるので、それと画像が重なって表示されてしまわないようにする為

beru · 2020-07-03T15:32:01Z

「Grep」と「Grep置換」ページに表示するスクリーンショット画像を差し替えておきました。

img タグの srcset 属性を使って高DPI環境では元の大きい画像が表示されるようにしましたが、その対応は省いた方が良いという場合は省いておきます。

あと img タグの srcset 属性を使って複数の画像ファイルを使用するとHTMLヘルプファイルにもその画像が含まれてファイルサイズが増大してしまわないか心配しましたが、HTMLヘルプコンパイラがそもそも srcset 属性を解釈しない為か含まれるという事は無いようです。Compile.Log を見ると 82 Graphics と出力されていたので。

AppVeyorBot · 2020-07-03T15:42:16Z

✅ Build sakura 1.0.2868 completed (commit 8da450adfe by @beru)

m-tmatma · 2020-07-04T07:02:08Z

/azp run

azure-pipelines · 2020-07-04T07:02:34Z

Azure Pipelines successfully started running 1 pipeline(s).

berryzplus · 2020-07-04T09:22:20Z

img タグの srcset 属性を使って高DPI環境では元の大きい画像が表示されるようにしましたが、その対応は省いた方が良いという場合は省いておきます。

省いたほうがよいと思います。

元々、大きすぎて見辛い、が問題で、
画像サイズが大きいことに合理的な理由があるか？というと「ない」だと思うので。

beru · 2020-07-04T09:38:01Z

省いたほうがよいと思います。

元々、大きすぎて見辛い、が問題で、
画像サイズが大きいことに合理的な理由があるか？というと「ない」だと思うので。

まぁそうですね。

将来的に高DPIの表示環境が大半を占めるようになったら、HTMLヘルプを見た時に画像が小さ過ぎて見づらいという意見が頻出するかもしれませんが、その時またどうするか考えれば良いですね。

AppVeyorBot · 2020-07-04T10:09:45Z

✅ Build sakura 1.0.2873 completed (commit 3fff2d81af by @beru)

berryzplus

問題ないように思います。

相違点

画像サイズが小さくなった。
windows設定のアクティブカラーが金色から既定の青になった。
画像の上下に余白が追加された。

berryzplus · 2020-07-04T11:44:11Z

help/sakura/res/HLP000374.html

+<style type="text/css">
+div.li200 {
+	margin-top:0.5em;
+	margin-bottom:0.5em


cssセレクタ指定が変です。

div.li200 ← cssクラスli200 を指定された div タグを意味する

9割くらい「元の記述を活かしました」だと思うので、どうだったら良いと思うかだけ書いておきます。

.li200 img { margin-top:0.5em; margin-bottom:0.5em; max-width: 100%; }

クラス名に .li200 が指定されている div タグ側ではなく、子孫セレクタを使って子要素の img タグ側に適用するようにした方がなぜ良いのかについては書かれていないのでよくわかりません。max-width: 100% の効果は良いですね。このページだけでなく他のページでも使うと決めるのであれば使った方が良いと思います。

ところでdivタグのブロックの中にはimgしか配置されていないので、それだけならわざわざdivタグで囲む意味が無さそうです。HTML書く時の癖かもしれないし、後々他の要素を追加する事を考えての事かも知れないですね。まぁ諸々細かい事なんで表示に問題が無ければ別にそのままで良いかなと思います。

何故って、スタイル指定したい対象は img だと思ったからです。

div.li200 を .li200 に変えることによって、div を span に変えても機能するようになります。

まぁ、結論として無視してかまわないくらいに細かいことだと思ってますけどｗ

berryzplus · 2020-07-04T11:44:56Z

help/sakura/res/HLP000374.html

@@ -25,31 +31,31 @@ <h3>関連付け作業</h3>

 1. スタートボタンをクリック または Windowsキーを押す<br>
 2. <strong>設定</strong>ボタンをクリック<br>
-<div class=li200><img src="images/FileAssoc-1-StartMenu.png"           style="zoom:1.0;" /><br></div>
+<div class=li200><img src="images/FileAssoc-1-StartMenu.png"><br></div>


元の記述だと思うので修正不要ですが、<br>要らんですね・・・。

不要そうですね。削除する必要があるかというとそうでもないと思います。

スルーしていいと思いました:smile:

この <br> に表示上の効果を持たせたいなら <br>  などとする必要があるはずです。

beru · 2020-07-04T12:43:58Z

レビューありがとうございました。Merge します。

「Windows 10 でのファイル拡張子関連付け」「Grep」「Grep置換」の画像がやたら大きくて見づらい問題に対処

8ddcb88

beru mentioned this pull request Jun 28, 2020

2.4.1のヘルプ：「Windows 10 でのファイル拡張子関連付け」「Grep」「Grep置換」の画像がやたら大きくて見づらい。 #1325

Closed

berryzplus reviewed Jun 28, 2020

View reviewed changes

「Windows 10 でのファイル拡張子関連付け」ページの画像が大きく表示される問題に対処

63b22f8

表示スケール100%のキャプチャ画像を使うように変更 srcset属性を使うように記述変更

beru added the document ドキュメント label Jul 3, 2020

レビュー指摘対応

af16b9e

berryzplus approved these changes Jul 4, 2020

View reviewed changes

beru merged commit 4cd308f into sakura-editor:master Jul 4, 2020

beru deleted the help_image_too_big branch July 4, 2020 12:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ヘルプの「Windows 10 でのファイル拡張子関連付け」「Grep」「Grep置換」の画像がやたら大きくて見づらい問題に対処 #1328

ヘルプの「Windows 10 でのファイル拡張子関連付け」「Grep」「Grep置換」の画像がやたら大きくて見づらい問題に対処 #1328

beru commented Jun 28, 2020 •

edited

Loading

AppVeyorBot commented Jun 28, 2020

berryzplus left a comment

berryzplus Jun 28, 2020

beru Jun 28, 2020 •

edited

Loading

beru Jun 28, 2020

beru Jun 28, 2020 •

edited

Loading

beru Jun 28, 2020

berryzplus Jun 28, 2020

beru Jun 29, 2020

beru Jun 29, 2020

beru Jun 29, 2020 •

edited

Loading

beru Jul 3, 2020

AppVeyorBot commented Jun 28, 2020

beru commented Jul 3, 2020 •

edited

Loading

AppVeyorBot commented Jul 3, 2020

m-tmatma commented Jul 4, 2020

azure-pipelines bot commented Jul 4, 2020

berryzplus commented Jul 4, 2020

beru commented Jul 4, 2020

AppVeyorBot commented Jul 4, 2020

berryzplus left a comment

berryzplus Jul 4, 2020

beru Jul 4, 2020

berryzplus Jul 4, 2020

berryzplus Jul 4, 2020

beru Jul 4, 2020

berryzplus Jul 4, 2020

beru commented Jul 4, 2020

ヘルプの「Windows 10 でのファイル拡張子関連付け」「Grep」「Grep置換」の画像がやたら大きくて見づらい問題に対処 #1328

ヘルプの「Windows 10 でのファイル拡張子関連付け」「Grep」「Grep置換」の画像がやたら大きくて見づらい問題に対処 #1328

Conversation

beru commented Jun 28, 2020 • edited Loading

PR の目的

カテゴリ

PR の背景

PR のメリット

テスト内容

Windows 10 でのファイル拡張子関連付け

Grep

Grep置換

関連 issue, PR

参考資料

AppVeyorBot commented Jun 28, 2020

berryzplus left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

beru Jun 28, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

beru Jun 28, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

beru Jun 29, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AppVeyorBot commented Jun 28, 2020

beru commented Jul 3, 2020 • edited Loading

AppVeyorBot commented Jul 3, 2020

m-tmatma commented Jul 4, 2020

azure-pipelines bot commented Jul 4, 2020

berryzplus commented Jul 4, 2020

beru commented Jul 4, 2020

AppVeyorBot commented Jul 4, 2020

berryzplus left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

beru commented Jul 4, 2020

beru commented Jun 28, 2020 •

edited

Loading

beru Jun 28, 2020 •

edited

Loading

beru Jun 28, 2020 •

edited

Loading

beru Jun 29, 2020 •

edited

Loading

beru commented Jul 3, 2020 •

edited

Loading