Vivliostyle

Vivliostyle CLI v10 Released! Integrated create Command Makes Book Creation Smoother

2025-12-21T00:00:00+09:00

Vivliostyle CLI, the command-line tool that powers the CSS typesetting ecosystem, has officially released its latest major version: v10!

This update focuses on integrating create-book, which was previously provided as a peripheral tool, into the main CLI to create a more seamless user experience, while also enabling fine-grained control for professional use cases.

In this article, we’ll introduce the major changes in v10 and explain how they will transform your book-making workflow.

1. `create-book` Integrated into CLI: Start Projects Instantly with the `create` Command

Until now, many users have been using create-book, a separate scaffolding tool, when starting a new book (project) with Vivliostyle.

In v10, the functionality of create-book has been fully integrated into Vivliostyle CLI itself.

This means you can now create projects interactively as a standard feature of Vivliostyle CLI, without having to think about external tools.

An Interactive Interface That Gets You Started Without Confusion

Usage is simpler than ever. Just enter the following command in your terminal to launch the familiar setup wizard.

# First, install Vivliostyle CLI (administrator privileges may be required)
npm install -g @vivliostyle/cli

# Then run the create command
vivliostyle create

Alternatively, you can run the create command without installing Vivliostyle CLI:

npm create book@latest

When you run the command, an interactive prompt will display several questions in English. Answer them, and a directory with all the necessary files will be automatically generated.

By consolidating what was previously an independent feature into vivliostyle create, the workflow from installation to project creation has been streamlined. This provides a clearer, more intuitive experience for those just getting started with Vivliostyle.

2. Major Evolution in PDF Output Engine Options

PDF output is the core functionality of Vivliostyle CLI. This is achieved by running a browser (Headless Browser) in the background and printing the rendered result. With this update, the browser control functionality has been completely revamped.

Specify Not Just Browser Type, but Also Version

With this update, you can now switch between Chrome, Chromium, and Firefox as the browser to use. But that’s not all—you can now specify the browser “version” as well.

This is an extremely important feature for users who automate document generation in their workflows.

Browser typesetting engines are constantly evolving, but occasionally “the layout breaks with the latest browser version when it worked fine before.” With this update, you can now strictly specify the version in your configuration file (vivliostyle.config.js) or command options.

// Example vivliostyle.config.js
module.exports = {
  // ...
  browser: 'chrome@143.0.7499.42', // Lock to a specific version
  // ...
};

3. Other Improvements in v10

After the v10.0 release, the development team has been making minor bug fixes and feature improvements based on user feedback. The newly released v10.1 is the “Stable” version that includes all these fixes.

In particular, the following important updates related to typesetting quality and development environment are included:

Automatic Hyphenation Now Available on All Operating Systems hyphens: auto (CSS automatic hyphenation), which previously didn’t work on some OS environments, now functions correctly on Windows, Mac, and Linux. This allows for more beautiful line break positions to be automatically calculated in text containing Western languages.
Updated Node.js Support Versions Supported Node.js versions have been changed to 20 or 22 and above. Optimizations have been made to align with the latest JavaScript runtime environment.

These changes were implemented after discussions in numerous Issues and Pull Requests on GitHub. We would like to express our deep gratitude to the community members who contributed to development and those who reported issues.

Experience the New Vivliostyle CLI Today

The create command, now even easier to use thanks to feature integration, and robust browser control functionality that meets professional demands. Please make use of the evolved Vivliostyle CLI in your book-making projects.

How to Update

If you’re using npm, you can update to the latest version with the following command:

npm install -g @vivliostyle/cli

(If you have it installed locally in a project, please update the package.json in each project)

For detailed changes and technical background, please also refer to the following links:

Release Notes: GitHub Releases
README: vivliostyle-cli/README.md
Changelog: vivliostyle-cli/CHANGELOG.md

Vivliostyle will continue to evolve to bring “writing” and “publishing” closer together. We look forward to seeing what wonderful books you create with v10.

Happy Typesetting!

Obtained a grant from NLnet

2025-07-07T00:00:00+09:00

Introduction

In November 2024, we decided to apply for the “NGI0 Commons Fund,” a grant from the NLnet Foundation. The Foundation is a public benefit organization based in the Netherlands that supports organizations and individuals who contribute to achieving an open information society. After a review process of about half a year, we were very fortunate to receive an acceptance notice in June 2025.

What This Grant Means for Us

This grant from the Foundation allows us to focus on the following tasks:

Vivliostyle.js
- Support for the latest CSS specifications
- Improved page and column break handling
- Improved footnote handling
Vivliostyle Pub
- Simple WYSIWYG display in the editor
- Theme editing
Vivliostyle CLI & others
- Support for browsers other than Chromium
- Enhancing typesetting samples and themes
Improving and enhancing documentation

About the NLnet Foundation and the NGI0 Commons Fund

In 1982, EUnet (European Unix Network), Europe’s first communications network interconnecting networks in the Netherlands, Denmark, Sweden, and the United Kingdom, was established. The Dutch part of this network was called “NLnet.” Subsequently, the management of NLnet was taken over by the NLUUG (Netherlands UNIX User Group).

In 1989, NLUUG established the non-profit NLnet Foundation. Then in 1994, against the backdrop of the explosive growth of the internet, the Foundation established NLnet Holding BV, a commercial internet provider specializing in internet services and backbone provision, and the company grew steadily.

Later, in 1997, NLnet Holding BV was sold to UUNET (a subsidiary of the US company WorldCom) and left the Foundation’s hands. Since then, the Foundation has been actively working as a public benefit organization supporting the dissemination of open-source software and the privacy and security of internet users.

NLnet Foundation - History

Meanwhile, the NGI0 Commons Fund is a grant program established as part of the European Commission’s Next Generation Internet initiative. The fund’s objective is to support open-source technology projects that enhance the public nature, privacy, and security of the internet, and the Foundation is responsible for its administration and funding allocation.

NGI Zero Commons Fund

We are deeply honored to receive a grant from the NGI0 Commons Fund, which is funded by the European Commission—the executive branch of the European Union (EU)—and administered by a foundation that has supported the internet and open source since their inception.

This has renewed our determination to contribute more than ever to internet standards and the open-source community. Please continue to follow and support Vivliostyle’s activities.

Event report of “Vivliostyle User/Dev Meetup Spring 2023”

2023-06-16T00:00:00+09:00

(The original article is 「Vivliostyle ユーザーと開発者の集い 2023春」開催報告 in Japanese)

Link to the day’s program and video

Part 1: Reports from Users
- 13:00-13:10 (10 min.) : Explanation of the purpose of today’s meeting (Katsuhiro Ogata) (movie)
- 13:10-13:40 (30 min.) (Taiyo Fujii) : Vivliostyle for use with VS Code (movie)
- 13:40-14:10 (30 min.) (Yuichiro Ohtsu) : Let’s play with printing more in commemoration of the publication of “Vivliostyle: Introduction to CSS typesetting”! (slide, movie)
- 14:10-14:15 (5 min.) Break
Part 2: Report from Vivliostyle
- 14:15-14:45 (30 min.) (Katsuhiro Ogata) : Travel essay co-edited and printed on demand at Vivliostyle (slide, movie)
- 14:45-15:15 (30 min.) (spring_raining) : Vivliostyle CLI Updates and New Vivliostyle Themes (slide, movie)
- 15:15-15:45 (30 min.) (Shinyu Murakami) : The latest evolution of Vivliostyle.js (slide, movie)
- 15:45-15:50 (5 min.) Break
Part 3: Discussion
- 15:50-16:30 (40 min.) May Dev Meeting (movie)
- 16:30-16:40 (10 min.) Closing (Shinyu Murakami) (movie)

Summary of each presentation

Vivliostyle for use with VS Code (Taiyo Fujii): Mr. Fujii is not only a science fiction author, but also the author of novel-writer, an extension for writing novels in VS Code, an extension for writing novels in VS Code. In addition to the introduction, he explained how to use Vivliostyle to create EPUB and PDF files from Markdown using Pandock, while actually operating a PC.
Let’s play with printing more in commemoration of the publication of “Vivliostyle: Introduction to CSS typesetting”! (Yuichiro Ohtsu): The author of the critically acclaimed Vivliostyle Explanatory Book introduced the theme of “What you can do with CSS typesetting” while showing actual CSS code and screens.
Travel essay co-edited and printed on demand at Vivliostyle (Katsuhiro Ogata): A color album of private world travels was converted into a book using Vivliostyle and printed. The issue with Vivliostyle.js that emerged was that the output results differed depending on the operating system (a workaround was reported later and has now been resolved).　
Vivliostyle CLI Updates and New Vivliostyle Themes (spring_raining): The committer who made major modifications to the Vivliostyle CLI and Themes to solve the difficulty of customizing CSS, which has been an issue for Vivliostyle, explained the details of the modifications himself.
The latest evolution of Vivliostyle.js (Shinyu Murakami): In closing the event, Representative Director Murakami summarized the results and issues reported thus far, and reported on Vivliostyle’s future direction and its development plans.
May Dev Meeting: Using the issues raised on the day as material, the speakers and committers discussed future issues for Vivliostyle.

A book explaining Vivliostyle is released!

2023-05-10T00:00:00+09:00

(The original article is Vivliostyleの解説本が発売！in Japanese)

A book that describes what you can do with CSS typesetting

The first book which explained Vivliostyle, “Making books with web technologies: Introduction to CSS typesetting and Vivliostyle” is published commercially (a link to the e-bookstores is at the end of this article). The author is Yuichiro Otsu of LibroWorks, an editing production company with a strong IT background. Mr. Otsu has been a speaker at our “Vivliostyle User / Dev Meetup” events many times.

As you can see from the video of the event, Mr. Otsu’s strength is that he can present “You can do this far with CSS typesetting!” This is the book he wrote, so if you want to learn practical techniques, this is the perfect book for you. Let’s first look at the table of contents of the book.

1章 VivliostyleとCSS組版
- 1節 CSS組版ってどんなもの？
- 2節 Vivliostyleってどんなもの？
- 3節 Vivliostyleを導入する
2章 CSS組版ハンズオン
- 1節大まかな紙面を設計する
- 2節フォントを設定する
- 3節見出しのスタイルと改ページ調整
- 4節紙面上の要素を細かく調整する
- 5節 PDFを書き出す
3章 MarkdownとVFM
- 1節 Markdownは難しくない！
- 2節 Markdownの書き方
- 3節 HTMLや数式を混ぜて書く
- 4節知っておくと便利な原稿執筆Tips
4章 Vivliostyle CLI
- 1節複数のファイルを連結する
- 2節 Vivliostyle CLIのさまざまな機能
5章 CSS組版テクニック集
- 1節まずはここから！　必須の基本技
- 2節難易度中！　ちょっと高度なテクニック
- 3節難易度高め！　いろいろ組み合わせた複合技
6章入稿データを作る
- 1節印刷のための最低限の基礎知識
- 2節 Vivliostyleのみを利用した入稿
- 3節 DTPソフトを組み合わせた入稿
7章 Vivliostyle Pub
- 1節 Vivliostyle Pubの概要

This book begins with an overview of CSS typesetting and Vivliostyle, which makes it possible, in Chapter 1, followed by an explanation of CSS for CSS typesetting in Chapter 2, and then the actual writing of Vivliostyle Markdown (Vivliostyle Flavored Markdown) in Chapter 3. In other words, if you have read this far, you will have a practical understanding of how to create a book using Markdown and CSS typesetting.

Generous disclosure of techniques unique to CSS typesetting

However, the true heart of this book is chapters 5 and 6, where the mastery of CSS typesetting really comes into its own. I was very surprised to see how far CSS typesetting can take us.

Nested heading numbers and hanging indentation, set at a gyou-dori.
Shift the side indexes used in dictionaries, etc., by chapter.
Generate a stretchable image column frame.
Places an inline SVG image at any coordinates on the page.
Back matter layout using CSS Grid.
Generate conversational speech balloons in any location or space.
Generate an elaborately designed table of contents.
Overlap the background, etc., into the bleed area.
Generate afternotes, footnotes, and sidenotes.

The greatest appeal of this book is that it generously discloses the above techniques unique to CSS typesetting.

In addition, at the upcoming 「Vivliostyle ユーザーと開発者の集い 2023春」 on May 28, Mr. Otsu will be sharing his CSS typesetting techniques as well as promoting this book. We look forward to seeing you there. Also, you can find an introduction and sample pages of this book on the following pages of LibroWorks.

【出版DXを実現する本！】『Web技術で「本」が作れる　CSS組版Vivliostyle入門』

This book is now available at the following and other e-bookstores. Please purchase a copy!

Paper book
e-book
- 本の森.jp
- Amazon
- honto
- 楽天kobo

Introduction of the new Vivliostyle Themes

2023-04-23T00:00:00+09:00

We’re delighted to announce that the new Vivliostyle Themes are now available in Beta version! It’s more than just a CSS file for Vivliostyle. It’s an ambitious library that is a new form of CSS framework, so let me introduce it to you.

How to use Vivliostyle Theme

Vivliostyle Themes can be used by setting the following in vivliostyle.config.js. (Vivliostyle CLI newer than v6.0.0 automatically installs the theme files, so npm install is not required)

module.exports = {
  theme: '@vivliostyle/theme-base',
};

Please refer to the README of Vivliostyle Themes for available themes. ~~Note that the theme name should end with @beta, as it is currently in Beta version.~~ (Update: We’ve released the stable version of the new Vivliostyle Themes so now you don’t have to specify @beta)

CSS framework based on CSS variables

The new Vivliostyle Themes are built on our CSS framework @vivliostyle/theme-base. Popular CSS frameworks, like Bootstrap and Tailwind CSS, have a different structure from Vivliostyle Themes. In short, @vivliostyle/theme-base is “a customizable CSS framework with CSS variables, designed for documents like Markdown.”

When viewing a document with @vivliostyle/theme-base, it looks almost the same as the browser’s default User agent stylesheet. However, you can observe various CSS variables set for the properties of each element selector.

This is exactly what is accomplished by @vivliostyle/theme-base.

In traditional CSS, you start by selecting the element you want to style, and then write the style to be applied. If the same style is repeated, the style that should be overridden is determined by the specificity of the selector. This makes CSS flexible and manageable.

However, this only works when you have control over all the CSS. It can be difficult for someone else to override your CSS. To make inherited CSS override the original CSS, you need to use selectors with a higher specificity than the original CSS, or add !important to increase the specificity. This depends on the content of the original CSS, making it hard to read and understand. If the source CSS is updated and the specificity changes, the dependent CSS will also become invalid. Until now, this has been a problem for CSS themes.

Vivliostyle Themes use “CSS variables” instead of selectors to indicate where styles should be applied.

/* General method for specifying CSS */
h1 {
  font-size: 2.5rem;
  line-height: 1.5;
}
p {
  margin: 0.5rem 1.5rem;
}

/* Specifying method in Vivliostyle Themes */
:root {
  --vs--h1-font-size: 2.5rem;
  --vs--h1-line-height: 1.5;
  --vs--p-margin-block: 0.5rem;
  --vs--p-margin-inline: 1.5rem;
}

The Vivliostyle Themes define CSS variables, all beginning with --vs, which are set to the :root selector. This means you don’t have to worry about the level of detail of the inherited style.

Let’s examine the CSS variables that can be set.

Systematized CSS variables

In the above example, CSS variables were named for specific tags such as h1 and p. Vivliostyle Themes offers a system of names for CSS variables to make it easier to achieve the text layout targeted by Vivliostyle.

`meta-properties.css`

meta-properties.css defines the most fundamental CSS variables that apply to the entire document, such as font type and size.

:root {
  --vs-font-family: serif; /* Set font to serif */
  --vs-spacing-rlh: 2rem; /* Set basic margins for each element */
}

`basic.css`

CSS variables for common elements like <h1> and <p> tags are defined in basic.css. All variables in basic.css have names that start with --vs--.

:root {
  --vs--blockquote-font-size: 120%; /* Set font size of blockquote tag to 120%. */
  --vs--figure-margin-inline: 2rem; /* Specify the margin of the figure tag in the inline direction */ 
}

Some HTML elements also have CSS variables for batch setting.

--vs--heading-*: Batch setting for the Heading element (h1, h2, h3, h4, h5, h6)
--vs--monospace-*: Specifies monospace font elements (code, kbd, pre, samp) at once.
--vs--lists-*: Batch specification for list elements (ul, ol, dl)

For table tags, you can also control the width of the border more precisely. For example, you can use CSS variables.

--vs--table-border-width-outer: specifies the width of the outer border of the table
--vs--table-border-width-row: Specifies the width of the inner horizontal border of the table

Other CSS Variables

Vivliostyle offers many features for page layout, cross-references, table of contents, and more. You can customize these features with CSS variables. For detailed instructions, check out the @vivliostyle/theme-baseのREADME.

Examples of Actual Application

To see how CSS variables are used, take a look at the theme file in @vivliostyle/theme-techbook/theme.css. A simplified version of the contents looks like this.

@import url(../theme-base/theme-all.css);
@import url(../theme-base/css/lib/prism/base.css);
@import url(../theme-base/css/lib/prism/theme-okaidia.css);

/**
 * Theme variables
*/
:root {
  --vs-theme--anchor-color-body: #3498db;
  --vs-theme--blockquote-color-bg: #ecf0f1;
  --vs-theme--blockquote-color-body: #34495e;
  ...
}

:root {
  --vs-font-family: 'Neue Frutiger World', 'Verdana', 'Hiragino Sans', sans-serif;
  --vs-font-size-on-print: 75%;
  --vs-line-height: 1.7;
  --vs-widows-orphans: 3;
  --vs--heading-line-height: 1.2;
  ...
}

This theme file changes its style by customizing the contents of the theme-base CSS variable. You can override this content by providing your own CSS. Vivliostyle also provides theme-specific CSS variables starting with --vs-theme--, which you can customize as needed.

Create your own theme

The create-vivliostyle-theme template generator is now compatible with the new Vivliostyle Themes. To generate a template, run the following command.

npm create vivliostyle-theme <your-theme-name>

The template does not include a SASS file, but has a simple structure with only theme.css. When you’ve finished your theme, consider publishing it as an npm package!

Conclusion

The new Vivliostyle Themes, powered by CSS variables, has been introduced. We will release it as an official version after we receive feedback. If you have any suggestions, please submit an issue at vivliostyle/themes.

Event report of “Vivliostyle User/Dev Meetup Autumn 2022”

2022-11-30T00:00:00+09:00

(The original article is 「Vivliostyle ユーザーと開発者の集い 2022秋」開催報告 in Japanese)

“Vivliostyle User/Dev Meetup Autumn 2022” was held

The annual fall user event was held online on November 20.

Vivliostyle User/Dev Meetup Autumn 2022

The program for the day and links to the respective slides and archived videos are below.

Part 1
- 13:00-13:10（10 min.）Explanation of the purpose of today’s meeting（Katsuhiro Ogata）（movie）
  - Here is a brief overview of the abstracts scheduled for presentation on this day.
- 13:10-13:40（30 min.）CSS text-spacing property from the perspective of the preliminary implementation in Vivliostyle.js（Suzuki Takeru, Fontworks）（slide, movie）
  - Reviews the preliminary implementation in Vivliostyle.js (spacing between Japanese and Western words, spacing of consecutive punctuation, and spacing at the beginning and end of lines), which has not yet been implemented in browsers, from the user’s perspective. From the last 10 minutes, Representative Murakami, the implementer, answers questions.
- 13:40-14:10（30分）Great improvements in web standards and CSS support in Vivliostyle.js（Shinyu Murakami）（slide, movie）
  - The newly available CSS Grid Layout, CSS Variables (Custom Properties), CSS Selectors level 4 (such as :has() pseudo-classes), etc. will be explained in detail. We will also discuss some of the remaining unimplemented CSS features that remain to be addressed.
- 14:10-14:15（5 min.）Break
Part 2.　Vivliostyle Development Report
- 14:15-14:25（10 min.）The Vivliostyle Project: Past and Future（Shinyu Murakami）（slide, movie）
  - This section describes planned enhancements to the Vivliostyle project, including incompatible changes. For example, the sectioning specification changes in VFM v2 (Markdown Extensions Specification), planned enhancements in Vivliostyle CLI v6, and the theme stylesheet revamp.
- 14:25-14:45（20 min.）Vivliostyle CLI update - 2022 Autumn（spring_raining）（slide, movie）
  - The first half of the presentation will cover updates to the Vivliostyle CLI over the past six months, such as changing the browser library from Puppeteer to Playwrite, adding the --css option, adding options related to bleed-off, etc. The second half of the presentation will detail the theme enhancements he is currently working on.
- 14:45-15:05（20 min.）Rethinking VFM Specification Design（@nosuke23）（slide, movie）
  - Here are some considerations for how to extend Markdown. Semantic markup inevitably leads to a higher likelihood of name collisions. To prevent this, we will explain that “declarative markup,” in which CSS is modularized and components are assigned in a declarative manner, may be effective. In the latter half of the session, based on the presentation, Representative Murakami and a VFM maintainer, akabeko-san, will join the three of us for a discussion.
- 15:05-15:10（5 min.）Break
Part 3.　Vivliostyle Spreading
- 15:10-15:30（20 min.）Release of vivliostyle-cli-helper and commercial publication “Introduction to Viviliostyle CSS Typesetting (tentative)”（Yuichiro Otsu,　LibroWorks Inc.）（slide, movie）
  - The author will give a detailed explanation of the contents of “Introduction to Vivliostyle CSS Typography (tentative),” which is scheduled for publication next spring, as well as the tool vivliostyle cli helper, which will be used as a teaching tool in the book.
- 15:30-15:50（20 min.）Vivliostyle, Another Blue Ocean（Katsuhiro Ogata）（slide, movie）
  - Vivliostyle’s strength is not limited to pagination. Recent examples of Vivliostyle users show that they all make full use of the collaborative editing feature. This collaborative editing capability may be another blue ocean for Vivliostyle. If so, then pagination should be optional.
- 15:50-15:55（5 min.）Break
Part 4.　November Dev Meeting
- 15:55-16:25（40 min.）（movie）
  - Using the issues raised on the day as material, the speakers and maintainers discussed future issues for Vivliostyle.
- 16:25-16:35（10 min.）Closing（Shinyu Murakami）（movie）
  - Closing remarks by Representative Murakami.

This year’s event was many amazing topics discussed. Let us briefly introduce some of them below.

Evaluation of implementation by Takeru Suzuki-san (FONTPLUS)

In Suzuki-san’s session CSS text-spacing property from the perspective of the preliminary implementation in Vivliostyle.js, among the specifications that browsers have not implemented yet, CSS Text level 4 property text-spacing Focusing on, we verified and evaluated the implementation in Vivliostyle.js. The content was generally affirmative of the current implementation, and I was reassured that what we had done so far was not wrong. In addition, the comments by Representative Murakami from the 22nd minute of the second half onward, in which he answered Suzuki-san’s questions and explained the algorithm of implementation, were also worth listening to, and I think we heard a worthwhile dialogue.

“Gyou-dori” will become easy with Vivliostyle.js in the near future

In Representative Murakami’s session Great improvements in web standards and CSS support in Vivliostyle.js, many improvements were explained, including the :has() pseudo-class, which will be described later, and future updates were also announced.

The most significant of these is that, while some of the latest CSS features implemented by browsers were previously unavailable, v2.16.0 (2022-07-19) and v2.17.0 (2022-07-29) allow the use of basically all of them. This means that CSS features implemented by future browsers can be used directly in Vivliostyle.js.

Among such CSS features, I am focusing on lh and rlh units (16:12). If implemented, it will be very easy to specify the size of headings, images, etc. in the way of “n lines of text”(Gyou-dori). This may be especially good news for users who have been confused by the difference between traditional Japanese typesetting and CSS typesetting.

Incompatibility Changes in VFM v2

In The Vivliostyle Project: Past and Future by Representative Murakami, it was announced that VFM, the Markdown dialect of Vivliostyle, will be updated to v2 in the near future (2:41). This will include incompatible changes, so users who currently have data written in VFM will need to take action.

Specifically, in the current v1, heading attributes were essentially copied to the section element, and the id attribute was also moved to the section element. However, starting with v2, these behaviors will be eliminated. These behaviors were useful features that allowed some flexibility in range specification within the limitations of Markdown, such as the ability to specify styles for entire sections, including headings.

But recently We implemented a :has() pseudo-class that specifies child elements and any elements that follow them in the Vivliostyle.js. This allows for more precise specifie. Thus, we decided that abolishing the traditional behavior would be more beneficial for users.

In v2, only the id attribute of the heading will be copied to the aria-labelledby attribute of the section element. However, other attributes will not be copied or moved. Please take note of this.

Theme enhancements in the Vivliostyle CLI

Notable in spring_raining-san’s Vivliostyle CLI update - 2022 Autumn is the enhancement of theme functionality planned for the next version (10:20). This is an attempt to make full use of CSS Variables (Custom Properties) implemented in Vivliostyle.js.

Specifically, a basic theme, @vivliostyle/theme-base, is prepared that can be used commonly within the Vivliostyle theme, and is referenced by other themes. This allows you to share variables that are used throughout the theme. For example, font name, font size and color, number of columns, and various other CSS features can be set as if you were turning a switch on and off. On this day, we were able to actually see a demonstration of a feature under development (14:35). We could feel how useful it is. Looking forward to it very much.

Also, after this enhancement of the theme feature, he will at last be working on support for EPUB output. Next year is going to be a great year.

Introductory book on Vivliostyle to be published commercially

The C&R Kenkyujo is publishing a long-awaited book on an introduction to Vivliostyle!　This is explained in detail in Yuichiro Otsu-san’s Publication of vivliostyle-cli-helper and commercial publication “Introduction to Viviliostyle CSS typesetting (tentative)”. The book will mainly target people who have some knowledge of HTML and CSS, and will explain Vivliostyle with a minimum of typographical knowledge. The proposed structure is as follows

Vivliostyle and CSS typesetting
Hands-on CSS typesetting
Introduction to VFM Markdown
Utilizing the Vivliostyle CLI
Design Tips for CSS typesetting
Sending and Printing
Vivliostyle Pub

In addition, the VSCode extension vivliostyle-cli-helper, which was demonstrated (15:21). With it, you can easily display a preview screen while writing a manuscript in VSCode. How convenient!

The book is scheduled to be released next year, March-April 2023. We look forward to seeing it.

Conclusion

I have picked up the topics of the day so far, but there were many more presentations that were worth listening to. Please take a look at the list above and see for yourself. The next meetup will be held in April 2023. Please keep your eyes on Vivliostyle next year to see how far the development of Vivliostyle progresses until then.

Vivliostyle Pub now exports PDF files

2022-07-28T00:00:00+09:00

Vivliostyle Pub released an alpha version in April. Since then, development has proceeded smoothly, and just recently it has become possible to export to PDF files. The user guide has been substantially revised accordingly.

Vivliostyle Pub Alpha version User Guide (Sorry, the English translation is still under preparation.)

As a result of this update, for example, the current Vivliostyle Pub alpha version can do the following.

However, due to the different location of the typesetting engine between preview and PDF output, the fonts used in preview and PDF output may not match, and this may cause pages to differ from each other.

How to use fonts

The user guide also describes how to avoid these font mismatches, so please take a look.

Vivliostyle Pub, a CSS typesetting web app, is free for everyone to use. Please try it from the following page.

Quick start guide

New FY2021 Activity Report Released

2022-06-16T00:00:00+09:00

FY2021 Activity Report (April 1, 2021 - March 31, 2022) is now available as follows.

FY2021 Activity Report

As in previous years, you will be able to view it in A4 and variable sizes via the Vivliostyle Viewer, as well as in HTML, PDF, and source code, plus the Japanese version.

In FY2021, our fourth fiscal year, we were able to achieve a single-year surplus. We are still a long way from eliminating our accumulated deficits. However, we have finally taken that step. Chapter 1 reports on these financial results.

The reason for such a strong financial result is the smooth progress in the development of Vivliostyle products. Therefore, in Chapter 2, we summarized what kind of new functions have been implemented for each product. For Vivliostyle .js, Vivliostyle CLI, and Vivliostyle Pub, we will tell you the development status in an easy-to-understand manner by indicators such as the number of pull requests and commits. In particular, objective data will reveal the rapid development of the Vivliostyle Pub in preparation for the alpha release in April.

If you are a user of Vivliostyle products, you will find it interesting and informative. Please read it!

Spring 2022 meetup and release of Vivliostyle Pub alpha version

2022-05-29T00:00:00+09:00

(The original article is 2022年春ユーザーイベント開催とVivliostyle Pubアルファ版の公開 in Japanese)

Holding Spring 2022 meetup

Sorry for the delay in reporting, but our annual meetup was held online on April 23.

Board writing of “Vivliostyle User / Dev Meetup 2022 Spring”; Japanese

The program for the day was as follows (The link in the title of the program is to the video recording).

13:05-13:15 (10min.) Explanation of purpose; Japanese (Katsuhiro Ogata)
13:15-13:40 (25min.) How I use Vivliostyle; Japanese (Taiyo Fujii)
13:40-14:00 (20min.) Vivliostyle’s 2022 Development Plan; Japanese (Shinyu Murakami) [slide]
14:00-14:10 (10min.) Break
14:10-14:30 (20min.) Vivliostyle Pub, which has released an alpha version; Japanese (takanakahiko)
14:30-14:50 (20min.) Survey for using Web fonts in Vivliostyle; Japanese (Katsuhiro Ogata) [slide]
14:50-15-00 (10min.) Break
15-00-15:20 (20min.) To create a printable PDF with an existing Theme file; Japanese (Yusuke S.) [slide]
15:20-15:40 (20min.) CSS typesetting tutorial starting at vivliostyle.org; Japanese (yamasy) [slide]
15:40-16:00 (20min.) Vivliostyle CLI update - 2022 Spring; Japanese (spring_raining)
16:00-16:10 (10min.) Break
16:10-16:50 (40min.) April 2022 Developers’ Meeting; Japanese
16:50-17:00 (10min.) Closing; Japanese (Shinyu Murakami)

Especially precious was the presence of guest sci-fi novelist Taiyo Fujii, who demonstrated his own galley workflow using Vivliostyle for PDF output. His case study was also discussed during the free discussion session ”April 2022 Developers’ Meeting“ in the latter half of the day, where the committers had a lively discussion about possible improvements.

Vivliostyle Pub alpha version is now available!

Another important event of the day was the announcement of the alpha release of the Vivliostyle Pub (see screenshot above) by Representative Shinyu Murakami.

Vivliostyle Pub (alpha release)

Anyone with a Chrome browser (PC version) can use this service free of charge. Please also take a look at the User’s Guide below, which outlines how to use the system.

Vivliostyle Pub Alpha User Guide; Japanese

This product has been in development since the year before last. We are delighted to have reached this first milestone. Of course, the alpha version is only the first step. Vivliostyle Pub still has many challenges to overcome. We will continue to work on the next milestone, the beta version. Please support us.

Line end handling has been evolved to allow multiple typesetting options

2022-02-08T00:00:00+09:00

Fig 1 Old version v.2.13.0 (left) and new version v.2.14.0 (right) of Vivliostyle Viewer.

Introduction

Vivliostyle.js was updated to v2.14.0 on February 4, 2022. Please refer to the following for details.

Vivliostyle.js v2.14.0

While the new version does not have the same prominent features as the JavaScript support introduced in the previous article, it does provide more options for East Asian languages, especially Japanese typesetting. This article will briefly explain its contents.

Evolution of end of line handling

Vivliostyle.js has implemented the text-spacing property of CSS Text Module Level 4 and the hanging-punctuation property of CSS Text Module Level 3 in v2.12.0 (2021-11-13). This allows us to adjust the spacing between words in Japanese/Chinese and European languages, as well as the spacing between consecutive full-width punctuation marks. Considering that text-spacing is not yet implemented in any browser, and hanging-punctuation is only implemented in Safari, this is a very ambitious effort.

Nevertheless, the implementation at this point had some features not yet implemented. Figure 1 shows the same test page in the previous version v.2.13.0 (left, hereafter referred to as the “old version”) and the updated v.2.14.0 (right, hereafter referred to as the “new version”). You can view the same page in your browser by clicking the link below.

The headings in the test page are the properties and their values that are applied. The sample sentences are all the same: the first line has an Ideographic Comma (U+3001) at the 10th character, which is the end of the line; the second line has an Ideographic Full Stop (U+3002) at the 11th character; and the third line has an Exclamation Mark (U+0021) and an Ideographic Comma (U+3001) are placed in the 10th and 11th characters. To make it easier to understand the behavior of the characters, we have drawn light blue reference lines at equal intervals of 16px each, the same as the character size.

Note that the reference line is perfectly aligned with the letter spacing of the first line of the first sample sentence. The spacing is solid (same as the font size) and aligned. As this heading says text-spacing: none; hanging-punctuation: none, this block has the properties text-spacing and hanging-punctuation disabled (none). So the result of typesetting is the same for both old and new versions. This means that if the inter-character spacing and the reference line are aligned, neither spacing reduction nor space expansion is performed. If there is a character before the reference line, some spacing reduction is performed, and conversely, if it is behind the reference line, space expansion is performed. Thus, by comparing the left and right typesetting results, you can check the changes in the new version.

Multiple Japanese typesetting available

Now let’s take a look at Figure 1. Notice the fractions written in red for each heading. This shows how many of the three lines of sample text were aligned with the inter-character spacing and reference line by applying the heading properties. In the old version on the left, except for the first block where the property was disabled, there was one 1/3 and four 0/3, which means that all the typesetting results were not aligned with the reference line.

On the other hand, what about the new version on the right, except for the first block, there are two 0/3, two 2/3, and one 3/3. In other words, there are two extremes: those that are not aligned with the reference line at all (0/3) and those that are aligned with the reference line a lot (2/3, 3/3). This is the evolution of the new version. In other words, you can now choose between two different types of typesetting.

It is generally said that “the basis of Japanese typesetting is solid setting. This is a way of saying that kanji and kana should be set at the same inter-character spacing as the character size (solid/full-width), but it does not describe everything. This is because the character advance of punctuation and parentheses is not solid.Another way of saying this is that there can be different methods within the same Japanese typesetting for how to format them. It can be roughly summarized into two categories.

Give priority to aligning the head and end of lines.
Give priority to aligning inter-character spacing with solid setting.

Of course, the difference between the two is not right or wrong, nor superior or inferior. It’s a matter of preference, which one you find easier to read. Let’s look at the red fractions. The blocks that are not aligned with the reference line, i.e. the third text-spacing: none; hanging-punctuation: force-end (right side 0/3) and the sixth text-spacing: allow-end; hanging-punctuation: allow-end (right side 0/3) corresponds to 1 above. Here, it is no coincidence that the value commonly applied to these two blocks is hanging-punctuation: force-end.

In the first place, the property hanging-punctuation: realizes so-called “hanging punctuation”. And if there are punctuation marks before and after the end of the line, the value force-end will be forcibly hung by either space expansion orspacing reduction. As a result, the line ends will be aligned, but on the other hand, adjustments will occur during the line, making it difficult for the inter-character spacing to become solid.

On the other hand, the second block text-spacing: none; hanging-punctuation: allow-end (right side 2/3) and the fourth blocktext-spacing: allow-end; hanging-punctuation: none (right side 2/3), and the fifth block text-spacing: allow-end; hanging-punctuation: allow-end (right side 3/3) corresponds to 2 above. What they all have in common is allow-end, but that’s not a coincidence, of course.

On the other hand, the allow-end towards hanging-punctuation: is hung only if certain conditions are met. Since there are fewer adjustments than force-end, it is easier to maintain solid setting. And another property, text-spacing, also has allow-end. Here, the punctuation marks and parentheses at the end of the line are basically handled like a full-width character, and in some cases handled like a half-width character. This also makes it easier to keep the solid setting. On the other hand, it will leave a half-width space at the end of the line, as in the first line of the second, fourth, and fifth blocks on the right, and the end of the line will not be aligned.It is up to you to decide whether or not you feel this is readable.

Finally, let’s take a look at the old version typesetting on the left. As a result, the end of the line is aligned. In other words, the typesetting of 1 above has been achieved, but the typesetting of 2 above has not been achieved.In other words, the old version did not allow you to select the typesetting that prioritizes solid setting, but the new version allows you to select this as well.

In this article, we have focused on the handling of line endings, but from the test page below, you can check the various typesetting properties of Vivliostyle.js. Please give it a try.

Test cases

JavaScript can now be used in typesetting by Vivliostyle

2022-01-24T00:00:00+09:00

DynaFont's "DFJadeFangSong JP13N W4" in Vivliostyle Pub, currently under development.

Introduction

Vivliostyle.js was updated to v2.13.0 on January 17, 2022, and Vivliostyle CLI was updated to v4.6.0 on January 18, 2022. Please see below for details of the updates:

The highlight of this update is that JavaScript can now be used for CSS typesetting. In the previous versions, if JavaScript code was included in the HTML, it was removed internally. However, if JavaScript was left unusable, it would limit the utility of Vivliostyle products. Therefore, we have made this available in this update.

Benefits of JavaScript Support in Web Fonts

One of the most significant advantages is the availability of Web font services that use JavaScript. In general, there are three ways to load Web fonts (examples of the corresponding service names are in parentheses):

Load fonts from the internet with @font-face.
Load fonts via external style sheets with @import or link elements (DynaFont, Google Fonts, etc.).
Load fonts using JavaScript (DynaFont, Adobe Fonts, TypeSquare, FONTPLUS, etc.).

One of the bottlenecks in using web fonts is that the speed at which the fonts load depends on the speed of the network. This tends to slow down the display process. This problem is more pronounced with CJK (Chinese, Japanese, and Korean) fonts, which have larger character sets. However, if you use the method 3 above, you can speed up the loading process by using JavaScript to load the target HTML and create a subset that extracts only the necessary characters (dynamic subsetting).

In other words, if you want to use web fonts in Chinese, Japanese, or Korean, using JavaScript can be very effective. However, Vivliostyle has not been able to support this until now.

How to use web fonts with JavaScript in Vivliostyle CLI

Test samples of each Web font service actually used with Vivliostyle Viewer is available below:

Test samples of each Web font service

By the way, some web font services require domain registration (registration of the site to be used) as a condition of use. On the other hand, Vivliostyle CLI has been using the file protocol to load HTML documents. However, the file protocol does not allow for domain registration. So, in this update, we added a new option to load with http protocol. Specifically, it can be used as follows:

Register http://localhost:13000 as a site to be used with web fonts to the web font service in advance (see below for the differences between each company).
Run Vivliostyle CLI with the option --http.

For more detailed information, please refer to the following:

Feat/http hosting #234

However, please keep in mind that there are minor differences among web font services when actually registering domains. The following is a summary for your reference.

FONTPLUS

Register the “site URL” including https://, etc. To use the Vivliostyle CLI with the --http option, register http://localhost:13000/.

TypeSquare

Register a “domain name” that does not include https://, etc. To use the Vivliostyle CLI with the --http option, register localhost.

DynaFont

Domain registration is a requirement for use, but localhost can be used without domain registration. Please refer to their FAQ below (The original text is in Japanese, but we have translated it into English below):

Q: Can I use Web fonts in my local environment?

Answer: In response to the demand for developing in a local environment, DynaFont Online allows you to display web fonts on a local server. By setting up a local server on your PC and placing the target HTML and CSS files in the localhost folder, you can access https://localhost/ from your browser to display the web fonts.

Note: To use DynaFont’s web font service “DynaFont Online”, you need to have an address in Japan. See the FAQ below for details.

Q: Can foreign companies sign up for this service?

Answer: Only domestic companies can sign up. However, editing work can be done outside of Japan.

Other benefits of JavaScript support

The benefits of JavaScript support are not limited to web fonts. Various JavaScript libraries that are widely available today, such as the following libraries, can now be used in Vivliostyle:

Conclusion

This article provides a brief summary of the JavaScript support in this update. For more detailed information, please refer to the following issues:

Event report of “Vivliostyle User/Dev Meetup Autumn 2021”

2021-11-17T00:00:00+09:00

(The original article is 「Vivliostyle ユーザーと開発者の集い 2021秋」開催報告 in Japanese)

The semi-annual “Vivliostyle User/Dev Meetup Autumn 2021” was held online on November 14. The slides and a summary of comments from the day (by yamasy1549) are available at the following page.

In addition, videos of each presentation are available on our YouTube channel as follows.

Part 1: Vivliostyle from the User’s Perspective
- Creating a Dictionary of the Artificial Language Idyer with Vivliostyle (Zsslon) (10:29)
- Trying to use web fonts in Vivliostyle Pub (Katsuhiro Ogata) (17:33)
Part 2: Vivliostyle as a Library
- Vivliostyle.js evolution and future development plans (Shinyu Murakami) (20:20)
- Entrance to Inside Vivliostyle.js (Satoshi Kojima) (16:58)
- Release of VFM 1.0 and future prospects (akabekobeko) (12:39)
Part 3: Vivliostyle as an Application
- Vivliostyle CLI update - 2021 Autumn (spring_raining) (17:14)
- Release of Vivliostyle Theme Development Guidelines (yamasy1549) (16:17)
- Development of Theme Acquisition Library (AyumuTakai) (17:31)
- Vivliostyle Pub Current Status and Future Development Schedule (takanakahiko) (21:42)
- Q&A session (14:27)
Part 4: Vivliostyle Dev Meeting (46:48)

This time, the start time was delayed by about 30 minutes due to my poor setup. Also, due to this, I was not able to get the questionnaire that I had planned for Ayumu Takai’s presentation, which left me with many things to regret. We deeply apologize for the inconvenience caused to everyone who applied for participation and the speakers.

I was impressed by Zaslon’s point that “the information on the official website of Vivliostyle is only describing the application, not the CSS typesetting itself”. Certainly, from the user’s point of view, the information on the official website seems to be biased. Just a few days ago, I had a conversation with Founder Murakami saying, “We are achieving the initial development goals for Vivliostyle.js, so let’s work on the spread of CSS typesetting as the next step”. It’s a good opportunity, so let’s think about what we can do.

I also felt that the code reading that our old friend Kojima-san talked about was very important. One of the issues we’ve been facing in Vivliostyle lately is that the only committer for Vivliostyle.js is Founder Murakami. If we don’t solve this problem, sustainability will be a concern. The only way to do this is to start by getting as many people as possible to read the source code, even if it seems like a detour. I realized that what we need now are measures to support that.

The next meetup is scheduled for next year, Spring 2022. By this time, the beta release of Vivliostyle Pub should have started. Stay tuned to see what announcements we can make!

Recent Vivliostyle.js updates

2021-10-12T00:00:00+09:00

Over the past month, Vivliostyle.js has been undergoing a series of important updates. It was v2.8.1 until early September, and now it is v2.11.1. An overview can be found in the Change Log. This article describes the useful features that have been added, the impact of the bug fixes on the typesetting results, and concludes with a preview of the features that will be implemented in the near future.

Added CSS features

v2.9.0
- @supports……You can switch styles based on whether a particular CSS property, or combination of properties and values, is supported.
v2.10.0
- line-break: anywhere……Allow line breaks between all characters, including punctuation and spaces.
- overflow-wrap: anywhere……To prevent text from overflowing the line box for inline elements, line breaks are intentionally added where they would not normally be.
- white-space: break-spaces……Defines the handling of whitespace in text within an element, similar to white-space: pre-wrap, but also breaks lines between consecutive whitespaces.
- font-variant-caps……Controls glyphs for capital letters in Latin fonts in OpenType format.
- font-variant-ligatures……Controls the glyphs of ligatures in OpenType fonts.
- font-variant-numeric……Controls the glyphs of numbers, fractions, and ordinal symbols in OpenType fonts.
- min-content……For automatic line breaks within a box, the box will be generated for the word with the longest word length to minimize the width of the box.
- max-content……Generates a box without automatic line breaks so that the content is at its maximum width.
- fit-content……In the case where the available area is variable, the box is first generated using max-content, and if the available area is less than the width of max-content, the box is generated by switching to the larger of the available area and min-content.
- unicode-range…… Specifies a specific code point range in the font defined by @font-face.

The last one, unicode-range, is particularly noteworthy. This makes it possible, for example, to use different fonts for Latin and Japanese, or to specify a different font for a particular character or punctuation. Also, when specifying Chinese or Japanese web fonts, you can use this feature to create a subset of glyphs to reduce capacity and improve display speed.

Added text search feature to Vivliostyle Viewer UI

Look at the Vivliostyle Viewer screenshot at the top of this page. You can see a magnifying glass icon in the upper left corner of the screen. This is the new text search icon.You can actually use the latest version of Vivliostyle Viewer from below.

Vivliostyle で本を作ろう Vol.5

Impact of bug fixes on typesetting results

Changed the value of `margin` for `body` in the default style sheet from 8px to 0

From the beginning, Vivliostyle.js has defined a margin value of 8px for the body in the default style sheet for user agents. This setting follows the default value of web browsers.

However, in CSS Paged Media Module Level 3, the page margin is specified by the margin property of @page {...}. Based on this, most CSS Paged Media implementations, including Vivliostyle, set @page {margin: 10%} in the default stylesheet. In such a situation, it makes no sense for Vivliostyle.js to additionally set body { margin: 8px; }. Furthermore, users of Vivliostyle.js always had to specify body { margin: 0 } to avoid extra margin in the page area.

In other words, the default style sheet body { margin: 8px; } that Vivliostyle.js has been setting up until now is not suitable for implementing CSS Paged Media. To fix this situation, we removed this default stylesheet setting in v2.10.0 (margin defaults to 0).

Please see the screenshot. Even though I specified @page {margin: 0;} to intentionally eliminate the margin, there is a spacing of 8px outside the green frame in v2.9.1 on the left (original here). On the other hand, v2.10.0 on the right side renders with zero spacing as specified (original here, code here).

Due to this fix, the typesetting results may differ before and after v2.10.0. If you have been using Vivliostyle Viewer, Vivliostyle CLI, or Create Book which incorporates Vivliostyle.js, please check once to see if your data is affected. Please refer to the issue below for details.

Default body margin should be 0 in paged media #776

Inherited properties specified on the root element can now be inherited to the contents of the `@page`

Let’s compare this with screenshots as well. First, prepare the HTML containing the root element as shown below (the entire code is here). Note that the :root selector specifies the style of the text (color, font-family, variant, size, etc.). Since these are inherited properties, they should be inherited by the headers and footers specified in the following @page.

:root {
  color: maroon;
  font-family: "Georgia", serif;
  font-variant: small-caps;
  font-style: italic;
  font-size: 200%;
}
@page {
  @top-center {
    content: "Here is the Page Header";
  }
  @bottom-center {
    content: counter(page);
  }
}

The screenshots are the above HTML loaded in Vivliostyle Viewer before and after fix. The left side is v2.9.1 before the fix (the original is here), and the right side is v2.10.0 after the fix (the original is here).

Compare the page header and the page footer on the left and right. In the old version on the left, the text styles that should be inherited are not enabled on the page header and footer contents. This is a bug that needs to be fixed. In the new version on the right, you can see that the header and footer are displayed properly as specified.

As in the previous section, this fix may result in different typesetting results before and after v2.10.0. If you have been using Vivliostyle Viewer, Vivliostyle CLI, or Create Book for a long time, please check if your data is affected. For more details, please refer to the following Issue.

Root element styles are not inherited to page context #568

Upcoming updates

Finally, I’d like to give you a brief overview of some of the features that are scheduled to be added in the month or so to come.

CSS Text Level 4: text-spacing……Adjusts spacing between Japanese or Chinese and Western words, as well as consecutive fullwidth punctuations.
CSS Grid Layout……By dividing the screen into multiple grids, elements can be aligned into columns and rows.
Support for JavaScript embedding code for web fonts ……Supports the use of Web fonts with JavaScript embedding code for East Asian fonts, which tend to be large in size (Note that the @import embed code and the link element are still supported).

In addition, at the “Vivliostyle Users/Dev meetup 2021 Autumn” scheduled to be held next month on Sunday, November 14, Founder Murakami will be explaining the Vivliostyle.js update in detail with a demo. We hope you can join us!

New FY2020 Report Released

2021-07-02T00:00:00+09:00

The FY2020 Activity Report has been released as follows.

FY2020 Activity Report

So many things happened last fiscal year. There was the sudden pandemic, in which the contributors proposed to apply for the Mitou Advanced Project to secure development funds. The team worked together to develop the Vivliostyle Pub alpha version. Nevertheless, they were not selected. After overcoming the shock, Vivliostyle CLI, Vivliostyle Themes, VFM, and Vivliostyle Viewer have been greatly enhanced. All thanks to our contributors.

The financial report is also included in Chapter 2. Although we are still in the red, we were able to generate about 1.5 million yen in ordinary income last year. Of that amount, about 60,000 yen came from donations from the general public. We would like to increase the number of such activities in this fiscal year. This report is a 13-page A4 document that summarizes the events of the past year. In the link above, you can view the report in an easy-to-read format using the Vivliostyle Viewer. Please take a look!

Presentation about Vivliostyle at JEPA seminar

2021-06-16T00:00:00+09:00

On June 15, 2021, at the invitation of the Japan Electronic Publishing Association (JEPA), Shinyu Murakami and I gave a presentation on Vivliostyle. The following is the record (Japanese only).

The summary of the presentation was as follows: Shinyu Murakami gave an overview of CSS typesetting and the Vivliostyle project, and then I reported on the following five use cases with demonstrations.

Of the above, we were not involved in the development of case 4, and it is a case where the user found and used Vivliostyle on their own. We were happy that he had chosen our products. I wanted to take this opportunity to help promote it, even if only a little. Please take a look at the video demonstration.

Event report of “Vivliostyle User/Dev meetup Spring 2021”

2021-04-23T00:00:00+09:00

(The original article is 「Vivliostyle ユーザーと開発者の集い 2021春」開催報告 in Japanese)

On April 10th, we successfully held the 4th “Vivliostyle User/Dev meetup”. The slides and videos from the event, as well as the reactions on social media, are available on the following pages.

[Japanese] List of event materials

The videos for each presentation can be viewed below (the videos are also available on the Vivliostyle Foundation channel on YouTube. Please subscribe!)

[Japanese] 1. Opening Katsuhiro Ogata 2:41 movie
Part 1 Expanding World of CSS Typesetting
- [Japanese] 2. Development of a Japanese typesetting system with powerful graphics capabilities Yuto Wada 25:44 movie
- [Japanese] 3. Self-published authors’ expectations of Vivliostyle Saku Oga 8:41 movie
- [English] 4. Introduction to the PrintCSS Playground and PrintCSS Cloud. Andreas Zettl 32:31 movie
Part 2 Vivliostyle Today
- [Japanese] 5. Vivliostyle CLI Development Status spring-raining 14:29 movie
- [Japanese] 6. Development status of Vivliostyle Flavored Markdown akabekobeko 14:14 movie
- [Japanese] 7. Using Create Book to generate a travel essay book Katsuhiro Ogata 20:46 movie
- [Japanese] 8. Development status of Vivliostyle Pub. takanakahiko 15:16 movie
Part 3 Vivliostyle Future
- [Japanese] 9. Implementing CSS Paged Media in Vivliostyle Core Shinyu Murakami 26:56 movie
- [Japanese] 10. Hands-on with Vivliostyle Themes Yamasy 25:07 movie
- [Japanese] 11. Proposed updates to Vivliostyle CLI Ayumu Takai 35:14 movie
- [Japanese] 12. Development Discussion 33:48 movie
[Japanese] 13. Closing Shinyu Murakami 5:35 movie

We always invite people from outside the community to speak at our events. In the first part of this event, we heard valuable reports from Yuto Wada, Saku Oga, and Andreas Zettl. Yuto presented the new generation typesetting system “Twight”, which was adopted as the 2020 Mitou Program. Saku sharply criticized the current situation of Vivliostyle, which is difficult to master from a non-engineer. Andreas introduced his services, PrintCSS Playground and PrintCSS Cloud, which provide APIs for all the CSS typesetting engines in the world and allow you to switch between them and preview them at will. All of the presentations were wonderful and could only be heard at our events. Thank you from the bottom of our hearts.

Our next event is scheduled for October, and by that time, the highly anticipated web app, Vivliostyle Pub, will have finally made its appearance. Naturally, it will be featured prominently in the next event. Please wait for it!

Updates on Vivliostyle—Improved CLI and CSS Paged Media support

2021-04-21T00:00:00+09:00

Vivliostyle’s recent significant updates include improved preview functionality in the Vivliostyle CLI and enhanced support for the CSS Paged Media specifications.

Vivliostyle CLI’s preview improved: Vivliostyle Viewer integration

Starting with Vivliostyle CLI v3.2, the preview feature has been replaced with a full-featured Vivliostyle Viewer instead of the classic simple previewer. The main improvements and benefits of this change are as follows:

Improved usability, including spread view mode, page slider, and navigation through the table of contents panel
The displayed location is now retained without returning to the first page when reloading by updating the manuscript file.
User style sheets can now be specified to change the page layout when typesetting existing Web or EPUB content.
No need to install Vivliostyle Viewer separately, or set up a local web server to use it

For information on how to install and use the Vivliostyle CLI, see the Vivliostyle CLI User Guide.

For detailed updates, see Vivliostyle CLI changelog.

Improved support for the CSS Paged Media specification

With the recent Vivliostyle.js (Core) upgrades (v2.4–v2.8), support for CSS Paged Media, the basic standard for CSS typesetting, and related CSS specifications has been improved:

Named strings / v2.4 (2020-12-28)
- for running headers and footers, retrieving text from elements such as headings in the document body.
:nth() page selector / v2.5 (2021-02-26)
- for styling the Nth page in a document
Named pages / v2.7 (2021-04-07)
- for styling pages by defining named page rule for each page type.
:blank page selector / v2.8 (2021-04-16)
- for styling blank pages caused by spread breaks (forced page break with left or right specified).

For detailed updates, see Vivliostyle.js changelog.

“CSS Paged Media implementation in Vivliostyle.js”

“CSS Paged Media implementation in Vivliostyle.js” was presented at the online event Vivliostyle User/Dev Meetup 2021 Spring (Japanese) on April 10, 2021. Please see the slides:

CSS Paged Media implementation in Vivliostyle.js (View with Vivliostyle Viewer)
- HTML
- Source (GitHub)

Vivliostyle CLI has been majorly upgraded to v3

2021-02-08T00:00:00+09:00

In our first entry of the year, “New Year’s Greetings and Updates on Vivliostyle”, we wrote that Vivliostyle CLI v3 was being prepared, and we are happy to announce that v3.0.0 was officially released on February 7!

vivliostyle/vivliostyle-cli/release/v3.0.0

As a major upgrade, includes many changes. Let’s list just some of a major new features:

Publications can now be customized using a vivliostyle.config.js configuration file
Vivliostyle Themes can now be specified as a style.
The following input formats are now also accepted:
- “VFM”……Markdown enhanced for books.
- “EPUB”……De facto format in e-books.
We support the following output format:
- webpub……HTML exchange format (Same as “webbook” in the entry of 2021/01/06. Same as “webbook”. The reason for the change is here)

Of the above, @spring_raining, a contributor, made a short video about the configuration file, Vivliostyle Themes, and the build process using VFM. The video is shown at the beginning of this entry. Here is a detailed timeline of the video:

Overview of the work. (to 0.01 sec.)
Generate configuration files using a terminal. (to 0.02 sec.)
Load the configuration file Vivliostyle.config.js. (to 0.12 sec.)
Customize by overwriting the configuration files. (to 0.21 sec.)
Using a terminal to load the style file. (Bunko Theme). (to 0.27 sec.)
Use a terminal to read Markdown file, then build and output PDF file. (to 0.47 sec.)
Using Chromium to Preview Typesetting Results.(to 1.05 sec.)
Export PDF file from Chromium. (to 1.15 sec.)

With the above mentioned upgrade to , the utility of the Vivliostyle CLI has been greatly improved. The CLI is a key component at the heart of Vivliostyle Pub, which we hope to release this year. Please stay tuned for Vivliostyle’s next step!

Postscript (2021/02/16)

“Vivliostyle CLI” has been added to “Documentation > User Guides”. This is an official guide that starts with installation and goes through each purpose in detail explaining its functionality. Please check it out!

New Year's Greetings and Updates on Vivliostyle

2021-01-06T00:00:00+09:00

Introduction

Happy New Year to you all! Vivliostyle would like to thank all the contributors who have collaborated with us on our projects over the last year and all the users of our products.

Last year was a year of preparation for Vivliostyle, as we set up our development system and launched new projects. This year, we would like to make the most of our achievements and make a big leap forward.

Last year Vivliostyle has been steadily updating and adding features. Originally, we should have announced the release on this blog, but we ware unable to do so last year. So we’d like to give you a brief overview of Vivliostyle’s current development status in this post.

Added features for vivliostyle.js

First, let’s talk about vivliostyle.js, the foundation of the entire project. The complete changelog of vivliostyle.js can be found on the GitHub release history page. The following two features are especially worth highlighting:

v2.2.0 (2020-11-26)…….Add page slider in Vivliostyle Viewer UI.
v2.4.0 (2020-12-28)…….Support named stringsfor running headers and footers.

One of the most promising ones is “named strings”. The following test page will allow you to see how this property can be used.

Test cases / Named Strings

Click on “stable” or “canary” to launch the latest versions of Vivliostyle Viewer (shown in the figure above). Both of them contain the “named strings” feature. Clicking on “2019.11” or “2018.2” will launch an older version of Vivliostyle Viewer (shown in the figure below) without said “named strings” feature. This way you can compare versions of Vivliostyle with or without the “named strings” feature.

If you are familiar with publishing, you may recognize this feature as useful for running headers. And it does work for that, but it is not the only way to use “named strings”. For example, it can be used in the body element, which allows you to substitute any string you specify as “named strings” in the body or headings, such as the title of a book or the name of the author.

We also want to express our deepest gratitude to Japan Business Press Co.Ltd for their support in the development of these versions.

Vivliostyle CLI v3.0 and output to webbook

Next, let’s take a look at the development status of Vivliostyle CLI. The current version is v2.1.2, and the update history is also available on the GitHub release history page. If you look at this page, you will notice that Release 3.0.0-pre.5 is at the top. In fact, we are currently working on a major update. The specifications for v3.0 are summarized below.

Vivliostyle CLI v3.0 new spec

The centerpiece of the specification is the addition of the WebBook generation function. This allows you to load Markdown (VFM) files and output webbooks (formats that combine HTML files for making books and related files such as CSS, images, fonts, etc. into folders). For information on what a webbook is, please refer to representative director Murakami’s announcement at the developer event in autumn 2020 below.

これからのオープンな出版標準としての「WebBook」

By outputting this webbook as an intermediate file, you will be able to easily convert it to EPUB, Web pages, PDF, etc. from there. It’s a dream come true!

In addition, there is an ongoing discussion about the v3.0 specification at Issue #86, so if you are interested, please join in.

And about Vivliostyle Pub

Finally, let’s talk about our main goal, Vivliostyle Pub. vivliostyle.js and Vivliostyle CLI 3.0 that we have mentioned so far are all elemental technologies of Vivliostyle Pub. Its requirements specification is summarized below.

Vivliostyle Pub v1 要件仕様 (WIP)

The aforementioned Vivliostyle CLI 3.0 is the most important component of Vivliostyle Pub, as can be seen from the fact that webbook is one of the content formats that Vivliostyle Pub can generate.

We hope that by steadily advancing these developments, we will be able to spread our wings in a big way this year. Please support us!

Update on the development of Vivliostyle at Online.tex 2020

2020-12-21T00:00:00+09:00

Introduction

I’m sorry for the delay in reporting, but on November 21, I reported on the development of Vivliostyle Pub at the Online.tex 2020 conference. This was the first time we actually demonstrated Vivliostyle Pub in a public forum.

あしたのVivliostyle

As a forum hosted by a proven Tex community, the feedback was very encouraging. Thank you again.

However, I am sorry that I could not give a precise answer in a moment, as it was a live performance. So, I will give a new answer after discussing it with Shinyu Murakami, the representative. The feedback from that day was as follows.

1. Line indentation is missing
2. Ruby text size is too large
3. How to use ruby for text in a table
4. The cursor focus returns to the first page
5. The cursor position in the editor should also be displayed in the preview screen

1. Line indentation is missing

I am embarrassed to say that this is a careless mistake on my part. Originally, VFM requires two returns for paragraph breaks (hard line breaks). However, in the manuscript I used for the demo, there was only one. In this case, GFM ignores it, but VFM interprets it as a soft line break that is not a paragraph break, and converts it to <br> in HTML (Right figure, upper).

This caused a line break, but not a paragraph break, so the beginning of the line was not indented. See the screenshot of the modified paragraph break with two returns (Right figure, bottom).

2. Ruby text size is too large

In fact, this problem has been pointed out before. So Murakami decided to take this opportunity to register it as an Issue.

ルビの文字サイズ問題: Minimum font size setting in Chrome causes ruby font size problem #673

Let me explain briefly. Originally, Vivliostyle was a kind of polyfill intended to complement the browser. In other words, it leaves a lot of the functionality to the browser and implements its own features that are not implemented in the browser, such as pagination.

The same is true for this ruby typography, which is the result of Chrome’s rendering, not Vivliostyle’s. In the Chrome browser, the default value for the minimum font size is 10px. However, depending on the CSS specification, the size of the rubi text may exceed the minimum font size in Chrome, resulting in the rubi text in Vivliostyle being rendered larger (Right figure, upper).

As a workaround, if you set the minimum font size to 0px in the Chrome preferences, it will be rendered as specified in the CSS (Right figure, bottom).

Here is a side note. If you look closely, you can see that the ruby typesetting in this screenshot does not follow JLReq 3.3.8’s rule that if a ruby extends beyond its parent character, it should be hung on the parent character. In fact, Vivliostyle cannot even fully implement the W3C specification for pagination, and as a result, it often fails to follow the rules in the details. This Ruby typography may be an example of how Vivliostyle is being developed.

3. How to use ruby for text in a table

When I actually specified the rubi in the table, the pipe character | used to specify the rubi was interpreted as a cell break. VFM bug. I registered this issue (there is currently a lot of discussion going on, so if you are interested, please take a look).

テーブルでルビを指定するとパイプ文字がセルの区切りにパースされる

However, there are ways to work around this behavior. VFM parses raw HTML as it is, so you just have to specify ruby in HTML. Originally, Markdown is a simple html note. Therefore, it can be said that it is an implementation which came from the thought that it only has to write by an original writing that it is not possible to write by simple writing.

On the day of this, I explained that I could not nest another element in one element because it was the same problem as the previously registered Issue no other note in the image caption #35, which was another problem and a mistake. I apologize and cancel it.

4. The cursor focus returns to the first page

Yes, the current situation is certainly unfavorable behavior and is already registered as an issue.

エディターで更新のたびにプレビューが１ページ目に戻らないようにすること #53

5. The cursor position in the editor should also be displayed in the preview screen

Certainly. This is also already included in the Vivliostyle Pub v1 Requirements Specification (WIP), which establishes the implementation requirements for ver.1, and will be implemented.

As a result, we can see that vivliostyle Pub is still in its infancy. In particular, there are many insufficient implementations for typesetting. Of course, we are not happy with this situation. By participating Online.tex 2020, we were able to recognize this situation once again. At the same time as we appreciate it, we renew our determination to overcome these challenges.

You can support Vivliostyle without a GitHub account

2020-11-20T00:00:00+09:00

In April of this year, we began soliciting support from GitHub sponsors. Fortunately, at the time of writing, 13 people have supported us from here. We are deeply grateful to our sponsors.

However, to further develop Vivliostyle, we need the support of many more people. GitHub Sponsors need to have a GitHub account. For engineers, GitHub is a familiar service, but for the rest of us, the vast majority of people don’t even know it exists.

So, in order to help people who don’t have a GitHub account to support Vivliostyle, we decided to use the Robot Payment credit card payment service. You can now support Vivliostyle using their service at the following page.

How about supporting Vivliostyle

GitHub sponsors only support recurring payments on a monthly basis. However, Robot Payment offers both recurring payments and one-time payments. The amount of support is also set to range from 100 yen to 250,000 yen for recurring payments and 100 yen to 600,000 yen for one-time payments. Also, while GitHub sponsors’ payments are in dollars, Robot Payment is in yen.

Vivliostyle is an open source project. We hope that as many people as possible will support us in the way you prefer.

Postscript (2022-06-13): Sponsorship through Robot Payment has ended. Thank you for your continued support.

Event report of "Vivliostyle User/Dev meetup autumn 2020"

2020-11-06T00:00:00+09:00

(The original article is 「Vivliostyle ユーザーと開発者の集い 2020秋」開催報告 in Japanese)

Recently, on October 24, we held an online event, “Vivliostyle User and Developer Meetup - Fall 2020.”

We live streamed the event on our YouTube channel. Including the day of the event, 446 people watched it until a week later! This is a record number of people since Vivliostyle began, and I can’t help but feel the anticipation and enthusiasm for CSS typesetting.

Movie and slides from the day’s presentations are available below.

Opening

[Japanese] Opening Speech / Current State and Outlook for Vivliostyle Shinyu Murakami） movie

Part 1 Vivliostyle Today

[Japanese] The growing CSS typesetting ecosystem with the Vivliostyle CLI（spring-raining）movie slide
[Japanese] Vivliostyle Themes project for speedy and customizable bookmaking（Yamasy）movie slide
[Japanese] The Current State of the Vivliostyle Pub and its Challenges（takanakahiko）movie slide

Part 2 Vivliostyle Use Cases

[Japanese] A story about using Vivliostyle to created a thick doujinshi（Miko-Yucho）movie slide
[English/Japanese] Rapid publishing for public health books against COVID-19（Simon Worthington）（With background information and subtitles by Murakami Shinyu）movie Wiki
[Japanese] The story of the production of a commercially published title, “Understanding Regular Expressions through Manga”（Otsu Yuichiro）movie slide

Part 3 Expanding World of CSS Typeetting

[Japanese] About Paged.js, Yet another CSS paged media polyfill（Akabeko）movie slide
[Japanese] The Little-Known CSS for Better Typography（Suzuki Takeru）movie slide

Closing

[Japanese] Q&A session movie

Akabeko-san, who was also a speaker at the event, reports on the day’s events on her blog. He wrote a very detailed and well-written summary of the event, including background information, so please give it a read.

CSS 組版 Vivliostyle ユーザーと開発者の集い 2020 秋｜アカベコマイリ

Finally, I’ll give you some publicity. we’re hosting our monthly developer meeting online on Sunday, November 8. We will discuss how we can develop the Vivliostyle products you saw at the event. Everyone is welcome to attend, so just come and watch.

Vivliostyle Slack Invitation link

The URL will be announced on the day of the event on the #general channel on Slack. Of course, Slack will be open to the public, so please take a look at it.

FY2019 Activity Report is now available

2020-06-11T00:00:00+09:00

Vivliostyle Foundation’s fiscal year is April 1 to March 31. We are pleased to announce that we have prepared the activity report for the second fiscal year, April 1, 2019, to March 31, 2020, as follows:

About Us -> FY2019 Activity Report

To make it easier to read, the activity report is also available for viewing in our main product, Vivliostyle Viewer. Check out the results of CSS typesetting.

As we wrote in the activity report, FY2019 was a period of preparation for the leap forward. Let’s jump farther in FY2020, we’re going for it!

Become a sponsor to Vivliostyle via Github Sponsors

2020-04-29T00:00:00+09:00

We got approved for the GitHub Sponsors program that we had applied for, and the call for sponsors page is now open:

Become a sponsor to Vivliostyle

From this page, you can support a certain amount of money per month to Vivliostyle by clicking the “Select” button on any tier. You can choose between two types of payment: credit card or PayPal.

You can also make anonymous donations by selecting “Private” in the “Who can see your sponsorship?” section (the default is “Everyone”).

There are 10 tiers in total, a wide range of options from $1 to $6,000 per month, as follows:

$1 a month ⭐️ Fan Sponsor: Thank you for loving Vivliostyle. As a thank you, we will put your icon in the BACKERS.md file in the vivliostyle.js repository, along with the badge ⭐️.
$3 a month 🌟 Fan Sponsor: Thank you for loving Vivliostyle. As a thank you, we will put your icon in the BACKERS.md file in the vivliostyle.js repository, along with the badge 🌟.
$10 a month 🌹 Basic Sponsor: Thank you for loving Vivliostyle. As a thank you, we will announce your name on Twitter, and put your icon in the BACKERS.md file in the vivliostyle.js repository and on the official website vivliostyle.org, along with the badge 🌹.
$30 a month 💐 Basic Sponsor: Thank you for loving Vivliostyle. As a thank you, we will announce your name on Twitter, and put your icon in the BACKERS.md file in the vivliostyle.js repository and on the official website vivliostyle.org, along with the badge 💐.
$100 a month 🥉 Bronze Sponsor: Thank you for loving Vivliostyle. As a thank you, we will announce your name on Twitter, and put your icon in the BACKERS.md file in the vivliostyle.js repository and on the official website vivliostyle.org, along with the badge 🥉. Additional benefits include:
- Put your logo in the README file in the vivliostyle.js repository
$200 a month 🥈 Silver Sponsor: Thank you for loving Vivliostyle. As a thank you, we will announce your name on Twitter, and put your icon in the BACKERS.md file in the vivliostyle.js repository and on the official website vivliostyle.org, along with the badge 🥈. Additional benefits include:
- Put your logo in the README file in the vivliostyle.js repository
$500 a month 🥇 Gold Sponsor: Thank you for loving Vivliostyle. As a thank you, we will announce your name on Twitter, and put your icon in the BACKERS.md file in the vivliostyle.js repository and on the official website vivliostyle.org, along with the badge 🥇. Additional benefits include:
- Put your logo in the README file in the vivliostyle.js repository
- Put your logo on the official website vivliostyle.org
$1000 a month 🏆 Platinum Sponsor: Thank you for loving Vivliostyle. As a thank you, we will announce your name on Twitter, and put your icon in the BACKERS.md file in the vivliostyle.js repository and on the official website vivliostyle.org, along with the badge 🏆. Additional benefits include:
- Put your large logo in the README file in the vivliostyle.js repository
- Put your large logo on the official website vivliostyle.org
- 2 hours of support or consulting per month
$2500 a month 💎 Diamond Sponsor: Thank you for loving Vivliostyle. As a thank you, we will announce your name on Twitter, and put your icon in the BACKERS.md file in the vivliostyle.js repository and on the official website vivliostyle.org, along with the badge 💎. Additional benefits include:
- Put your large logo in the README file in the vivliostyle.js repository
- Put your large logo on the official website vivliostyle.org
- 5 hours of support or consulting per month
$6000 a month 💠 Special Sponsor: Thank you for loving Vivliostyle. As a thank you, we will announce your name on Twitter, and put your icon in the BACKERS.md file in the vivliostyle.js repository and on the official website vivliostyle.org, along with the badge 💠. Additional benefits include:
- Put your large logo in the README file in the vivliostyle.js repository
- Put your large logo on the official website vivliostyle.org
- 12 hours of support or consulting per month

Vivliostyle is developed by volunteers. Take this opportunity to consider supporting us!

Event report of "Vivliostyle User/Dev meetup Spring 2020"

2020-04-26T00:00:00+09:00

(The original article is 「Vivliostyle ユーザーと開発者の集い 2020春」開催報告 in Japanese)

Sorry for the late report, but we successfully held the “Vivliostyle User/Dev meetup Spring 2020”.

In our previous post on March 21, we planned that we would be distributing videos online in addition to gathering participants at the venue. However, as the pandemic situation worsened in April, we had to change it to an online only event.

Despite such a bad environment, I think we managed to present “The Present and Future of Vivliostyle” with a lot of presentations by 8 speakers.

In particular, I would like to thank the two guest speakers, kondoyuko and カウプラン機関極東支部, who accepted to speak in the midst of this adversity. It was a valuable opportunity for Vivliostyle in the future to have the opportunity to hear frank opinions from the outside world.

It was also good to be able to report on the “Vivliostyle Pub,” which is under development for release later this year, from a variety of angles, including backend, frontend, and markdown.

I would have liked to have been able to exchange opinions with the guests and visitors at the reception, but I was not able to do so. I hope to have the opportunity to do so at a later date.

All slides and video recordings of the day have been compiled on the event page below. Please take a look when you have the time.

CSS組版 Vivliostyle ユーザーと開発者の集い 2020春

TIB published the first textbook against COVID-19 using Vivliostyle

2020-04-10T00:00:00+09:00

In recent weeks, the new coronavirus (COVID-19) has been rampant around the world. Healthcare professionals have been faced with tough fights in Germany in recent weeks.

To overcome this battle, TIB - Leibniz Information Centre for Science and Technology (aka German National Library of Science and Technology) has rushed to develop openly accessible learning systems for medical students at the forefront of public health services in Germany.

On April 9, 2020, the TIB announced that it had completed its first work, the textbook “Krisenmanagement” (Crisis Management), using Vivliostyle. You can read the press release below.

You can access the textbook “Krisenmanagement” and its description with the links below:

We had a question on Slack from TIB staff, Simon Worthington, on March 26. Over the next few days, we had a technical exchange with Worthington.

TIB’s Lambert Heller, who was in charge of the production, posted his Twitter on April 8 mentioning tools like Vivliostyle, Fidus Writer, Hypothesis, and GitHub that were used in the project that without them, a rapid and fully web-based production workflow of a book with +100 authors would hardly be possible.

In fact, we are super glad to have tools like @fiduswriter, @Vivliostyle, @hypothes_is, @github etc. in place. Without them, a rapid and fully web-based production workflow of a book with +100 authors would hardly be possible.
Thanks @mrchristian99 for bringing it all together! https://t.co/FxgSEPgJE2
— Lambert Heller 🌈🦄🐶 (@Lambo) April 8, 2020

The first press release is from April 9th, but the GitHub repository shows that it was completed on April 3rd. Given that this book was in a hurry to publish as soon as possible, we are proud that Vivliostyle has met their expectations brilliantly.

According to Worthington, the TIB will continue to publish the books one after another with an important book on ‘contact tracing’ which details how the German system works in detail and will be used to bring more health employees up to speed on the procedures.

We will continue to support them as much as possible. Also, if you want to use Vivliostyle in response to the new coronavirus, please do whatever you want please ask us.

Every day is a difficult situation, but let’s work together to fight off COVID-19!

We will hold "Vivliostyle User / Dev Meetup 2020 Spring"

2020-03-21T00:00:00+09:00

(The original article is “CSS組版 Vivliostyle ユーザーと開発者の集い 2020春を開催します” in Japanes)

What can we do during the pandemic of the new Coronavirus (COVID-19)? After a lot of thought, we decided to speed up development. Therefore, the following “event will be held on april 4th.

CSS組版 Vivliostyle ユーザーと開発者の集い 2020春

Because of this situation, it is a dual event that enables a small number of people to participate in the venue, mainly by internet broadcasting. The URL will be announced on the above announcement page and on Twitter. Here are three points we would like to tell you.

User use report and new proposals for Vivliostyle.
New version changes and introduction of the new Vivliostyle family.
Report on “Vivliostyle Pub”, a free consumer service to be released later this year.

The pandemic won’t end so easily. But we can’t stop economic activity as long as we live. In other words, it is necessary to balance virus defense and economic activity.

And, the situation that the Internet becomes an important infrastructure more than before will continue including telework. For this reason, the Web should be easier to use than it is now.

One of the major challenges in Japan is the efficiency of document communication. That’s why Vivliostyle thought it shouldn’t stop developing.

Please participate in our event your way.

Vivliostyle Developer and User Meeting 2019 Summer was held!

2019-09-04T00:00:00+09:00

(The original article is “Vivliostyle 開発者とユーザーの集い 2019 夏開催しました！” in Japanese)

Saturday, August 31, 2019, Vivliostyle Developer and User Meeting 2019 Summer (in Tokyo) hosted by Vivliostyle User Group and Vivliostyle Foundation was held in cooperation with the JAGAT XML Publishing Study Group. Thank you to everyone who participated and cooperated!

Presentation materials at the event are available:
(all presentations are in Japanese)

Part 1: Vivliostyle Developer Meeting

Vivliostyle Development, the past and toward the future
by Shinyu Murakami (@MurakamiShinyu) Vivliostyle Foundation

I just organized Vivliostyle issues into projects by issue category using GitHub Projects - vivliostyle. So I asked the meeting participants which projects were important (multiple answers). The results were:

Bugs: 7 votes
PDF printing: 7 votes
Input formats: 7 votes
Paged media: 15 votes
Typography: 8 votes
Layout enhancement: 10 votes
Web standards: 7 votes
Other improvements:
- Improved error handling (more stable): 5 votes
- UI multilingualization: 3 votes
- Search function: 3 votes
- Chrome extension: 6 votes
- Documentation: 12 votes

Part 2: Vivliostyle User Meeting

Vivliostyle user group joint magazine production | Markdown complexity and deadline
by spring-raining (@spring_raining) Vivliostyle User Group
Convenient usage of Vivliostyle and related tools
by Shinyu Murakami (@MurakamiShinyu) Vivliostyle Foundation
CSS typesetting and production secret story of “Ruby understood by comics”
by
- Minatogawa Ai (@llminatoll) author of “Learn with Wakaba-chan” series
- Youchan (@youchan) Rubyist, author of ”Cat, Shinra, Japanese language and Ruby“
Typesetting vertical text movie script with Vivliostyle
by Ogata Katsuhiro (@ogwata) Denno MAVO LLC. A freelance writer on characters and computer
I tried CSS typesetting! by Yamasy (@yamasy1549)
Fun typesetting ｜ markdown to PDF by Hidemi Ishihara (@hidemi_ishihara)
Create PDF from EPUB files with Vivliostyle by Jun Tajima (@JunTajima) ebook soul

Tweets on the event

Togetter (twitter log): Vivliostyle Developer and User Meeting 2019 Summer (in Japanese)
- Twitter hash tag: #Vivliostyle

Blog articles by event participants

Vivliostyle version 2019.8.101 released!

2019-08-20T00:00:00+09:00

We have released Vivliostyle version 2019.8.101.

(See the latest Vivliostyle Viewer, and User’s Guide)

This is a bug fix version of Vivliostyle version 2019.8.100 released! Now written in TypeScript:

[Viewer UI] Fix keyboard navigation not working
Fix auto resize not working

For more details, see Release Notes.

Vivliostyle version 2019.8.100 released! Now written in TypeScript

2019-08-16T00:00:00+09:00

We have released Vivliostyle version 2019.8.100.

(See the latest Vivliostyle Viewer, and User’s Guide)

Vivliostyle.js source code is now written in TypeScript

Vivliostyle.js started out as a fork of the EPUB Adaptive Layout implementation developed around 2013 by Peter Sorotokin at Google. The original code was written in JavaScript (ES5) with type annotation for the Closure Compiler, and Vivliostyle.js, whose main developer was Toru Kawakubo now at Trim-marks Inc., continued being developed in the same way.

Since the ES5 JavaScript style is old and hard to maintain, we decided to migrate to TypeScript. This migration to TypeScript has now been finished. [#536]

We hope the new TypeScript code will encourage people to contribute to the open source Vivliostyle development.

For development, see the Development document.

Other Changes and Fixes

Build scripts reworked for TypeScript source code
- Transpile to multiple targets, lib/vivliostyle.min.js for ES2018 and lib/vivliostyle-es5.min.js for ES5. [#538]
Resources such as UA stylesheets are no longer downloaded separately [#537]
Remove large sample files from the download package and the npm package [5c3becac] [245c9e7d]
- The download package (vivliostyle-js-latest.zip) size was 6.8MB and now reduced to 1.4MB.
- Vivliostyle sample files are moved from vivliostyle.js to vivliostyle_doc repository.
Fix error “Failed to fetch a source document” with web publications on Microsoft Edge [1ed01afc]
Fix error “empty response for EPUB OPF” on some web servers that don’t know the MIME type for .opf [db8e9bcb]

Previous Releases Summary

Vivliostyle version 2019.1.106: The last JavaScript source code version.
Vivliostyle version 2019.1.101: TOC panel in Viewer UI, Web publications (multi-HTML documents), Loading documents from GitHub, env(pub-title) and env(doc-title), Viewport-percentage units, calc(), Viewer UI setting panel improved, Viewer start page, Render All Pages setting, vivliostyle media type.
Vivliostyle version 2018.10.100: Page number/total pages in Viewer UI
Vivliostyle version 2018.8.100: Viewer UI improvement, CSS Logical properties

For more details, see Release Notes.

Vivliostyle version 2019.1.106 released!

2019-06-14T00:00:00+09:00

We have released Vivliostyle version 2019.1.106.

(See the latest Vivliostyle Viewer, and User’s Guide)

This is a bug fix version of 2019.1.101 release:

Fix Firefox printing problem
Fix error occurring when @page size has vw/vh units

For more details, see Release Notes.

Vivliostyle version 2019.1.105 released!

2019-04-23T00:00:00+09:00

We have released Vivliostyle version 2019.1.105.

(See the latest Vivliostyle Viewer, and User’s Guide)

This is a bug fix version of 2019.1.101 release:

Fix bug that duplicate page margin box content appears at bottom of pages
Fix bug that the operator != in -epubx-expr() causes CSS parser error and fails page generation
Fix problem that some properties are ignored on page partition or margin box context
Fix problem that text-combine-upright: all does not work on WebKit
Fix again the bug that cannot load unzipped EPUB when directory listing is enabled on the server

For more details, see Release Notes.

Vivliostyle version 2019.1.103 released!

2019-04-05T00:00:00+09:00

We have released Vivliostyle version 2019.1.103.

(See the latest Vivliostyle Viewer, and User’s Guide)

This is a bug fix version of 2019.1.101 release:

Fix problem that page background color is not painted in the bleed area
Fix problem that vw/vh units, calc(), -epubx-expr() are invalid on shorthand properties
Fix problem that env(doc-title) etc. doesn’t work when used as a part of the content property value list
Fix bug that TOC box is not properly generated when Adaptive Layout style sheet is used
Fix TOC box keyboard navigation: focus lost when closing a tree item without closing the sub tree items
Fix problem that resizing causes unexpected page move, first page to next
Fix problem that page spread is not centered properly when left/right page widths differ
Fix problem that the specified viewport size (e.g. fixed EPUB’s) causes wrong page resizing
Fix problem that large images may disappear when printing with zero page margin
Support color name rebeccapurple
[Viewer UI] Fix problem that the default page size auto is not respected when print to PDF
[Viewer UI] Fix userStyle CSS parsing and encoding problems
[Viewer UI] Change the order to hide the menu buttons on small screen
[Viewer UI] Adjust FontSize decrease/increase values effective on Text:Smaller/Larger buttons
[Viewer UI] Improve “fontSize” URL parameter: accept percent and fraction

For more details, see Release Notes.

Vivliostyle version 2019.1.102 released!

2019-03-04T00:00:00+09:00

We have released Vivliostyle version 2019.1.102.

(See the latest Vivliostyle Viewer, and User’s Guide)

This is a bug fix version of 2019.1.101 release:

Fixed the bug that cannot open EPUB when the top directory of the unzipped EPUB is specified and the directory listing is enabled on the server.

For more details, see Release Notes.

Vivliostyle version 2019.1.101 released!

2019-02-27T00:00:00+09:00

We have released Vivliostyle version 2019.1.101.

(See the latest Vivliostyle Viewer, and User’s Guide)

This release includes the following improvements:

TOC panel is enabled when #b= Viewer parameter is used, and the publication has TOC data. In HTML documents, the TOC element is marked up with e.g. <nav role="doc-toc">. Vivliostyle recognizes element that is selected with CSS selector [role=doc-toc], [role=directory], nav li, .toc, #toc as a TOC element.

Support Web Publications and similar multi-HTML documents

Supported document types with #b= Viewer parameter are:
- Unzipped EPUB
  - URL of the OPF file can be specified as well as the top directory of the unzipped EPUB files.
- Web publication (a collection of HTML documents with reading order)
  - URL of the primary entry page or manifest file can be specified.
  - For the format of Web publication manifest, W3C draft Web Publications and Readium Web Publication Manifest are supported.
- (X)HTML document
  - When (X)HTML document URL is specified, the URL is treated as primary entry page’s, and a series of HTML files are automatically loaded.
    - When the web publication manifest is specified in the primary entry page (X)HTML document, the readingOrder in the manifest is used.
    - If manifest is not specified or “readingOrder” is not in the manifest, the (X)HTML documents linked from the TOC element that is selected with CSS selector [role=doc-toc], [role=directory], nav li, .toc, #toc are loaded.

Support loading documents from GitHub and some specific URLs

GitHub and Gist URLs can be directly specified. Vivliostyle loads raw github/gist content when github/gist URL is specified.
Aozorabunko (青空文庫) (X)HTML URL can be specified. Vivliostyle loads Aozorabunko’s raw github content when Aozorabunko (X)HTML URL is specified.
JS Bin URL is converted to JS Bin output URL and can be loaded. This is useful for testing Vivliostyle output from small HTML + CSS code, as well as Gist.

Publication title and individual HTML document title are now passed to viewer UI

[Viewer UI] Reflects viewing document title to the web page title.

‘env(pub-title)’ and ‘env(doc-title)’ environment variables for page headers with publication/document titles

Spec: CSS Environment Variables Module Level 1 defines env() function, but env(pub-title) and env(doc-title) are not yet defined so far.
env(pub-title): publication title = EPUB, Web publication, or primary entry page HTML title. Enabled when #b= Viewer parameter (= Viewer.loadPublication() function) is used.
env(doc-title): document title = HTML title, which may be chapter or section title in a publication composed of multiple HTML documents
When title data are not found, i.e. no <title> element in HTML, or env(pub-title) with #x= Viewer parameter, the empty string “” is returned.

Viewport-percentage length units: vw, vh, vi, vb, vmin, vmax, and page-size-percentage units pvw, pvh, pvi, pvb, pvmin, pvmax

Spec: CSS Values and Units - Viewport-percentage lengths, but page-size-percentage units are not defined so far.
Note: On paged media context, the viewport-percentage units vw, vh, vi, vb, vmin, vmax are relative to the size of the page area, i.e., the content area of a page box and not including margin, border and padding specified on @page rule. This makes a lot of sense, but page size relative units may also be necessary. The pvw, pvh, pvi, pvb, pvmin, pvmax units are similar to the vw, vh, vi, vb, vmin, vmax but the reference size is the page size including page margins.

Support CSS ‘calc()’ function

Spec: CSS Values and Units - Mathematical Expressions
In addition to calc() function, min() and max() functions can be used inside calc() function.
Limitation: Percentage value in calc() is not calculated correctly
- This calc() implementation is made simply reusing Adaptive Layout ‘-epubx-expr()’ function, so there are some limitations for now.

[Viewer UI] New “User Style Preferences” in the Settings panel

New settings: Page Margins, Page Breaks (widows/orphans), Images, Text (base font-size, line-height, font-family)
User style CSS code is shown and editable in “CSS Details” box
User style CSS is saved in the URL parameter userStyle=data:,/*<viewer>*/…/*</viewer>*/ and not disappear when reloading, and can be bookmarked in browser.
“Font size (%)” reflects the ViewerOptions.fontSize that can be increase/decrease with “Text: larger/smaller” buttons, and this setting is saved in the new URL parameter fontSize=.

[Viewer UI] Vivliostyle Viewer start page with document URL input and usage description

When document URL parameter (#b= or #x=) is not specified, the start page is now displayed.
Document URL entered by user is reflected in the URL parameter #b=, and when the Enter key is pressed, the document is loaded.

Render All Pages (On/Off) setting

On: for Print (all pages printable, page count works as expected)
Off: for Read (quick loading with rough page count) – This mode is necessary for viewing large publication composed of a lot of HTML documents.
[Viewer UI] This setting can be specified in setting panel and URL parameter renderAllPages=[true | false].
- The default setting is renderAllPages=false for #b= (Book view) and renderAllPages=true for #x= (individual (X)HTML document).

Enabled ‘vivliostyle’ media type by default

This can be used like ‘print’ media type, and useful for distinguish Vivliostyle specific style sheets from general print style sheets.

Other changes

Added style rule h1,h2,h3,h4,h5,h6 { break-after: avoid; } to the default style sheet to avoid page/column breaks after headings by default.
Fix bug that media attribute is not honored on <style> element.
Improved error messages when document loading failed.
Renamed the function corresponding the #b= Viewer parameter, loadEPUB() to loadPublication(), that is now not only for EPUB.

For more details, see Release Notes.

Acknowledgements

Development of this version is supported by Japan Business Press Co., Ltd.

Vivliostyle version 2018.12.103 released!

2019-01-03T00:00:00+09:00

We have released Vivliostyle version 2018.12.103.

This release includes following changes:

Fix bug that ruby (or inline-block/table etc.) causes incorrect pagination
Fix bug on URL fragment parameter f=epubcfi(…) failing to navigate to beginning of an EPUB spine item
Fix error occurring when inline-table is nested in another table and page breaking happens
Setting panel Apply button now closes the panel
Enable Previous Page, Next Page, and Text: Default Size buttons when window is wide enough

For more detail, see Release notes.

Introduction of Viola — Online editor for printing and publishing

2018-11-22T00:00:00+09:00

Hello! I’m spring-raining, a Vivliostyle project collaborator. In this entry, I’ll introduce Viola, which is an online editor using Vivliostyle.

Development history

In 2016, I was looking for a typesetting software to write a self-published technical book: an introduction to software development. Back then the de-facto standard for such typesetting was LaTeX (still the case today). My problem was that I did not have enough knowledge about LaTeX to write a technical manual on my own and to edit the layout as desired. Therefore I was looking for an alternative solution. When I found Vivliostyle, its proposal of doing typesetting by using web technology appeared very attractive to me as a web application engineer.

Since then, I have produced five self-published books using Vivliostyle consistently, and I am convinced of the vision about doing typesetting with web technology. On the other hand, Vivliostyle.js is unfortunately just a JavaScript library, so you need a knowledge of JavaScript to use this library. That is why I decided to develop a new text editor incorporating Vivliostyle so that more people can get experience with CSS typesetting.

About Viola

The primary advantage of Viola is the functionality of the editor. In comparison to other text editors for browsers, Viola has a focus on providing editing functions for programmers and web designers. It can handle multiple HTML, CSS, images and even font files so it allows you to lay out pages as if you were making web pages in a text editor.

In the future, I’m planning to add templates so that even people not familiar with HTML and CSS can write drafts. Please check https://viola.pub!

About viola-savepdf

In connection with the development of Viola, I also released a tool named viola-savepdf. This is a tool for professional engineers and designers who have already established a workflow for editing HTML and CSS. Viola-savepdf is a commandline interface (CLI) that uses Vivliostyle.js in the background to generate a PDF without the need to open a browser.

To install viola-savepdf, setup Node.js and execute the following command:

npm install -g viola-savepdf

After the installation, you can generate the PDF by executing this command:

savepdf -o output.pdf --size A4 input/index.html

You can also check the preview by setting the --preview option:

savepdf --preview input/index.html

Pros & Cons

Similar to Viola, Fidus Writer is a powerful choice of a text editing tools that uses Vivliostyle to achieve web-based typesetting. Differently from Fidus Writer, Viola is not only as a manuscript editing tool but also a text editor for HTML and CSS, so you can edit the manuscript more freely. The live preview function of the output result by Vivliostyle is also a strong advantage of Viola. As of now, Fidus Writer—which has been developed for many years—exceeds it in terms of lightness and comfort on writing. Please try using both editors and find out which one you prefer.

vivliostyle-print has a function similar to viola-savepdf, but its usage is slightly different. vivliostyle-print is provided as a JavaScript library and provides an API that is easy to use the conversion function of Vivliostyle. On the other hand, viola-savepdf is provided as a command line application. From HTML and CSS files in a local directory, it allows you to save the result of conversion by Vivliostyle.

For the future I hope that both Vivliostyle and Viola will be favored by many more and that it will make their text editing experience more pleasant!

On Vivliostyle and webbased publishing — Interview by Fidus Writer

2018-11-12T00:00:00+09:00

An interview ariticle Shinyu Murakami on Vivliostyle and the state of webbased publishing was released on the website of Fidus Writer, an online collaborative editor especially for academics, now using Vivliostyle for PDF generation.

Please read this interview that I am answering various questions about Vivliostyle project and our perspective.

Vivliostyle version 2018.10.100 released!

2018-10-31T00:00:00+09:00

We have released Vivliostyle version 2018.10.100.

This release includes following changes:

Add “Go to Page” (Page number / Total pages) menu item
Navigation UI adjustment
Disable page swipe when pinch-zoomed or horizontal scrollable on touch screen
Fix bug that EPUB internal link does not work

For more detail, see Release notes.

Acknowledgements

Development of this version is supported by Japan Business Press Co., Ltd.

On Vivliostyle-print

2018-10-03T00:00:00+09:00

An interview with myself about the new package Vivliostyle-print

Vivliostyle.js has been with us for a few years already. It can both show paged media in the browser as well as print HTML with extra CSS targeted paged media. What need is there for a Vivliostyle-print then?

It is true that Vivliostyle.js already has existed a few years and Vivliostyle-print adds nothing new in terms of CSS. For end users who only know HTML and CSS and no JavaScript, using Vivliostyle Viewer (Vivliostyle.js + Vivliostyle-ui) continues to be the way to go.

A problem with Vivliostyle.js that I have found though has been that it’s a really complex program when it comes to trying to include it in other software and until recently the documentation was not that extensive. Even now in the process of creating this package, I had to spend more than a day with a lot of chatting and trial and error to get it to work.

Vivliostyle-print should take a lot of the pain away for JavaScript developers with projects that just need the printing features of Vivliostyle.js and nothing else.

Why did you decide to start Vivliostyle-print?

I myself have been working on getting it to work with Fidus Writer, the academic text editor I have spent the last few years on. Back in 2012, we had pagination in the editor itself while the user was writing the document, but that was based on the experimental technology “CSS Regions” and when the Chromium team decided to remove those, we have just had a pagination solution that is invoked when the print dialog is invoked. That solution (paginate-for-print) is something I quickly threw together a few years as a replacement. Even though I have been going around promoting Vivliostyle.js, the complexity of it meant that I never had the time to sit down and create a connector for Vivliostyle.js. Now that I did finally find the time, I thought it would be best to share this so others don’t have to spend as much time on doing this.

What kinds of projects would you think could benefit from this?

Other text editor apps would be one obvious beneficiary. But really any webpage that wants to provide a more high quality print version of their online content: With a little bit of JavaScript they simply intercept the user hitting CTRL+P and then run Vivliostyle-print instead using their original content with some extra CSS for pagination. Online newspapers or blogs would come to mind. But even webbased email applications could benefit from Vivliostyle-print. I really hope this helps popularize Vivliostyle.js usage.

If you run Vivliostyle.js, doesn’t that mess up the DOM of the page? Will users need to reload the page after printing it?

Vivliostyle-print works slightly differently. It runs Vivliostyle.js in the background (in a hidden iframe) which is removed again once the print dialog has disappeared. That way the original DOM is exactly the same before and after Vivliostyle-print is run.

Vivliostyle version 2018.8.100 released!

2018-09-10T00:00:00+09:00

We have released Vivliostyle version 2018.8.100. This is the first release after the open source Vivliostyle’s organization change.

This release includes following changes:

Page navigation UI improvement
- Swipe support on touch devices
- Add buttons for move to first/last page
- Hide the previous/next page arrow when there’s no previous/next page
Omit &f=epubcfi(/2!) in URL at first page
Support CSS Logical properties
Bug fixes

For more detail, see Release notes.

We also updated Vivliostyle Viewer User’s Guide, which has the following contents:

How to use (on local environment, or online Vivliostyle Viewer)
Specifying the HTML file to be displayed in Vivliostyle Viewer
To display an EPUB
To specify multiple HTML files
To specify page spread view mode
To specify additional style sheets
How to Print/Save as PDF from Vivliostyle Viewer

In addition, our organization Vivliostyle.org got a new name, Vivliostyle Foundation.

A New Beginning for Vivliostyle

2018-03-26T00:00:00+09:00

Vivliostyle was founded as a startup company on a vision for bridging the gap between the web and the world of printing. To this end, the company worked on an open source project, among other things.

Responding to its business needs, the company has evolved, and “other things” have become dominant; open source products are no longer at the core of its strategy.

Therefore, as of February 16, 2018, Vivliostyle-the-company has decided change its name to reflect its updated strategy, and to transfer control over Vivliostyle-the-opensource-project to former members still interested in pursuing the open source project.

For more details about the company, please consult trim-marks.com or contact info@trim-marks.com.

As Vivliostyle is no longer affiliated with a for-profit company, we’re moving it from vivliostyle.com to vivliostyle.org. Going forward, the “Vivliostyle” branding (including the github organization, social media accounts, etc) will exclusively be used by the open source project.

We would like to thank the management of Trim-marks Inc. for letting the project continue on its own path and under its original name.

Going forward, we expect to focus on (in rough order of priority):

Setting up automated testing and continuous integration, to track the latest web standards test
Making on boarding for new users and new contributors easier
Working on interoperability and fixing compatibility bugs
Keeping up to date with the newest web standards
Integrating better with the ecosystem (npm, docker…)
Experimenting with new layout solutions and bringing them to standardization

If you’re interested in helping this (and more) happen, make sure to get in touch!

Find us on:

Stay tuned for more!

Vivliostyle

Vivliostyle CLI v10 Released! Integrated create Command Makes Book Creation Smoother

1. create-book Integrated into CLI: Start Projects Instantly with the create Command

An Interactive Interface That Gets You Started Without Confusion

2. Major Evolution in PDF Output Engine Options

Specify Not Just Browser Type, but Also Version

3. Other Improvements in v10

Experience the New Vivliostyle CLI Today

How to Update

Related Links

Obtained a grant from NLnet

Introduction

What This Grant Means for Us

About the NLnet Foundation and the NGI0 Commons Fund

Event report of “Vivliostyle User/Dev Meetup Spring 2023”

Link to the day’s program and video

Summary of each presentation

A book explaining Vivliostyle is released!

A book that describes what you can do with CSS typesetting

Generous disclosure of techniques unique to CSS typesetting

Introduction of the new Vivliostyle Themes

How to use Vivliostyle Theme

CSS framework based on CSS variables

Systematized CSS variables

meta-properties.css

basic.css

Other CSS Variables

Examples of Actual Application

Create your own theme

Conclusion

Event report of “Vivliostyle User/Dev Meetup Autumn 2022”

“Vivliostyle User/Dev Meetup Autumn 2022” was held

Evaluation of implementation by Takeru Suzuki-san (FONTPLUS)

“Gyou-dori” will become easy with Vivliostyle.js in the near future

Incompatibility Changes in VFM v2

Theme enhancements in the Vivliostyle CLI

Introductory book on Vivliostyle to be published commercially

Conclusion

Vivliostyle Pub now exports PDF files

New FY2021 Activity Report Released

Spring 2022 meetup and release of Vivliostyle Pub alpha version

Holding Spring 2022 meetup

Vivliostyle Pub alpha version is now available!

Line end handling has been evolved to allow multiple typesetting options

Introduction

Evolution of end of line handling

Multiple Japanese typesetting available

JavaScript can now be used in typesetting by Vivliostyle

Introduction

Benefits of JavaScript Support in Web Fonts

How to use web fonts with JavaScript in Vivliostyle CLI

FONTPLUS

TypeSquare

DynaFont

Other benefits of JavaScript support

Conclusion

Event report of “Vivliostyle User/Dev Meetup Autumn 2021”

Recent Vivliostyle.js updates

Added CSS features

Added text search feature to Vivliostyle Viewer UI

Impact of bug fixes on typesetting results

Changed the value of margin for body in the default style sheet from 8px to 0

Inherited properties specified on the root element can now be inherited to the contents of the @page

Upcoming updates

New FY2020 Report Released

Presentation about Vivliostyle at JEPA seminar

Event report of “Vivliostyle User/Dev meetup Spring 2021”

Updates on Vivliostyle—Improved CLI and CSS Paged Media support

Vivliostyle CLI’s preview improved: Vivliostyle Viewer integration

Improved support for the CSS Paged Media specification

“CSS Paged Media implementation in Vivliostyle.js”

Vivliostyle CLI has been majorly upgraded to v3

Postscript (2021/02/16)

New Year's Greetings and Updates on Vivliostyle

Introduction

Added features for vivliostyle.js

Vivliostyle CLI v3.0 and output to webbook

And about Vivliostyle Pub

Update on the development of Vivliostyle at Online.tex 2020

Introduction

1. `create-book` Integrated into CLI: Start Projects Instantly with the `create` Command

`meta-properties.css`

`basic.css`

Changed the value of `margin` for `body` in the default style sheet from 8px to 0

Inherited properties specified on the root element can now be inherited to the contents of the `@page`