有限会社Willさんいん ホーム

サイトマップ

お問い合わせ

0852-28-6220(平日 9時30分から17時30分)

このページの位置: Home > フロントエンドエンジニアのblog > pre 要素(整形済みテキスト)の折り返しを切り替え可能にする

フロントエンドエンジニアのblog

RSS

pre 要素(整形済みテキスト)の折り返しを切り替え可能にする

この記事は2015年7月25日に書かれたものです。情報が古い可能性がありますのでご注意ください。

ソースコードを掲載する時に code 要素と併せて利用する pre 要素(整形済みテキスト)。通常は折り返さずに表示されますので、CSS で overflow: auto; として横スクロールバーを表示するようにしている場合が多いかと思います。

敢えて CSS で記述していなくても、ソースコードをハイライトして読みやすく表示させる SyntaxHighlighter などの JavaScript ライブラリを使うことで、同等の表示になっている場合もあります。

ちなみにこの blog では、ソースコードをハイライト表示するために google-code-prettify を利用しています。

pre 要素内で overflow: auto; によりスクロールが発生した場合(以降、これを “擬似的なインラインフレーム” と称します)、もちろんマウスで操作すれば見えていなかった部分をスクロールして表示することができますが、キーボード操作ではアクセシビリティ上の問題があります。

多くのブラウザでは、その中に a 要素(リンク)がない限り、キーボードで擬似的なインラインフレームにフォーカスすることができませんので、キーボード操作ではスクロールができず、見えない部分を確認することができないからです。

キーボード操作でスクロールを可能にする手段として、Internet Explorer 8 以上では [F7] キーを押して “カーソル ブラウズ” を有効にすることで、矢印キーを使って擬似的なインラインフレームにカーソルを移動し、矢印キーでスクロールすることができます。でも、矢印キーによるカーソルの移動が一字ずつですのでかなり煩わしいです。

一方、Firefox では “キャレットブラウズモード” という、IE の “カーソル ブラウズ” と同様の機能がありますが、実はそのような機能を使わなくても、標準で擬似的なインラインフレームにフォーカスすることができます。[Tab] キーを使ってリンクを辿っていく中で、擬似的なインラインフレームがあるとそこにフォーカスされるのです。それも、overflow: auto; 全てがフォーカスされるのではなく、スクロールが発生する場合のみフォーカスされるという賢さです。

フォーカスされたら左右の矢印キーでスクロールできます。 “キャレットブラウズモード” や IE の “カーソル ブラウズ” と違って、1回のキー操作で数文字分スクロールできますので煩わしさはありません。

なお、擬似的なインラインフレームにフォーカスされても、視覚的にそれを確認することができませんので、Firefox 限定になりますが、pre:focus セレクタで枠線や背景など、フォーカスされたときのスタイルを設定するとよいと思います。この blog は、枠線の色を濃く表示するように設定しています。

その他、Chrome や Safari、Opera ではプラグイン等を使わない限り、擬似的なインラインフレームのスクロールは難しいようです。

そのような状況から、最近までこの blog では pre 要素内でも強制的に折り返して表示するようにしていました。pre 要素を折り返すための CSS は次のとおりです。(古いブラウザへの対応は省いています)

pre {
  overflow-x: visible;
  white-space: pre-wrap;
}

しかし、フロントエンドエンジニアの立場からみると、強制的に折り返されているコードは読みにくく、スクロールしてでも折り返さないで表示されていた方が分かりやすいという面もあります。

前述の SyntaxHighlighter には、コードを別ウィンドウで表示したり、コピーしたりできるボタンを表示することができますが、これはオンマウスで表示されるもので、キーボード操作では表示されませんので、この問題の解決にはなりません。

そこで(前置きがずいぶん長くなりましたが)、デフォルトはコードを折り返さないで表示し、マウスでもキーボードでも操作可能な折り返し表示を切り替える機能を、jQuery を使って設置してみました。下記のコードもそれが適用されている筈です。

jQuery(function($){ 
  $('pre').before('<div class="codeWrap"><a href="javascript:void(0)">[コードを折り返して表示]</a></div>');
  $('div.codeWrap').toggle(function(){
    $(this).next('pre').css({
      'overflow-x':'visible',
      'white-space':'pre-wrap',
    });
    $(this).children('a').text('[コードを折り返さないで表示]');
    return false;
  }, function(){
    $(this).next('pre').css({
      'overflow-x':'auto',
      'white-space':'pre',
    });
    $(this).children('a').text('[コードを折り返して表示]');
    return false;
  });
})

pre 要素の前に切り替えのための要素を追加し、これに対するアクションを、toggle メソッドで pre 要素の CSS の書き換えとテキストの書き換えを繰り替えすようにしています。

切り替えのための要素を <a href="javascript:void(0)">〜</a> で囲んでいるのは、リンクと明示することでキーボードでフォーカスできるからです。スクリーンリーダー利用者には無意味なリンクになりますが。

ちなみに、いろいろな JavaScript のライブラリで、クリックやマウスオーバーに反応させるものがありますが、前述の SyntaxHighlighter のボタンのようにキーボードで操作できないものが多く、使うのをためらうことも多いです。

これがベストかどうかはわかりませんが、少なくとも、折り返されないためにキーボード操作で見えない部分を確認することができない問題と、折り返して表示されているとコードが分かりにくいとう問題の両方を解決することはできたのではないかと思います。

この記事へのフィードバック

Facebook のコメントです。

コメントを残す

この記事のトラックバックURL:
https://www.will3in.co.jp/blog/article/switch-wrap-pre-text/trackback/

このページの先頭へ