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

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

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

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

デフォルトのパラメータを使用するだけで、快適なプレゼンテーションを行えます。スライド間の遷移や図、D3.jsを利用して描画したSVGオブジェクトなどどんなDOMオブジェクトもほぼ狙い通りに提示できます。唯一、不満だったのは、文字列の幅が狭いと感じることです。私はプレゼンの際、1920ｘ1080のワイドスクリーンに設定したラップトップを使っています。それでプレゼンで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に設定されているようです。画面の半分くらいにしか文字が表示されないという見積もりは正確でした。