jnobuyukiのブログ

JavaScriptとR言語を中心に研究活動に役立つwebアプリケーション技術について考えていきます。twitter ID: @j_nobuyuki

Reveal.js 文字列幅(折り返し位置)の変更

Reveal.jsはスライドプレゼンテーションのためのJavaScriptライブラリです。
以前、Reveal.jsを利用したプレゼンテーション - jnobuyukiのブログで基本的な使い方を紹介しました。

今回は、もっとよいプレゼンを目指すためのTipsです。

画面の幅に対しての文字列の幅

デフォルトのパラメータを使用するだけで、快適なプレゼンテーションを行えます。スライド間の遷移や図、D3.jsを利用して描画したSVGオブジェクトなどどんなDOMオブジェクトもほぼ狙い通りに提示できます。唯一、不満だったのは、文字列の幅が狭いと感じることです。私はプレゼンの際、1920x1080のワイドスクリーンに設定したラップトップを使っています。それでプレゼンでReveal.jsを利用すると、画面に対して文字列の幅は半分くらいしかないように見えます。もっと両端に近いところまで提示したくてもできませんでした。そこで、今回はどうやって文字列の幅を変更するかを紹介します。

設定はどこで?

Reveal.jsでは、reveal.jsというライブラリの本体以外にThemeとしてCSSファイルを併用しています。てっきりCSSファイルのどこかにあるのだと思っていたのですが、いざ探して見るとbackgroundの幅は100%と定義されているだけです。色々探して見たところ、実はReveal.jsの方で定義されていました。
ファイルのかなり前の方、以下のコードです。

var Reveal = (function(){

        'use strict';

	var SLIDES_SELECTOR = '.reveal .slides section',
	HORIZONTAL_SLIDES_SELECTOR = '.reveal .slides>section',
	VERTICAL_SLIDES_SELECTOR = '.reveal .slides>section.present>section',
	HOME_SLIDE_SELECTOR = '.reveal .slides>section:first-of-type',

	// Configurations defaults, can be overridden at initialization time
	config = {

	// The "normal" size of the presentation, aspect ratio will be preserved
	// when the presentation is scaled to fit different resolutions
	width: 960,
	height: 700,

	// Factor of the display size that should remain empty around the content
	margin: 0.1,

}

幅と高さがそれぞれwidthとheightで設定されています。デフォルトでは、スライドの横幅が960pxに設定されているようです。画面の半分くらいにしか文字が表示されないという見積もりは正確でした。

修正前後の比較

では、デフォルトの時の文字列幅と1.5倍に設定したときを比べてみます。

デフォルトのスライド
f:id:jnobuyuki:20140708005352p:plain

次は文字列幅を1.5倍(1440px)にした場合です。
f:id:jnobuyuki:20140708005441p:plain

最初2行で提示されていたものが、1行で済みました。どこまで1行で表示できるのかを確認するため、少し言葉を足して見ましょう。

f:id:jnobuyuki:20140708005602p:plain

1.5倍にはなっていないものの確実に幅は広がっています。また、同じフォントが小さめに提示されていることにも注意が必要です。

追記(2014/7/8):マージンの調整

その後、画面幅のパラメータになりそうなものを探しところmarginというのを見つけました。デフォルトでは0.1となっていますが、これを0にすることで最初に設定したwidth全体を使えるようになるみたいです。