| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>text-orientation test</title> | |
| <style> | |
| :root { | |
| writing-mode: vertical-rl; | |
| } | |
| .s { |
| @page { | |
| margin: 8%; | |
| @bottom-center { | |
| writing-mode: horizontal-tb; | |
| font-size: 67%; | |
| content: "– " counter(page) " –"; | |
| } | |
| } | |
| @page :first { | |
| margin: 0; |
「Paged.js を試す」 @akabekobeko
https://akabeko.me/blog/2020/10/pagedjs/
Vivliostyle サンプル
| # EquivalentUnifiedIdeograph-modified.txt | |
| # | |
| # Modified by Shinyu Murakami <murakami@vivliostyle.org> | |
| # for use to correct CJK text in Chrome-generated PDFs. | |
| # see https://github.com/vivliostyle/vivliostyle-cli/issues/40 | |
| # | |
| # The original version is: https://www.unicode.org/Public/13.0.0/ucd/EquivalentUnifiedIdeograph.txt | |
| # | |
| # Modifications: | |
| # - Put a parenthesized character after each code point for human readability |
| <!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; |
| #!/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; |
| <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"> |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Test: Page Header + Page Bottom Float</title> | |
| <style> | |
| .pagebottomfloat { | |
| float: bottom; | |
| float-reference: page; | |
| } | |
| @page { |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Test: Page Header + Footnote</title> | |
| <style> | |
| .footnote { | |
| float: footnote; | |
| } | |
| @page { | |
| @top-center { |