SSブログ
前の5件 | -

Vivliostyle-CLIで作ったドキュメントの章を追加する [Vivliostyle]

仕事が忙しく、だいぶ間が空いてしまいましたが、 Vivliostyle の続きをします。すっかり忘れてしまっていて、思い出すのが大変でした。

前回は、Vivliostyle で作ったドキュメントに表紙を作りました。今回は、Vivliostyle で作ったドキュメントに章を追加します。HTMLに文章を追加します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>吾輩はヌコである</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="mybook1.css" />
  </head>
  <body>
    <h1>吾輩はヌコである</h1>
    <div class="subtitle">ヌコと書生の物語</div>
    <h2>はじめての出会い</h2>
    <p>どこで生れたかとんと見当がつかぬ。
       何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
       吾輩はここで始めて人間というものを見た。
       しかもあとで聞くとそれは書生という人間で一番獰悪な種族であったそうだ。
       この書生というのは時々我々を捕つかまえて煮て食うという話である。
    </p>
    <h2>年賀状</h2>
    <p>吾輩は新年来多少有名になったので、猫ながらちょっと鼻が高く感ぜらるるのはありがたい。
       元朝早々主人の許もとへ一枚の絵端書えはがきが来た。
       これは彼の交友某画家からの年始状であるが、上部を赤、下部を深緑ふかみどりで塗って、
       その真中に一の動物が蹲踞うずくまっているところをパステルで書いてある。
       主人は例の書斎でこの絵を、横から見たり、竪たてから眺めたりして、うまい色だなという。
       すでに一応感服したものだから、もうやめにするかと思うとやはり横から見たり、竪から見たりしている。
    </p>
  </body>
 </html>
CSS は、前回の飾り付けデザインをそのまま流用して章飾りを作ります。「h2」タグを章にしています。
@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");

* {
    box-sizing: border-box; /* 要素の計算方法を指定 */
    /* boder-box は、子要素は親要素のサイズに制約され、*/
    /* ボックスの幅を指定できる */
}

@page:nth(1) {
    margin: 0;
    background-color: #DFDBE5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E");
    @bottom-center {
        content: none;
    }
}

@page {
    size: 148mm 210mm; /* A4 */
    font-size: 10Q; /* 1Q = 0.25mm */
    /* ボトムセンターにページ番号を設定 */
    @bottom-center { content: counter(page); } 
}

@page: left { /* 左ページを設定 */
    /* 天地のマージン */
    margin-block: 15mm;  
    /* 小口、ノドのマージン */
    margin-inline: 16mm 18.25mm; 
}

@page: right { /* 右ページを設定 */
    /* 天地のマージン */
    margin-block: 15mm;  
    /* ノド、小口のマージン */
    margin-inline: 18.25mm 16mm; 
}

:root { /* 共通設定 */
    font-size: 13Q;  /* フォントサイズ */
    line-height: 24Q; /* 段落の行送りサイズ */
    font-family: "Noto Sans JP"; /* フォント指定 */
    /* フォント太さを指定 100,200,...800,900 ノーマルは400 */
    font-weight: 400;  
    text-spacing: auto; /* 文字組設定を自動 */
    widows: 1; /* 孤立行は1行に */
    orphans: 1; /* 孤立行は1行に */
}

p {
    font-size: 13Q;
    line-height: 24Q;
    text-align: justify;  /* 行末揃え */
    /* 字下げ設定 em:文字サイズを1とした総体単位 */
    text-indent: 1em; 
    margin-block: 0;
}


h1 {
    font-size: 42Q;
    line-height: 100Q;
    margin-block-start: 40mm; /* 天のマージン */
    text-align: center;
    counter-reset: section-counter 0;
}

h2 {
    break-before: verso;  /* 改ページ */
    font-size: 32Q;
    line-height: 48Q;
    inline-size: 10em; /* ボックスの横方向長さ (em:文字サイズを1とした単位) */
    block-size: 1lh; /* ボックスの縦方向長さ (lh:行送りを1とした単位) */
    margin-block: 0 11mm; /* 前後のブロックのマージン */
}

h2::before {
    content: counter(section-counter);
    counter-increment: section-counter;
    color: #999;

    background-color: #DFDBE5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E");
    font-size: 180Q;
    line-height: 1em;
    inline-size: 37mm;
    block-size: 47mm;
    padding-inline-start: 4mm;
    border-end-end-radius: 50%;
    position: absolute;
    inset-block-start: -15mm;
    inset-inline-start: -16mm;
    z-index: -1;
}

.subtitle {
    font-size: 24Q;
    text-align: center;
    font-weight: 700; /* 太さ */
    margin-block-start: 40mm; /* 上マージン */
}

.pagebreak {
    visibility: hidden;
    break-after: page;
}


これをビルドすると次のようになります。

表紙
hyoushi.png

第1章
chapter1.png

第2章
chapter2.png

章は偶数ページから開始するようになっていますので、3ページ目は空白になっています。だいぶ書籍らしくなってきました。次は細かい飾り付けをしてみたいと思います。

※この記事は次の本を参考にしています。

Web技術で「本」が作れるCSS組版 Vivliostyle入門

Web技術で「本」が作れるCSS組版 Vivliostyle入門

  • 出版社/メーカー: シーアンドアール研究所
  • 発売日: 2023/05/12
  • メディア: Kindle版


前のVivliostyleの記事  次のVivliostyleの記事
タグ:vivliostyle
nice!(4)  コメント(0) 
共通テーマ:趣味・カルチャー

Vivliostyle-CLIで作ったドキュメントに表紙をつくる [Vivliostyle]

前回ドキュメントに要素を追加してようやく体裁が整ってきました。今回は1ページ目を表紙にしようと思います。1ページ目の背景色をかえてページ番号を付与しないようにするため、次のような要素をCSSファイルに付け加えます。

@page:nth(1) {
    margin: 0;
    background-color: #888888; /* 背景色をグレーに設定 */
    @bottom-center {
        content: none;  /* ページ番号をなくすためにボトムセンターにコンテンツはなし */
    }
}


これをプレビューしてみると次のようになりました。

Screenshot from 2024-01-20 22-35-34.png


これでは味気ないので、表紙の背景に画像を用いたいと思います。背景画像にはSVGフォーマットのものを使います。背景となる画像は次のサイトで作ることができます。

https://heropatterns.com/
Screenshot from 2024-01-20 18-44-08.png

適当なデザインをクリックすると画面があらわれます。その中にCSSのコードがあるので、それをコピーしてCSSファイルに転記します。


Screenshot from 2024-01-20 18-46-45.png


SVGファイルの定義がながいので一部省略をしていますが、次のようになりました。先程定義した背景色の定義は上書きするのに注意してください。

@page:nth(1) {
    margin: 0;
    background-color: #DFDBE5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 ...(省略)... 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E");
    @bottom-center {
        content: none;  /* ページ番号をなくすためにボトムセンターにコンテンツはなし */
    }
}


プレビューしてみました。少し本っぽくなってきたと思います。

Screenshot from 2024-01-20 22-51-12.png

次は章の飾り付けをしてみます。


※この記事は次の本を参考にしています。


Web技術で「本」が作れるCSS組版 Vivliostyle入門

Web技術で「本」が作れるCSS組版 Vivliostyle入門

  • 出版社/メーカー: シーアンドアール研究所
  • 発売日: 2023/05/12
  • メディア: Kindle版




前のVivliostyleの記事  次のVivliostyleの記事



nice!(9)  コメント(0) 
共通テーマ:趣味・カルチャー

Vivliostyle-CLIで作ったドキュメントにHTML要素を追加する [Vivliostyle]

前回は簡単なドキュメントを作ったので、そこのHTML要素を追加していきたいと思います。 追加するのは、Divクラスを活用したサブタイトル要素とチャプタ用の要素「h2」 です。

前回作ったHTMLドキュメントを次のように変更します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>吾輩はヌコである</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="mybook0.css" />
  </head>
  <body>
    <h1>吾輩はヌコである</h1>

    <div class="subtitle">ヌコと書生の物語</div>
    <h2>はじめての出会い</h2>

    <p>どこで生れたかとんと見当がつかぬ。
       何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
       吾輩はここで始めて人間というものを見た。
       しかもあとで聞くとそれは書生という人間で一番獰悪な種族であったそうだ。
       この書生というのは時々我々を捕つかまえて煮て食うという話である。
    </p>
  </body>
 </html>


CSSに要素を追加していきます。前回作成したCSSファイルの最後に h2 と .subtitle 要素を追加していきます。

@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");

* {
    box-sizing: border-box; /* 要素の計算方法を指定 */
    /* boder-box は、子要素は親要素のサイズに制約され、*/
    /* ボックスの幅を指定できる */
}

@page {
    size: 148mm 210mm; /* A4 */
    font-size: 10Q; /* 1Q = 0.25mm */
    /* ボトムセンターにページ番号を設定 */
    @bottom-center { content: counter(page); } 
}

@page: left { /* 左ページを設定 */
    /* 天地のマージン */
    margin-block: 15mm;  
    /* 小口、ノドのマージン */
    margin-inline: 16mm 18.25mm; 
}

@page: right { /* 右ページを設定 */
    /* 天地のマージン */
    margin-block: 15mm;  
    /* ノド、小口のマージン */
    margin-inline: 18.25mm 16mm; 
}

:root { /* 共通設定 */
    font-size: 13Q;  /* フォントサイズ */
    line-height: 24Q; /* 段落の行送りサイズ */
    font-family: "Noto Sans JP"; /* フォント指定 */
    /* フォント太さを指定 100,200,...800,900 ノーマルは400 */
    font-weight: 400;  
    text-spacing: auto; /* 文字組設定を自動 */
    widows: 1; /* 孤立行は1行に */
    orphans: 1; /* 孤立行は1行に */
}

p {
    font-size: 13Q;
    line-height: 24Q;
    text-align: justify;  /* 行末揃え */
    /* 字下げ設定 em:文字サイズを1とした総体単位 */
    text-indent: 1em; 
    margin-block: 0;
}

h1 {
    font-size: 42Q;
    line-height: 100Q;
    margin-block-start: 40mm; /* 天のマージン */
    text-align: center;
    counter-reset: section-counter 0;
}

h2 {
    break-before: verso;  /* 改ページ */
    font-size: 32Q;
    line-height: 48Q;
    inline-size: 10em; /* ボックスの横方向長さ (em:文字サイズを1とした単位) */
    block-size: 1lh; /* ボックスの縦方向長さ (lh:行送りを1とした単位) */
    margin-block: 0 11mm; /* 前後のブロックのマージン */
}

.subtitle {
    font-size: 24Q;
    text-align: center;
    font-weight: 700; /* 太さ */
    margin-block-start: 40mm; /* 上マージン */
}



HTMLファイルを表示させて右クリックでメニューを出して、その中から「これプレビューvivliostyle preview (Current File)」を選択します。

Screenshot from 2024-01-20 12-15-35.png

今回は「h2」要素は章の見出しで改ページを追加したので、2ページになります。


Screenshot from 2024-01-20 12-27-25.png


Screenshot from 2024-01-20 12-27-31.png


1ページ目は表紙で、2ページ目から本文になります。少し書籍らしくなってきました。
次は表紙の飾り付けをしたいと思います。


※この記事は次の本を参考にしています。


Web技術で「本」が作れるCSS組版 Vivliostyle入門

Web技術で「本」が作れるCSS組版 Vivliostyle入門

  • 出版社/メーカー: シーアンドアール研究所
  • 発売日: 2023/05/12
  • メディア: Kindle版




前のVivliostyleの記事  次のVivliostyleの記事
nice!(6)  コメント(0) 
共通テーマ:趣味・カルチャー

SPRESENSE(SORA-Q)が月面撮影成功!!歴史的偉業を達成! [SPRESENSE]

SPRESENSEがやってくれました。SPRESENSEを搭載した、JAXAの月面探査機SLIMの子探査機のLEV-2(SORA-Q)が月面走行ならびに月面上に着陸したSLIMの撮影に成功しました!すごい!!




SONY SPRESENSE メインボード CXD5602PWBMAIN1

SONY SPRESENSE メインボード CXD5602PWBMAIN1

  • 出版社/メーカー: スプレッセンス(Spresense)
  • メディア: Tools & Hardware




SLIMそのものは、50m地点でスラスタ一つが脱落。異常モードに入り、本来、高度1.8mで放出する予定だった LEV-1、LEV-2 を高度 5m で放出。それでも両方とも問題なく動作したのはすごいですね。




スラスタを失ったSLIMは横滑りしながら月面に着陸し、横方向の勢いがあまってしまい写真のように逆立ちをしてしまったようです。




太陽光パネルが西方向を向いており、月面の太陽は東側。SLIMは電源を確保できずに現在停止しています。月の昼間はだいたい17日くらい。1月末には天頂に来て、2月上旬には西に来るので、そのときに復活できるかもしれません。




一方、LEV-1もすごいですね。飛び跳ねて移動するというのもユニークですが、あの小さなロボットで地球との通信も実現しています。通信はテレメトリにUHF帯、データ送信用にS帯を使っているようです。




残念ながら、LEV-1 の画像取得はうまくいっていないようですが、それでもLEV-1、LEV-2で複数のロボットが連携して月面で動作させたのは世界初!ロボット大国の面目躍如ですね。

最後に特筆すべきは、SLIMのピンポイント着陸でしょう。画像照合しながら完全自立制御。スラスタが落ちなければ3−5m精度だったようです。

今までは 数kmから十数km レベルです。というのも、月面着陸直前の探査機の速度は時速200km程度。それを急減速させて着陸させるので、それくらいの誤差が出るのは当然だと思われました。それをピッタリ狙った駐車場つけることができたのが今回の偉業です。



最近は失敗続きの日本の宇宙開発ですが、ひさしぶりに大きなインパクトの偉業を成し遂げました。今後、日本の月面開発が活発化しそうですね。


タグ:Spresense 宇宙
nice!(7)  コメント(0) 
共通テーマ:趣味・カルチャー

Vivliostyle-CLIで簡単なドキュメントを作ってみる [Vivliostyle]

Vivliostyle-CLIを導入したので、Visual Studio Code で簡単なドキュメントを作ってみます。まずはワークスペースとしてフォルダ「mybook0」を作成します。その中に、「mybook0.html」と「mybook0.css」というファイルを作成します。

Visual Studio Code のメニューから「フォルダを開く」でmybook0 を開いて、「名前をつけてワークスペースを保存...」で保存しておきます。Visual Studio Code の画面は次のようになります。

Screenshot from 2024-01-14 21-11-50.png

mybook0.htmlにはドキュメントの内容をHTML形式で記述します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>吾輩はヌコである</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="mybook0.css" />
  </head>
  <body>
    <h1>吾輩はヌコである</h1>
    <p>どこで生れたかとんと見当がつかぬ。
       何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
       吾輩はここで始めて人間というものを見た。
       しかもあとで聞くとそれは書生という人間で一番獰悪な種族であったそうだ。
       この書生というのは時々我々を捕つかまえて煮て食うという話である。
    </p>
  </body>
 </html>



mybook0.css には次のようにページ設定と各要素の定義を記述します。ページ設定は @page という要素で指定します。

@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");

* {
    box-sizing: border-box; /* 要素の計算方法を指定 */
    /* boder-box は、子要素は親要素のサイズに制約され、*/
    /* ボックスの幅を指定できる */
}

@page {
    size: 148mm 210mm; /* A4 */
    font-size: 10Q; /* 1Q = 0.25mm */
    /* ボトムセンターにページ番号を設定 */
    @bottom-center { content: counter(page); } 
}

@page: left { /* 左ページを設定 */
    /* 天地のマージン */
    margin-block: 15mm;  
    /* 小口、ノドのマージン */
    margin-inline: 16mm 18.25mm; 
}

@page: right { /* 右ページを設定 */
    /* 天地のマージン */
    margin-block: 15mm;  
    /* ノド、小口のマージン */
    margin-inline: 18.25mm 16mm; 
}

:root { /* 共通設定 */
    font-size: 13Q;  /* フォントサイズ */
    line-height: 24Q; /* 段落の行送りサイズ */
    font-family: "Noto Sans JP"; /* フォント指定 */
    /* フォント太さを指定 100,200,...800,900 ノーマルは400 */
    font-weight: 400;  
    text-spacing: auto; /* 文字組設定を自動 */
    widows: 1; /* 孤立行は1行に */
    orphans: 1; /* 孤立行は1行に */
}

p {
    font-size: 13Q;
    line-height: 24Q;
    text-align: justify;  /* 行末揃え */
    /* 字下げ設定 em:文字サイズを1とした総体単位 */
    text-indent: 1em; 
    margin-block: 0;
}

h1 {
    font-size: 42Q;
    line-height: 100Q;
    margin-block-start: 40mm; /* 天のマージン */
    text-align: center;
    counter-reset: section-counter 0;
}


ここで天・地・小口・ノドは次のようになっています。
(出典:https://www.book-hon.com/column/9961/)



ドキュメントをビルドするには、html ファイルを開いた状態で右クリックをするとメニューが開くので、その中から「vivliostyle cli helper」を選択し、「これプレビューvivliostyle preview(Current File)」を指定します。

Screenshot from 2024-01-14 22-17-03.png

すると別画面が開いて、次のようにプレビューを見ることができます。

Screenshot from 2024-01-14 22-17-46.png


次からはいろいろと装飾をしていきたいと思います。

※この記事は次の本を参考にしています。


Web技術で「本」が作れるCSS組版 Vivliostyle入門

Web技術で「本」が作れるCSS組版 Vivliostyle入門

  • 出版社/メーカー: シーアンドアール研究所
  • 発売日: 2023/05/12
  • メディア: Kindle版




前のVivliostyleの記事  次のVivliostyleの記事
nice!(6)  コメント(0) 
共通テーマ:趣味・カルチャー
前の5件 | -