### Setup Vivliostyle.js Project

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/CONTRIBUTING.md

Clones the Vivliostyle.js repository, navigates into the directory, and installs project dependencies using Yarn.

```bash
git clone https://github.com/vivliostyle/vivliostyle.js.git
cd vivliostyle.js
yarn install
```

--------------------------------

### Install Dependencies and Bootstrap Vivliostyle.js

Source: https://github.com/vivliostyle/vivliostyle.js/wiki/Development

Installs project dependencies using Yarn and then sets up the development environment by creating symbolic links for local development. This ensures that the local version of @vivliostyle/core is used instead of one installed from npm.

```shell
yarn install
yarn bootstrap
```

--------------------------------

### Build and Serve Vivliostyle.js for Development

Source: https://github.com/vivliostyle/vivliostyle.js/wiki/Development

Builds a development version of both the Core and Viewer components of Vivliostyle.js. It then starts a development server with live-reload enabled via Browsersync, automatically opening the application in a browser.

```shell
yarn build-dev
yarn dev
```

--------------------------------

### Watch for Changes in Vivliostyle.js

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/CONTRIBUTING.md

Starts a development server or process that watches for file changes and automatically rebuilds or recompiles the project.

```bash
yarn dev
```

--------------------------------

### Troubleshooting Symlinks

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/CONTRIBUTING.md

Recreates symbolic links for Node.js modules after installation or suggests using 'lerna add' instead of 'yarn add' to avoid issues.

```bash
lerna link
```

--------------------------------

### Create Book: Project Initialization Tool

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/README.md

The create-book package is a tool designed to help users quickly start new book projects within the Vivliostyle ecosystem. It streamlines the setup process for creating books using Vivliostyle.

```Bash
npx create-book my-new-book
```

--------------------------------

### Troubleshooting Node Modules Link

Source: https://github.com/vivliostyle/vivliostyle.js/wiki/Development

Instructions for resolving issues where `@vivliostyle/core` cannot be found after installation. It suggests running `lerna link` to fix symlinks or using `lerna add` instead of `yarn add`.

```shell
lerna link
```

--------------------------------

### Setup and Run CSSWG Tests with wptrunner

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/wpt/README.md

This snippet provides a comprehensive set of shell commands to set up the environment and run CSSWG tests using wptrunner for Vivliostyle.js. It covers installing dependencies, cloning repositories, configuring the environment, and executing the test suite with specified browser options.

```sh
# Make sure that your system has Python installed, and virtualenv package is installed.
# If you are using HomeBrew on Mac:
brew install python
pip install virtualenv

# Make working directory (outside Vivliostyle.js repository)
mkdir work
cd work

# Fetch necessary repositories
git clone --depth=1 --branch=vivliostyle-master --recursive \
  https://github.com/vivliostyle/wptrunner.git
git clone --depth=1 --branch=vivliostyle-master --recursive \
  https://github.com/vivliostyle/csswg-test.git
git clone --depth=1 --branch=vivliostyle-master --recursive \
  https://github.com/vivliostyle/wpt-tools.git csswg-test/wpt_tools

# Copy Vivliostyle.js files
mkdir csswg-test/vivliostyle.js
cp -R (Vivliostyle.js repository)/{src,test,resources} csswg-test/vivliostyle.js/
# Or, you can clone from GitHub directly
# git clone --depth=1 --branch=master \
#   https://github.com/vivliostyle/vivliostyle.js.git csswg-test/vivliostyle.js

# Setup environment
virtualenv .
source bin/activate
pip install -e wptrunner
# (If you use a browser other than Chrome, use the appropriate requirements file below)
pip install -r wptrunner/requirements_chrome.txt

# Run tests (Example for Chrome. Modify the Chrome binary path appropriately)
wptrunner --metadata=csswg-test/vivliostyle.js/test/wpt/metadata --tests=csswg-test \
  --ssl-type=none --run-vivliostyle --log-mach - \
  --product=chrome \
  --binary=~/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --webdriver-binary=bin/chromedriver
```

--------------------------------

### Install React Vivliostyle

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/react/README.md

Installs the @vivliostyle/react package using Yarn. This is the first step to integrate Vivliostyle rendering into a React project.

```bash
yarn add @vivliostyle/react
```

--------------------------------

### Install Vivliostyle Viewer via npm

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/viewer/README.md

This snippet demonstrates how to install the Vivliostyle Viewer package using npm. After installation, the viewer will be available in the node_modules directory.

```javascript
npm install @vivliostyle/viewer

```

--------------------------------

### Install Vivliostyle Core with npm

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/README.md

This snippet shows how to integrate Vivliostyle Core into your project using npm, the Node Package Manager. Ensure you have Node.js and npm installed.

```bash
npm install @vivliostyle/core
```

--------------------------------

### Run Vivliostyle Viewer Distribution Package

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/viewer/README.md

This snippet shows how to execute the start-webserver script from the Vivliostyle Viewer distribution package. It assumes the user has unzipped the package and is in the terminal. It also mentions the prerequisite of having Node.js, Ruby, or Python installed.

```bash
$ ./vivliostyle-viewer-latest/start-webserver

```

```bash
> vivliostyle-viewer-latest\start-webserver

```

--------------------------------

### Prepare for Release

Source: https://github.com/vivliostyle/vivliostyle.js/wiki/Development

Executes a series of commands to ensure the project is ready for release. This includes linting, running tests, cleaning previous build artifacts, and creating a production build.

```shell
yarn lint
yarn test
yarn clean
yarn build
```

--------------------------------

### CSS :nth-child(-2) Selector Example

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/nth_selectors.html

Applies red color to the -2nd child. Note: CSS child indexing starts from 1, so this selector typically has no effect.

```CSS
.b :nth-child(-2) { color: red; }
```

--------------------------------

### Pre-release Build Checks

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/CONTRIBUTING.md

Executes linting, testing, cleaning, and building steps to ensure the project is ready for a pre-release.

```bash
yarn lint
yarn test
yarn clean
yarn build
```

--------------------------------

### CSS :nth-child(0) Selector Example

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/nth_selectors.html

Applies red color to the 0th child. Note: CSS child indexing starts from 1, so this selector typically has no effect.

```CSS
.b :nth-child(0) { color: red; }
```

--------------------------------

### Bump Stable Version

Source: https://github.com/vivliostyle/vivliostyle.js/wiki/Development

Command to increment a stable version to the next stable version, for example, from v2.0.0 to v2.0.1. This is a standard version bumping process for stable releases.

```shell
yarn version:bump
```

--------------------------------

### Clone Vivliostyle.js Repository

Source: https://github.com/vivliostyle/vivliostyle.js/wiki/Development

Clones the Vivliostyle.js repository from GitHub and navigates into the project directory. This is the initial step for setting up the development environment.

```shell
git clone https://github.com/vivliostyle/vivliostyle.js.git
cd vivliostyle.js
```

--------------------------------

### CSS :nth-child(n+b) Selector Examples

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/nth_selectors.html

Applies bold font-weight to all children starting from the 3rd. It also applies italic font-style to the 3rd and 4th children, and green color to all.

```CSS
.a_1 :nth-child(n + 3) { font-style: italic; }
.a_1 :nth-child(n-3) { color: green; }
.a_1 :nth-child(n) { font-weight: bold; }
```

--------------------------------

### Build Vivliostyle.js Project

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/CONTRIBUTING.md

Compiles the Vivliostyle.js project using the 'build' script in the package.json file.

```bash
yarn build
```

--------------------------------

### CSS :nth-of-type(-2) Selector Example

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/nth_selectors.html

Applies red color to the -2nd `span` element of its type. Note: CSS `nth-of-type` indexing starts from 1, so this selector typically has no effect.

```CSS
.b_type span:nth-of-type(-2) { color: red; }
```

--------------------------------

### Applying AGPL to New Programs

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/scripts/package-artifacts/licenses/agpl-3.0.txt

This section provides a template for incorporating the GNU Affero General Public License into new software projects. It includes essential copyright information and licensing statements to ensure compliance.

```Text
<one line to give the program's name and a brief idea of what it does.>
Copyright (C) <year>  <name of author>

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
```

--------------------------------

### CSS :nth-of-type(0) Selector Example

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/nth_selectors.html

Applies red color to the 0th `span` element of its type. Note: CSS `nth-of-type` indexing starts from 1, so this selector typically has no effect.

```CSS
.b_type span:nth-of-type(0) { color: red; }
```

--------------------------------

### CSS :nth-child(-n-1) Selector Example

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/nth_selectors.html

Applies red color to children with index less than -1. Note: CSS child indexing starts from 1, so this selector typically has no effect.

```CSS
.a_-1 :nth-child(-n-1) { color: red; }
```

--------------------------------

### Vivliostyle Core Viewer Interface

Source: https://github.com/vivliostyle/vivliostyle.js/wiki/Development

TypeScript code snippet describing the core interface of vivliostyle-core. It outlines the process of instantiating `Vivliostyle.CoreViewer`, setting options, registering listeners, and loading documents or publications.

```typescript
// Exposed interface of vivliostyle-core. To use vivliostyle-core, instantiate
// Vivliostyle.CoreViewer, set options, register event listeners by addListener
// method, and call loadDocument or loadPublication method.
```

--------------------------------

### Create Pre-release Version

Source: https://github.com/vivliostyle/vivliostyle.js/wiki/Development

Commands to manage pre-release versions of the Vivliostyle.js package. 'version:prerelease' creates a pre-release version, and 'version:bump' increments the pre-release count.

```shell
yarn version:prerelease
yarn version:bump
```

--------------------------------

### Lint and Format Code

Source: https://github.com/vivliostyle/vivliostyle.js/wiki/Development

Runs ESLint for linting and code formatting, utilizing eslint-plugin-prettier. The 'format' command specifically applies code formatting using Prettier.

```shell
yarn lint
yarn format
```

--------------------------------

### CSS :nth-last-of-type(-2) Selector Example

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/nth_selectors.html

Applies red color to the -2nd `span` element of its type, counting from the end. Note: CSS `nth-last-of-type` indexing starts from 1, so this selector typically has no effect.

```CSS
.b_last_type span:nth-last-of-type(-2) { color: red; }
```

--------------------------------

### CSS :nth-last-of-type(0) Selector Example

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/nth_selectors.html

Applies red color to the 0th `span` element of its type, counting from the end. Note: CSS `nth-last-of-type` indexing starts from 1, so this selector typically has no effect.

```CSS
.b_last_type span:nth-last-of-type(0) { color: red; }
```

--------------------------------

### CSS :nth-of-type(-n-1) Selector Example

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/nth_selectors.html

Applies green color to `span` elements with indices less than -1 of their type. Note: CSS `nth-of-type` indexing starts from 1, so this selector typically has no effect.

```CSS
.a_1_type span:nth-of-type(-n-1) { color: green; }
```

--------------------------------

### CSS :nth-last-child(n+b) Selector Examples

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/nth_selectors.html

Applies bold font-weight to all children starting from the 3rd from the end. It also applies italic font-style to the 3rd and 4th children from the end, and green color to others.

```CSS
.a_1_last :nth-last-child(n + 3) { font-style: italic; }
.a_1_last :nth-last-child(n-3) { color: green; }
.a_1_last :nth-last-child(n) { font-weight: bold; }
```

--------------------------------

### Control Column Breaks with Vivliostyle.js

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/nth-fragment/matching_multiple_elements_in_hierarchy.html

The `.break` class is used to explicitly control column breaks. Applying `display: block;` and `break-after: column;` ensures that content following this element will start on a new column.

```CSS
.break {
  display: block;
  break-after: column;
}
```

--------------------------------

### Graduate Pre-release to Stable

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/CONTRIBUTING.md

Converts a pre-release version (e.g., v2.0.0-pre.4) to a stable release version.

```bash
yarn version:graduate
```

--------------------------------

### CSS :nth-of-type(n+b) Selector Examples

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/nth_selectors.html

Applies bold font-weight to all `span` elements starting from the 3rd of their type. It also applies italic font-style to the 3rd and 4th `span` elements, and green color to others.

```CSS
.a_1_type span:nth-of-type(n) { font-weight: bold; }
.a_1_type span:nth-of-type(n + 3) { font-style: italic; }
.a_1_type span:nth-of-type(n-3) { color: green; }
```

--------------------------------

### Define EPUB Page Layout with Vivliostyle CSS

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/nth-fragment/float.html

This snippet defines the page size and EPUB-specific page templates, including partitions for content flow and master page configurations for headers and footers. It sets up the basic structure for EPUB rendering.

```css
@page { size: 820px; }
@-epubx-page-template {
  .partition { width: 398px; height: 198px; border: rgba(0, 0, 255, 0.2) solid 1px; -epubx-flow-from: body; }
  .left { left: 10px; }
  .right { right: 10px; }
  @-epubx-page-master {
    @-epubx-partition {
      bottom: 0;
      left: 0;
      right: 0;
      height: 10px;
      font-size: 10px;
      line-height: 10px;
      text-align: center;
      content: counter(page);
    }
    @-epubx-partition class(partition) class(right) { top: 610px; }
    @-epubx-partition class(partition) class(right) { top: 410px; }
    @-epubx-partition class(partition) class(right) { top: 210px; }
    @-epubx-partition class(partition) class(right) { top: 10px; }
    @-epubx-partition class(partition) class(left) { top: 610px; }
    @-epubx-partition class(partition) class(left) { top: 410px; }
    @-epubx-partition class(partition) class(left) { top: 210px; }
    @-epubx-partition class(partition) class(left) { top: 10px; }
  }
}
```

--------------------------------

### CSS :nth-last-of-type(-n-1) Selector Example

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/nth_selectors.html

Applies red color to `span` elements with indices less than -1 of their type, counting from the end. Note: CSS `nth-last-of-type` indexing starts from 1, so this selector typically has no effect.

```CSS
.a_1_last_type span:nth-last-of-type(-n-1) { color: red; }
```

--------------------------------

### CSS :nth-last-of-type(n+b) Selector Examples

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/nth_selectors.html

Applies bold font-weight to all `span` elements starting from the 3rd of their type, counting from the end. It also applies italic font-style to the 3rd and 4th `span` elements from the end, and green color to others.

```CSS
.a_1_last_type span:nth-last-of-type(n + 3) { font-style: italic; }
.a_1_last_type span:nth-last-of-type(n-3) { color: green; }
.a_1_last_type span:nth-last-of-type(n) { font-weight: bold; }
```

--------------------------------

### Graduate to Stable Release

Source: https://github.com/vivliostyle/vivliostyle.js/wiki/Development

Command to graduate a pre-release version to a stable release. This is typically used when a version like v2.0.0-pre.4 needs to be promoted to a stable version.

```shell
yarn version:graduate
```

--------------------------------

### Page Layout and Sizing with CSS

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/screen-flex-print.html

This snippet defines the basic page size, margins, and overall dimensions for the document. It sets up the HTML, body, and a main div to have a fixed width and height, along with a specific font family.

```css
@page { size: 400px 200px; margin: 0; } * { margin: 0; } html, body, body > div { width: 400px; height: 200px; font-family: Lato; }
```

--------------------------------

### CSS Page Setup and Float Properties

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/page_floats/float-min-wrap-block_vertical.html

Configures page size, margins, and font settings for vertical writing mode. It also defines styles for floats, including reference, box-sizing, border, width, height, and specific positioning for block-start and block-end elements with minimum wrap blocks.

```css
@page {
  size: 220px;
  margin: 10px;
  @bottom-center {
    font-size: 8px;
    content: counter(page);
  }
}

:root {
  font-size: 16px;
  line-height: 20px;
  writing-mode: vertical-rl;
}

body, p {
  margin: 0;
}

section {
  break-after: page;
}

.float {
  float-reference: page;
  box-sizing: border-box;
  border: blue solid 2px;
  width: 160px;
  height: 100%;
}

.block-start {
  float: block-start;
  float-min-wrap-block: 2.6em;
}

.block-end {
  float: block-end;
  float-min-wrap-block: 21%;
}
```

--------------------------------

### CSS for Layout and Borders

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/image-resolution.html

Provides CSS examples for controlling layout elements, including container widths, borders, and box sizing. It shows how to create a dashed border and apply box-sizing.

```CSS
.container { border-left: blue dashed; border-right: blue dashed; width: 1in; overflow: visible; }

.img-container { display: inline-block; line-height: 0; width: 1in; height: 1in; }

.border-box { box-sizing: border-box; border: 5px solid rgba(0, 255, 0, 0.2); margin-left: -5px; }
```

--------------------------------

### HTML Structure for Vivliostyle.js Examples

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/text-spacing/ts-hp-allow-force-end.html

This HTML structure is used to display examples of text-spacing and hanging-punctuation properties in Vivliostyle.js. Each section shows a combination of text-spacing and hanging-punctuation settings applied to a paragraph containing Japanese text. The structure includes headings and separators to clearly delineate each example.

```html
text-spacing: none; hanging-punctuation: none
---------------------------------------------


一二三四五六七八九十一二三四五六七八九、一二三四五六七八九十一二三四五六七八九十。
一二三四五六七八九十一二三四五六七八九!、一二三四五六七八九十。

text-spacing: none; hanging-punctuation: allow-end
--------------------------------------------------


一二三四五六七八九十一二三四五六七八九、一二三四五六七八九十一二三四五六七八九十。
一二三四五六七八九十一二三四五六七八九!、一二三四五六七八九十。

text-spacing: none; hanging-punctuation: force-end
--------------------------------------------------


一二三四五六七八九十一二三四五六七八九、一二三四五六七八九十一二三四五六七八九十。
一二三四五六七八九十一二三四五六七八九!、一二三四五六七八九十。

text-spacing: normal; hanging-punctuation: none
-----------------------------------------------


一二三四五六七八九十一二三四五六七八九、一二三四五六七八九十一二三四五六七八九十。
一二三四五六七八九十一二三四五六七八九!、一二三四五六七八九十。

text-spacing: normal; hanging-punctuation: allow-end
----------------------------------------------------


一二三四五六七八九十一二三四五六七八九、一二三四五六七八九十一二三四五六七八九十。
一二三四五六七八九十一二三四五六七八九!、一二三四五六七八九十。

text-spacing: normal; hanging-punctuation: force-end
----------------------------------------------------


一二三四五六七八九十一二三四五六七八九、一二三四五六七八九十一二三四五六七八九十。
一二三四五六七八九十一二三四五六七八九!、一二三四五六七八九十。

text-spacing: trim-both; hanging-punctuation: none
--------------------------------------------------


一二三四五六七八九十一二三四五六七八九、一二三四五六七八九十一二三四五六七八九十。
一二三四五六七八九十一二三四五六七八九!、一二三四五六七八九十。

text-spacing: trim-both; hanging-punctuation: allow-end
-------------------------------------------------------


一二三四五六七八九十一二三四五六七八九、一二三四五六七八九十一二三四五六七八九十。
一二三四五六七八九十一二三四五六七八九!、一二三四五六七八九十。

text-spacing: trim-both; hanging-punctuation: force-end
-------------------------------------------------------


一二三四五六七八九十一二三四五六七八九、一二三四五六七八九十一二三四五六七八九十。
一二三四五六七八九十一二三四五六七八九!、一二三四五六七八九十。
```

--------------------------------

### Vivliostyle CLI: Command-Line Interface

Source: https://github.com/vivliostyle/vivliostyle.js/blob/master/README.md

The @vivliostyle/cli package provides a command-line interface for interacting with Vivliostyle. This allows users to perform typesetting tasks and manage publications directly from their terminal.

```Bash
npx @vivliostyle/cli build --input ./src --output ./dist
```