<!DOCTYPE html> <html lang=“ja”> <head>
<meta charset="UTF-8" /> <title>Re:VIEWレイアウトデザイナ</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" /> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://code.createjs.com/1.0.0/easeljs.min.js" charset="UTF-8"></script> <script src="review-layout-design.js" charset="UTF-8"></script>
</head> <body onload=“init();”> <div class=“container”> <form method=“post” name=“reviewform” action=“/finish”> <div class=“form-group row”>
<div class="col-auto"> <label for="cls" data-toggle="tooltip" data-placement="bottom" title="文書基本テンプレート。jsbookはよく使われているクラス。jlreqは紙面をカスタマイズしやすい新しいクラス">クラス</label> <select id="cls" name="cls" class="btn btn-outline-dark" onchange="change_cls();"> <option value="review-jsbook" selected="true">review-jsbook (jsbook派生)</option> <option value="review-jlreq">review-jlreq (jlreq派生)</option> </select> </div> <div class="col-auto"> <label for="papersize" data-toggle="tooltip" data-placement="bottom" title="仕上がりサイズ。他のサイズ指定はsty/README.md参照">紙のサイズ</label> <select id="papersize" name="papersize" class="btn btn-outline-dark" onchange="change_paper();"> <option value="a5" selected="true">A5 (148mm×210mm)</option> <option value="b5">B5 (182mm×257mm)</option> <option value="a4">A4 (210mm×297mm)</option> </select> </div> <div class="col-auto"> <input type="button" id="reset" name="reset" class="btn btn-danger" value="初期値に戻す" onclick="reset_all();" data-toggle="tooltip" data-placement="bottom" title="クラスおよび紙に基づく初期値に復帰" /> </div>
</div> <hr />
<div class=“form-group row”>
<div class="col-auto" style="padding-right: 0;"> <label for="fontsize" class="col-form-label" data-toggle="tooltip" data-placement="bottom" title="基本の文字の大きさ。review-jsbookでは8,9,10,11,12,14,17,20,21,25,30,36,43のみ">文字サイズ</label> </div> <div class="col-auto"> <input type="number" id="fontsize" name="fontsize" class="form-control" style="width: 4em;" min="0" max="100" step="any" onchange="change_fontsize();" /> </div> <label for="fontsize" class="col-form-label">pt </label> <label for="baselineskip" class="col-form-label" data-toggle="tooltip" data-placement="bottom" title="行のベースライン間の幅">行送り</label> <div class="col-auto"> <input type="number" id="baselineskip" name="baselineskip" class="form-control" style="width: 4em;" min="0" max="100" step="any" onchange="change_baselineskip();" /> </div> <label for="baselineskip" class="col-form-label">pt</label> <div class="col-auto"> <label class="col-form-label">(<span id="fontsize_q" data-toggle="tooltip" data-placement="bottom" title="1Q=1H=0.25mm。1pt=0.35146mm(英米ポイント)"></span>)</label> </div>
</div>
<div class=“form-group row”>
<div class="col-auto"> <input type="number" id="line_length" name="line_length" class="form-control" min="1" max="400" step="1" style="width: 4em;" onchange="change_line_length();" /> </div> <label for="line_length" class="col-form-label" data-toggle="tooltip" data-placement="bottom" title="和文字での1行あたりの文字数">文字 ×</label> <div class="col-auto"> <input type="number" id="number_of_lines" name="number_of_lines" class="form-control" min="1" max="400" step="1" style="width: 4em;" onchange="change_number_of_lines();" /> </div> <label for="number_of_lines" class="col-form-label" data-toggle="tooltip" data-placement="bottom" title="ページあたりの行の数">行</label> <div class="col-auto"> <label class="col-form-label">(版面 <span id="hanmen" data-toggle="tooltip" data-placement="bottom" title="主となるコンテンツの入る領域。下画面の方眼の箇所"></span>)</label> </div>
</div>
<hr/>
<div class=“form-group row”>
<div class="col-auto" style="padding-right: 0;"> <label for="gutter" class="col-form-label" data-toggle="tooltip" data-placement="bottom" title="ページ内側から版面までの余白">ノド</label> </div> <div class="col-auto"> <input type="number" id="gutter" name="gutter" class="form-control" style="width: 5em;" min="0" max="1000" step="any" onchange="change_gutter();" /> </div> <label for="gutter" class="col-form-label">mm </label> <label for="edge" class="col-form-label" data-toggle="tooltip" data-placement="bottom" title="ページ外側から版面までの余白。ノドと版面横幅から導出">小口</label> <div class="col-auto"> <input type="number" id="edge" name="edge" class="form-control" style="width: 5em;" min="0" max="1000" step="any" readonly="true" /> </div> <label for="edge" class="col-form-label">mm </label> <label for="head_space" class="col-form-label" data-toggle="tooltip" data-placement="bottom" title="ページ上側から版面までの余白">天 </label> <div class="col-auto"> <input type="number" id="head_space" name="head_space" class="form-control" style="width: 5em;" min="0" max="1000" step="any" onchange="change_head_space();" /> </div> <label for="head_space" class="col-form-label">mm </label> <label for="bottom_space" class="col-form-label" data-toggle="tooltip" data-placement="bottom" title="ページ下側から版面までの余白。天と版面縦幅から導出">地 </label> <div class="col-auto"> <input type="number" id="bottom_space" name="bottom_space" class="form-control" style="width: 5em;" min="0" max="1000" step="any" readonly="true" /> </div> <label for="bottom_space" class="col-form-label">mm</label>
</div>
<div class=“form-group row”>
<div class="col-auto" style="padding-right: 0;"> <label for="headsep" class="col-form-label" data-toggle="tooltip" data-placement="bottom" title="ヘッダ領域下部と版面上との間隔">ヘッダ下/本文上間隔</label> </div> <div class="col-auto"> <input type="number" id="headsep" name="headsep" class="form-control" style="width: 4em;" min="-1000" max="1000" step="any" onchange="change_headsep();" /> </div> <label for="headsep" class="col-form-label">mm </label> <label for="footskip" class="col-form-label" data-toggle="tooltip" data-placement="bottom" title="フッタ領域下部と版面下との間隔">本文下/フッタ下間隔</label> <div class="col-auto"> <input type="number" id="footskip" name="footskip" class="form-control" style="width: 4em;" min="-1000" max="1000" step="any" onchange="change_footskip();" /> </div> <label for="footskip" class="col-form-label">mm</label>
</div> <hr/>
<div class=“form-group row”>
<div class="col-auto"> <input type="button" id="showdetails" name="showdatails" class="btn btn-secondary" value="詳細設定を表示" onclick="show_details();" data-toggle="tooltip" data-placement="bottom" title="版面設計以外の設定" /> </div> <div class="col-auto"> <input type="button" id="fordoujin" name="fordoujin" class="btn btn-secondary" value="技術系同人誌印刷の設定" onclick="set_doujin();" data-toggle="tooltip" data-placement="bottom" title="技術系同人誌の印刷所でよく使われる設定をマーク" /> </div>
</div>
<div id=“details”>
<div class="form-group form-check"> <input type="checkbox" id="ebook" name="ebook" class="form-check-input" checked="true" /> <label for="ebook" class="form-check-label" data-toggle="tooltip" data-placement="bottom" title="表紙あり・トンボなしの電子配布版のための設定ファイルを準備">電子版の設定ファイル (config-ebook.yml) も作成</label> </div> <div class="form-group form-check"> <input type="checkbox" id="openany" name="openany" class="form-check-input" /> <label for="openany" data-toggle="tooltip" data-placement="bottom" title="標準では章や目次は常に奇数(右)ページ開始">章や目次が左右どちらのページからも始まることを許可する</label> </div> <div class="form-group form-check"> <input type="checkbox" id="fleqno" name="fleqno" class="form-check-input" /> <label for="fleqno" class="form-check-label" data-toggle="tooltip" data-placement="bottom" title="標準では式は左右中央揃え">数式を左寄せにする</label> </div> <div class="form-group row"> <div class="col-auto"> <label for="startpage" class="col-form-label" data-toggle="tooltip" data-placement="bottom" title="通常は1(本文から数えたい場合)または3(表紙から数えたい場合)">冒頭ページ番号</label> </div> <div class="col-auto"> <input type="number" id="startpage" name="startpage" class="form-control" style="width: 4em;" value="1" min="1" max="999" /> </div> </div> <div class="form-group form-check"> <input type="checkbox" id="serial_pagination" name="serial_pagination" class="form-check-input" /> <label for="serial_pagination" class="form-check-label" data-toggle="tooltip" data-placement="bottom" title="標準では前付け(PREDEF)部分はローマ数字">最初からページ番号にアラビア数字を使う</label> </div> <div class="form-group form-check"> <input type="checkbox" id="hiddenfolio" name="hiddenfolio" class="form-check-input" /> <label for="hiddenfolio" class="form-check-label" data-toggle="tooltip" data-placement="bottom" title="ノドのきわにページ番号を埋め込む。印刷所によっては隠しノンブルは不要">ノドへの隠しノンブルの設置 (日光企画等)</label> </div> <div class="form-group row"> <div class="col-auto"> <label for="tombopaper" class="form-check-label" data-toggle="tooltip" data-placement="bottom" title="「自動」の場合は仕上がりのひとまわり大きな紙が選ばれる">トンボ付きの紙サイズ</label> </div> <div class="col-auto"> <select id="tombopaper" name="tombopaper" class="btn btn-outline-dark" onchange="change_tombopaper();"> <option value="auto">自動</option> <option value="b5">B5</option> <option value="a4">A4</option> <option value="b4">B4</option> <option value="a3">A3</option> </select> </div> </div> <div class="form-group row"> <div class="col-auto"> <label for="bleed_margin" class="col-form-label" data-toggle="tooltip" data-placement="bottom" title="通常は3。印刷所によって異なることがある">塗り足し幅(mm)</label> </div> <div class="col-auto"> <input type="number" id="bleed_margin" name="bleed_margin" style="width: 4em;" value="3" min="1" max="8" class="form-control" /> </div> </div>
</div>
<div id=“result” style=“display: none;”>
print: <input type="text" id="result_print" name="result_print" value="" size="80" /><br/> ebook: <input type="text" id="result_ebook" name="result_ebook" value="" size="80" />
</div>
<hr/> <input type=“button” class=“btn btn-success” value=“作成” onclick=“update_result();” data-toggle=“tooltip” data-placement=“bottom” title=“入力に基づいて設定ファイルを作成”/> </form> <hr/> <canvas id=“mainCanvas”></canvas> </div> </body> </html>