novel-writerでA4横 40文字40行のPDFを作るカスタムCSS

novel-writerはVivliostyleを用いてCSSから文字組版を行います。

公募などで提出に使われるA4横、40文字40行の組版を行うカスタムCSSを書きました。プロジェクトルートにcssフォルダを作り、その中に以下のprint.cssを配置してPDFプレビュー、出力を行なってください。

@charset "UTF-8";
:root {
  --paper-width: 297mm;
  --paper-height: 210mm;
  --side-margin: 15mm;
  --font-size: calc((297mm - var(--side-margin) * 2) / 40 / 1.75);
  --paragraph-length: calc(var(--font-size) * 40);
  --project-title: '提出作品';
}
html {
orphans: 1;
widows: 1;
color: black;
}

body{
  writing-mode: vertical-rl;
  color: black;
}

* {
margin: 0;
padding: 0;
}

@page {
  size: var(--paper-width) var(--paper-height);
  block-size: calc(var(--font-size) * 1.75 * 40 + (var(--font-size) * 0.4));
  margin-top: calc((var(--paper-height) - var(--paragraph-length)) * 0.4);
  margin-bottom: calc((var(--paper-height) - var(--paragraph-length)) * 0.6);
  margin-left: var(--side-margin);
  margin-right: var(--side-margin);
  /* 以下、マージンボックスに継承される */
  font-size: 6pt;
  font-family: "游明朝", "YuMincho", serif;
  /* 本来不要（<span class="smaller"><span class="smaller">ルート要素の指定が継承される</span></span>）だが、現時点のvivliostyle.jsの制限により必要 */
  vertical-align: top;
}

@page : first {
  counter-reset: page 0;
}

@page :left {
  margin-left: var(--side-margin);
  margin-right: var(--side-margin);
  @bottom-center {
    content: var(--project-title)" 40字×40行 "counter(page)"/"counter(pages);
    margin-bottom: 6mm;
    writing-mode: horizontal-tb;
    font-size:10q;
    /* CSS仕様上は@pageルール内に書けばよいが、現時点のvivliostyle.jsの制限によりここに書く */
}
}

@page :right {
  margin-left: var(--side-margin);
  margin-right: var(--side-margin);
  /* border-bottom: 1pt solid black; */
/* 右下ノンブル */
@bottom-center {
    content: var(--project-title)" 40字×40行 "counter(page)"/"counter(pages);
    margin-bottom: 6mm;
    writing-mode: horizontal-tb;
    font-size:10q;
    /* CSS仕様上は@pageルール内に書けばよいが、現時点のvivliostyle.jsの制限によりここに書く */
}
}

html {
font-family: "游明朝", "YuMincho", serif;
font-weight: Medium;
text-align: justify;
hanging-punctuation: allow-end;
text-spacing: none;
}

body{
  break-before: left;

  
}

div#draft{
  inline-size: calc(165.76mm + 0.5em);
  margin-inline-start: auto;
  margin-inline-end: auto;
}

h1 {
  /* 五行トリ2倍角 */
  display:flex;
  align-items: center;
  block-size: calc(var(--font-size) * 1.75 * 5);
  /* フォント */
  font-weight: Extrabold;
  letter-spacing: 0.25em;
  font-size: calc(var(--font-size) * 2);
  /* 字下げ */
  text-indent: 0;
  /* 直後の改ページ・改段禁止 */
}

h2 {
  /* 二行トリ1.6倍角 */
  display:flex;
  align-items: center;
  block-size: calc(var(--font-size) * 1.75 * 2);
  /* フォント */
  font-weight: Extrabold;
  font-size: calc(var(--font-size) * 1.6);
  /* 字下げ */
  text-indent: calc(var(--font-size) * 1 * 1);
  /* 直後の改ページ・改段禁止 */
}

h3 {
  /* 一行トリ1.2倍角 */
  display:flex;
  align-items: center;
  block-size: calc(var(--font-size) * 1.75);
  /* フォント */
  font-weight: demi-bold;
  font-size: calc(var(--font-size) * 1.2);
  /* 字下げ */
  text-indent: calc(var(--font-size) * 1 * 1);
  /* 直後の改ページ・改段禁止 */
  page-break-after:avoid;
}

h4,h5,h6 {
  /* 一行トリ1.2倍角 */
  display:flex;
  align-items: center;
  block-size: calc(var(--font-size) * 1.75);
  /* フォント */
  font-weight: demi-bold;
  font-size: calc(var(--font-size) * 1);
  /* 字下げ */
  text-indent: calc(var(--font-size) * 1 * 1);
  /* 直後の改ページ・改段禁止 */
  page-break-after:avoid;
}

h1 + h2 {
margin-block-start: 16pt;
}

p + h3 {
  margin-block-start: calc(var(--font-size) * 1.75);
}

p.ruby-offset {
  margin-right: -0.25em;
}

body.vertical-rl ruby > rt {
  font-size: 0.5em;
  width: 0.75em;
}

body.horizontal-tb ruby > rt {
  font-size: 0.5em;
  width: 0.75em;
}

p {
  font-size: var(--font-size);
  line-height: 1.75;
  inline-size: var(--paragraph-length);
  text-indent: 0em;
  hanging-punctuation: allow-end;
  line-break:strict;
  page-break-inside: auto;
}

div.indent-1 p:first-of-type, div.indent-2 p:first-of-type, div.indent-3 p:first-of-type{
padding-block-start: calc( var(--font-size) * 1.75);
}

div.indent-1 p:last-of-type, div.indent-2 p:last-of-type, div.indent-3 p:last-of-type{
padding-block-end: calc( var(--font-size) * 1.75);
}


div.indent-1 p{
inline-size: calc( calc(165.76mm + 0.5em) - var(--font-size));
padding-inline-start: calc( var(--font-size));
}

div.indent-2 p{
inline-size: calc( calc(165.76mm + 0.5em) - (var(--font-size) * 2));
padding-inline-start: calc(var(--font-size) * 2);
}

div.indent-3 p{
inline-size: calc( calc(165.76mm + 0.5em) - (var(--font-size) * 3));
padding-inline-start: calc(var(--font-size) * 3);
}

p.goth {
margin-inline-start: 3em;
font-family: "游ゴシック", "YuGothic", san-serif;
margin-block-start: 1em;
margin-block-end: 1em;
}

p.align-rb {
text-align: end;
}

p.goth + p.goth {
margin-block-start: -1em;
}

div.codes p {
text-orientation: sideways;
}

p.star {
text-indent: 3em;
margin-right: 16pt;
margin-left: 16pt;
}

hr {
border: none;
border-right: 1pt solid black;
block-size: 6em;
margin: auto 8.5pt;
}

/* 縦中横 */
.tcy {
-webkit-text-combine: horizontal;
text-combine: horizontal;
-ms-text-combine-horizontal: all;
text-combine-horizontal: digit 2;
text-combine-upright: digit 2;
}

span.bottom {
display: block;
float: right;
}

span.bottom-1 {
display: block;
float: right;
padding-inline-end: 1em;
}

span.bottom-2 {
display: block;
float: right;
padding-inline-end: 2em;
}

span.bottom-3 {
display: block;
float: right;
padding-inline-end: 3em;
}
  

/* 圏点（<span class="smaller">ゴマ</span>） */
em.side-dot, em.sesame_dot {
font-style: normal;
-webkit-text-emphasis-style: sesame;
text-emphasis-style: sesame;
margin-block-start: -1em;
display: inline-block;
}

/*著作者*/
.author {
position: absolute;
bottom: 0;
font-size: 8.5pt;
margin-inline-start: 50pt;
letter-spacing: normal;
}

/*画像＋キャプション*/
figure {
display: block;
width: 236pt;
-ms-writing-mode: lr-tb;
-webkit-writing-mode: horizontal-tb;
writing-mode: horizontal-tb;
}

figure img {
width: 100%;
block-size: auto;
vertical-align: bottom;
}

figcaption {
text-align: start;
font-size: 7pt;
}

p.blank {
  color:transparent;
}

span.blank{
display:none;
}