Shinyu Murakami MurakamiShinyu

## dabblet.css
/**
 * Flex centering
 */
body {
	display: flex;
	border: outset blue;
	margin: 0;
	text-align: center;
	height: 100vh;
	box-sizing: border-box;

## Vivliostyle.js#465 - error on table.md

      
              3 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                MurakamiShinyu
                / Vivliostyle.js#465 - error on table.md
            
            
              Last active
              December 21, 2018 15:31
            
          
    vivliostyle/vivliostyle.js#465
The problem occurs when page breaking happens inside a table cell that contains an element with
display: inline-table.
Test with the online Vivliostyle Viewer:

test1: https://vivliostyle.github.io/vivliostyle.js/viewer/vivliostyle-viewer.html#x=https://gist.githack.com/MurakamiShinyu/e2d99fe498b3de5f280371d40241dc93/raw/5418ec6fc372101c547b8dcf61664787cb623aaa/test1.html&spread=false
test2: https://vivliostyle.github.io/vivliostyle.js/viewer/vivliostyle-viewer.html#x=https://gist.githack.com/MurakamiShinyu/e2d99fe498b3de5f280371d40241dc93/raw/5418ec6fc372101c547b8dcf61664787cb623aaa/test2.html&spread=false

Debug on local machine (npm run serve-dev with vivliostyle-ui, see https://github.com/vivliostyle/vivliostyle.js/wiki/Development)

  
## dabblet.css
/**
 * The first commented line is your dabblet’s title
 */

background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

## test-pageheader-pagebottomfloat.html
<!DOCTYPE html>
<html>
  <head>
    <title>Test: Page Header + Page Bottom Float</title>
    <style>
.pagebottomfloat {
  float: bottom;
  float-reference: page;
}
@page {

## test-pageheader-footnote.html
<!DOCTYPE html>
<html>
  <head>
    <title>Test: Page Header + Footnote</title>
    <style>
.footnote {
  float: footnote;
}
@page {
  @top-center {

## link-to-vivliostyle-view-sample.html
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test: Link to Vivliostyle Viewer samples</title>
</head>
<body>
  <h1>Test: Link to Vivliostyle Viewer samples</h1>
  <ul>
    <li>
      <a href="https://vivliostyle.github.io/vivliostyle.js/viewer/vivliostyle-viewer.html#x=https://vivliostyle.github.io/vivliostyle_doc/samples/gutenberg/Alice.html">

## cssLogical.pl
#!/usr/bin/perl
while (<>) {
  s/(?<![^;{\s])(margin|padding|border)-top:/$1-block-start:/g;
  s/(?<![^;{\s])(margin|padding|border)-right:/$1-inline-end:/g;
  s/(?<![^;{\s])(margin|padding|border)-bottom:/$1-block-end:/g;
  s/(?<![^;{\s])(margin|padding|border)-left:/$1-inline-start:/g;
  s/(?<![^;{\s])border-top-(color|style|width):/border-block-start-$1:/g;
  s/(?<![^;{\s])border-right-(color|style|width):/border-inline-end-$1:/g;
  s/(?<![^;{\s])border-bottom-(color|style|width):/border-block-end-$1:/g;
  s/(?<![^;{\s])border-left-(color|style|width):/border-inline-start-$1:/g;

## table-variable-n-of-cells-in-rows.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Test: Table with variable number of cells in rows</title>
  <style>
    table,
    td {
      border: 1px solid;

## 00-Vivliostyle-tutorial-sample.md

      
              7 files
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                MurakamiShinyu
                / 00-Vivliostyle-tutorial-sample.md
            
            
              Last active
              August 27, 2020 03:18
            
          
    A Vivliostyle tutorial sample (Vivliostyle CSS組版ちょっと入門サンプル)

View with Vivliostyle Viewer


https://vivliostyle.org/viewer/#src=https://gist.github.com/MurakamiShinyu/4f0423fd3578a277c7d29f56a31912b7/raw/index.html&bookMode=true


with print marks (トンボ付き): https://vivliostyle.org/viewer/#src=https://gist.github.com/MurakamiShinyu/4f0423fd3578a277c7d29f56a31912b7/raw/index.html&style=https://gist.github.com/MurakamiShinyu/4f0423fd3578a277c7d29f56a31912b7/raw/print-marks.css&bookMode=true


## review-akabekos-pagedjs-test.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                MurakamiShinyu
                / review-akabekos-pagedjs-test.md
            
            
              Last active
              October 29, 2020 17:17
            
          
    「Paged.js を試す」 @akabekobeko のレビュー

「Paged.js を試す」 @akabekobeko

https://akabeko.me/blog/2020/10/pagedjs/

Vivliostyle サンプル


高瀬舟 (ルビ) - 固定サイズ
	/**
	* Flex centering
	*/
	body {
	display: flex;
	border: outset blue;
	margin: 0;
	text-align: center;
	height: 100vh;
	box-sizing: border-box;
	/**
	* The first commented line is your dabblet’s title
	*/

	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
	<!DOCTYPE html>
	<html>
	<head>
	<title>Test: Page Header + Page Bottom Float</title>
	<style>
	.pagebottomfloat {
	float: bottom;
	float-reference: page;
	}
	@page {
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Test: Link to Vivliostyle Viewer samples</title>
	</head>
	<body>
	<h1>Test: Link to Vivliostyle Viewer samples</h1>
	<ul>
	<li>
	<a href="https://vivliostyle.github.io/vivliostyle.js/viewer/vivliostyle-viewer.html#x=https://vivliostyle.github.io/vivliostyle_doc/samples/gutenberg/Alice.html">
	#!/usr/bin/perl
	while (<>) {
	s/(?<![^;{\s])(margin\|padding\|border)-top:/$1-block-start:/g;
	s/(?<![^;{\s])(margin\|padding\|border)-right:/$1-inline-end:/g;
	s/(?<![^;{\s])(margin\|padding\|border)-bottom:/$1-block-end:/g;
	s/(?<![^;{\s])(margin\|padding\|border)-left:/$1-inline-start:/g;
	s/(?<![^;{\s])border-top-(color\|style\|width):/border-block-start-$1:/g;
	s/(?<![^;{\s])border-right-(color\|style\|width):/border-inline-end-$1:/g;
	s/(?<![^;{\s])border-bottom-(color\|style\|width):/border-block-end-$1:/g;
	s/(?<![^;{\s])border-left-(color\|style\|width):/border-inline-start-$1:/g;