ヘルプ:レイアウト

← ヘルプ:目次

ダイナミックレイアウト

• 姉妹プロジェクト：データ項目

ダイナミックレイアウトとは、動的に適用されるCSSスタイルシートのことです。

例：The Solar System/Chapter 1（英語版）やVoyage à Vénus（仏語版）などにおいて、左マージンにある「Layout x」（仏語版 :Maquette x）のリンクをクリックし、テキストプロパティがどのように各レイアウトに適用されるかを見てください。

ダイナミックレイアウトはPage:名前空間からのトランスクルージョンを利用している全てのページ（『西洋哲學史/上卷』など）に対して有効です。これらのテキストに対し、ユーザーはサイドメニューの"表示オプション"にある種々のレイアウトから選択することが可能です。

良き編集慣行

ダイナミックレイアウトは、フォームと内容の分離が前提です。従ってテキストは、レンダリングに使われるレイアウトについて、いかなる想定もしてはいけません。特にコンテナdiv内や表の内部で、{{Page}}テンプレートを使ったトランスクルージョンをしたり<pages/>タグで囲ったりすべきではありません。

テンプレート

テンプレートは、ダイナミックレイアウトに適合させることができます。例えば、{{Right sidenote}}により作成された側注は、レイアウトに依存する形でレンダリングされます。

テンプレートがレイアウトの想定をする場合には、それはダイナミックレイアウトに適合させることが必須となります。

ダイナミックレイアウトの設定

PageNumber.jsの読み込み

日本語版Wikisourceでダイナミックレイアウト機能を利用するには、PageNumbers.jsを国際版Wikisourceより読み込む必要があります。各利用者用のcommon.jsを開き、以下のコードを入力します。

// サイドメニュー設定
self.ws_messages = { 
	'optlist': '表示オプション',
	'hide_page_numbers': 'ページ番号を表示しない',
	'show_page_numbers': 'ページ番号を表示する',
};
// レイアウト設定
self.ws_layouts = {};
self.ws_layouts['レイアウト1'] = {
	'#text-wrap': 'position:relative; margin-left:3em;',
	'#text-container': '', 
	'#text': '', 
	'.sidenote-right': 'float:right; margin:0.5em; padding:3px; border:solid 1px gray; max-width:9em; text-indent:0em; text-align:left;',
	'.sidenote-left': 'float:left; margin:0.5em; padding:3px; border:solid 1px gray; max-width:9em; text-indent:0em; text-align:left;',
};
self.ws_layouts['レイアウト2'] = {
	'#text-wrap': 'position:relative; margin-left:3em;',
	'#text-container': 'width:36em; margin:0 auto 0 auto;', 
	'#text': 'position:relative;', 
	'.sidenote-right': 'position:absolute; left:37em; width:16em; text-indent:0em; text-align:left;',
	'.sidenote-left': 'position:absolute; left:37em; width:16em; text-indent:0em; text-align:left;',
};
self.ws_layouts['レイアウト3'] = {
	'#text-wrap': 'position:relative; margin-left:3em;',
	'#text-container': 'position:relative; min-width:60em; float:left; width:100%; margin-right:-23em;', 
	'#text': 'margin-right:23em; text-indent:0; padding-left:0; padding-right:0; width:auto; position:relative;',
	'.sidenote-right': 'position:absolute; right:-10em; width:9em; text-indent:0; text-align:left;',
	'.sidenote-left': 'position:absolute; right:-10em; width:9em; text-indent:0; text-align:left;',
};
// スクリプト読み込み
mw.loader.load('//wikisource.org/w/index.php?title=MediaWiki:PageNumbers.js&action=raw&ctype=text/javascript');

ダイナミックレイアウトの書き方

ダイナミックレイアウトは「self.ws_layouts」というJavaScript変数で定義されています。

この変数は辞書型のようなオブジェクトで、各項目がcssプロパティのリストになっています。キーの最初の文字（#または.）に応じて、単一の要素、あるいは要素のクラスにCSSプロパティが適用されます。

ユーザーは、javascriptの環境設定（common.jsなど）においてself.ws_layoutsに要素を追加することにより、自分用のレイアウトを定義することができます。例：

self.ws_layouts['My Layout'] = {
	'#text-wrap': 'position:relative; margin:0 3em;', 
	'#text-container': 'width:36em; margin:0 auto;', 
	'#text': 'text-align:justify;, 
	'#dp-eu': 'position:absolute; right:-20em;top:0;',
	'.sidenote-right': 'position:absolute; left:37em; text-indent:0;',
	'.sidenote-left': 'position:absolute; right:37em; text-indent:0;',
	'.editsection': 'display:none',
	'#headertemplate': '',
};

ダイナミックレイアウトの使い方

サイドバーメニューにある"表示オプション"の直下のリンクを選択することで利用可能なダイナミックレイアウトを一巡することができます。このリンクは現在のレイアウトの名が表示されていて、デフォルトでは"レイアウト1"になっています。クリックするたびに次のレイアウトへ順番にサイクルします；最後のレイアウトに達すると、次のオプションは"レイアウト1"となります。

{{default layout}}テンプレートでページに合わせた特定のダイナミックレイアウトを設定することができます。ページが開くと通常のデフォルトの代わりに特別のレイアウトで開かれます。その場合でも、読者は"表示オプション"メニューで他のレイアウトを順に試すこともできます。レイアウト1については、すでにWikisourceプロジェクト全体に対するデフォルトレイアウトであるので、この作業は不要です、

例えば: {{default layout|Layout 2}} とすれば、デフォルトのレイアウトがレイアウト2に設定されます。

利用できるレイアウト

上記のコードをcommon.jsに入力した場合、以下のレイアウトが利用できます。

レイアウト名	説明
レイアウト1	オプションを設定していない場合の標準設定です。文字は右端まで達し、側注は枠線付きボックスとして表示されます。
レイアウト2	文字は中央部に固定幅のカラムで表示され、側注はページ右側の余白に表示されます。英語版、フランス語版、およびイタリア語版でも同様のレイアウトが利用できます。
レイアウト3	テキストは左側、側注は右側の余白に表示されます。英語版、およびドイツ語版でも同様のレイアウトが利用できます。