Skip to content

Instantly share code, notes, and snippets.

View MurakamiShinyu's full-sized avatar

Shinyu Murakami MurakamiShinyu

View GitHub Profile
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Root element styles should be inherited to page context</title>
<style>
:root {
color: maroon;
font-family: "Georgia", serif;
font-variant: small-caps;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Root element styles should be inherited to page context</title>
<style>
:root {
color: maroon;
font-family: "Georgia", serif;
font-variant: small-caps;
<!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;
@MurakamiShinyu
MurakamiShinyu / East_Asian_Typographic_Variation_Selectors.md
Last active December 17, 2020 07:51
文字幅と縦書きの文字の向きを指定する異体字セレクタ(提案)

文字幅と縦書きの文字の向きを指定する異体字セレクタ(提案)

名称と略称の案:
East Asian Typographic Variation Selectors (EATVS)

目的

従来フォント依存あるいは処理系依存でありプレーンテキストでは指定することができなかった文字幅や縦書きの文字の向きを特別な異体字セレクタにより指定できるようにする。

  • 文字幅(全角、半角、プロポーショナル)を指定。UAX #11 East_Asian_Width (EAW) プロパティに変更を加える。約物の全角・半角の指定ができる。
# 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;
@MurakamiShinyu
MurakamiShinyu / cssLogical.pl
Created November 26, 2019 14:27
Convert CSS non-logical properties to logical properties
#!/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;