2.12で2.10より「確定」などのボタンが小さくなっている

[imamura623]

■現象

2.12以降で2.10より「確定」などのボタンが小さくなっている。

■原因

XHTML+CSS化の際にボタンの文言にあったスペースを削除したため。

■修正内容

以下の条件に従って文言を統一する。

• 文字の前後・文字の間に全角スペースを入れるもの
  • 二文字のボタン
  • 携帯ページは「はい」のみ
• 文字の前後に全角スペースを入れるもの
  • 三文字のボタン
  • 携帯ページは「いいえ」のみ

上記のもの以外はスペースなしとする。

■関連情報

元のDescription

​http://sns.openpne.jp/?m=pc&a=page_fh_diary&target_c_diary_id=17430 より転記

2.12でボタンが小さくなってしまって押しづらくなっている。
特に「確認」「修正」「検索」といった2文字のボタン。

[nakasone]

以下の条件に従って文言を統一します。

■文字の前後・文字の間に全角スペースを入れるもの

• 二文字のボタンである
• 携帯ページは「はい」のみ

■文字の前後に全角スペースを入れるもの

• 「いいえ」のボタン

上記のもの以外はスペースなしとします。

[nakasone]

以下のリビジョンで修正しました。ご確認ください。

• 2.12.x - r8142
• trunk - r8143

[ebihara]

• 以下にスペースが入っていません

  webapp/modules/portal/templates/edit_portal_image.tpl
  72:<span class="textBtnS"><button type="button" onclick="insertImageTagToParentWindow('({$item.image_filename})')">挿入</button></span>
  73:<span class="textBtnS"><button type="button" onclick="deletePortalImage('({$item.image_filename})')">削除</button></span>
  

• 携帯版で全角スペースを入れる対象を「はい」「いいえ」のみにした理由について明記してください

[nakasone]

以下のリビジョンで修正しました。ご確認ください。

• 2.12.x - r8178
• trunk - r8179

携帯版で全角スペースを入れる対象を「はい」「いいえ」のみにした理由について明記してください

• 携帯版では2.10と2.12で文言の変更が無く、文言もそのように統一されていたため

[takai]

修正内容についてXHTML+CSSの観点からコメントしておきます。

本件修正前の状況

• <input type="submit" value="作成" /> のようにvalue属性値に文言が入っている。
  • つまり、見栄えのための半角スペース、全角スペースが入っていない。

本件の内容

• 理想的な（使いやすい）サイズに対してボタンが小さい
  • 押しにくい
  • （読みにくい、という問題はないと思われる）

考えられる対応

• CSSで制御する
  • widthプロパティ
  • min-widthプロパティ
  • padding(-left, -right)プロパティ
  • letter-spacingプロパティ
  • word-spacingプロパティ
• value="　対　応　" のようにスペース文字を含む（半角、全角は好きなように）
• <input type="image" src="ボタン画像" alt="作成" /> のようにイメージボタンにする
  • ※name属性やvalue属性も付加します

考察

本来であればCSSで対応すべきだが、次のような問題がある。

• letter-spacingプロパティで文字間を制御するにも、例えば「2文字のボタン」と「5文字のボタン」で使いやすいボタンの幅（文字間）が同じとは限らない
• 各種ブラウザでletter-spacingプロパティの実装が異なる（仕様がUA依存としている）
• width, paddingプロパティなどでも、letter-spacingと同様の理由で簡単には対応できない

font-sizeを上げるといった対応も考えられるが、各種ブラウザでボタンを同様の見栄え（使いやすい大きさ）にすることは難しい。

value属性値の文言にスペースを含む対応については、HTMLの観点からは不適切だが、理想的な結果を得るための方法としては候補として考えられる。これによるデメリットを挙げる。

• 論理的な文言として意味が通じなくなる
  • 例えば音声ブラウザでは適切な読み上げに支障が生じ得る
• 文字列として参照できなくなる（「作成」と「作　成」は異なる文字列）
  • 例えばソースコードを検索したときにヒットしなくなる

逆に言えば、直接的なデメリットはこの程度しかないと考えられる。この点が問題とならないのであれば対応として有効であると言える。（※後者の問題を解決する方法として、スペース文字の付加を動的に行う方法が考えられるが、その処理コストを考えると不適だと思われる）

イメージボタンにする対応については、文言はalt属性として意味付けでき、見栄えは画像となるため理想的なボタンを実現できる。この方法はHTMLの観点からは最も良いと考えられる。

修正作業に関する考察

value属性値にスペースを含む場合

• スペースを含む規則を考える必要がある
  • どのようにスペースを付加すると「使いやすいボタン」になるのかを考える必要がある
  • 各種ブラウザで「使いやすいボタン」になっているか確認する必要がある
    • ボタン文字列の横の余白（横padding相当）はブラウザによって異なる

イメージボタンを用意する場合

• 各文言に対して画像を用意する必要がある
  • ボタン文字列のリストアップが必要になる

本チケットに関してはvalue属性値にスペースを含む方法でよいと思います。

[kiwa]

PC版について

• 文字の前後・文字の間に全角スペースを入れるもの
  • 二文字のボタン
• 文字の前後に全角スペースを入れるもの
  • 三文字のボタン

ボタンの大きさ的にも妥当な判断かと思います。ざっと見てみたところ問題はなさそうです。

携帯版について

• 文字の前後・文字の間に全角スペースを入れるもの
  • 携帯ページは「はい」のみ
• 文字の前後に全角スペースを入れるもの
  • 携帯ページは「いいえ」のみ

comment:6 にてこの判断の理由を「携帯版では2.10と2.12で文言の変更が無く、文言もそのように統一されていたため」と書かれていますが、そもそも2.10→2.12で変更されていない時点でこのチケットの範囲外かと思われます。また、大半の携帯はカーソルで「クリック」するわけではないので、ボタンが小さいとかはあまり関係ありません。見栄えの問題で改善を行うのであれば、縦に2つ並ぶsubmitボタンは「編集」「削除」や「編集」「ｷｬﾝｾﾙ」などもあるので、「はい」「いいえ」以外の検討も行う必要があると思います。

結論として、2.13.2の段階ではこのチケットで携帯版の修正を抜いた状態で取り込み、携帯版の修正は、必要であれば別チケットで対応するべきかと思います。

[ebihara]

Replying to kiwa:

結論として、2.13.2の段階ではこのチケットで携帯版の修正を抜いた状態で取り込み、携帯版の修正は、必要であれば別チケットで対応するべきかと思います。

とりあえずその対処で行きましょう。引き受けます。

[ebihara]

以下のリビジョンで携帯版への変更を取り消しました。

• 2.12.x - r8241
• trunk - r8242

[kiwa]

変更内容確認しました。問題ありません。