yamatoiizuka / palt-typesetting Goto Github PK
View Code? Open in Web Editor NEWTypesetting Library for Proportional Spacing
Home Page: https://palt.typesetting.jp
License: MIT License
Typesetting Library for Proportional Spacing
Home Page: https://palt.typesetting.jp
License: MIT License
日本語と半角カンマ、ピリオドとの間に発生する四分アキを取り除く
入力
ラテン, 日本語.
出力
ラテン<thin-space />, 日本語<thin-space />.
thin space が挿入されず、そのままのスペースを維持するように修正します。
入力
ラテン, 日本語.
出力
ラテン, 日本語.
dist の css で (width >= 500px)
が使われているが、レガシー環境で対応できない。
現状の kerningRules
はわかりやすいが、記述が冗長な印象。
現在の記法は残しつつ、省略記法を考える。
現状
kerningRules: [
{
between: ['し', 'ま'],
value: '60',
},
{
between: ['す', '。'],
value: '-80',
},
]
省略記法の例
kerningRules: {
'し-ま': 60,
'す-。': -80,
}
固定の style は CSS を一度だけ読み込むようにするなど。
as is:
<span class="typeset" style="word-break: keep-all; overflow-wrap: anywhere;">...</span>
to be
<span class="typeset">...</span>
.typeset {
word-break: keep-all;
overflow-wrap: anywhere;
}
Web コンポーネントもありえそう。
見通しも良くなるし、option 値を下層まで伝えずに済むのでいいかもしれない。
as is:
<span class="typeset" style="word-break: keep-all; overflow-wrap: anywhere;"><span class="typeset-latin">Text</span><span class="typeset-thin-space" style="font-size: 50%; user-select:none;" aria-hidden="true" data-nosnippet=""> </span></span>
to be
<!-- typeset-thinsp は ::after 擬似要素などで   を出力する -->
<typeset-wrapper><typeset-latin>Text</typeset-latin><typeset-thinsp></typeset-thinsp></typeset-wrapper>
using export default
, ReferenceError: "Typesetter" is not defined.
error occurs.
as is
const applyWbrStyle = (text: string): string => {
return `<span style="word-break: keep-all; overflow-wrap: anywhere;">${text}</span>`
}
to be
const applyWbrStyle = (text: string): string => {
return `<span class="typeset" style="word-break: keep-all; overflow-wrap: anywhere;">${text}</span>`
}
Problem:
カーニングオプションがかかっている よ-う-な
の下線に、不要な空白がある。
現状は空の span にマージンを持たせているが、Invisible Separator に letter-spacing を持たせるのがいいかもしれない。
Current:
return `<span class="typeset-kerning" style="margin: -0.03em"></span>`
Solution:
const INVISIBLE_SEPARATOR = String.fromCharCode(0x2063) // U+2063 INVISIBLE SEPARATOR
return `<span class="typeset-kerning" style="letter-spacing -0.06em">${INVISIBLE_SEPARATOR}</span>`
or Ideally:
return `<typeset-kerning value="-0.06em"></typeset-kerning>`
(see Minimize the output HTML #49)
美しいWeb組版のためのライブラリ、素晴らしいと思います。
READMEを読んでいて、デフォルトのアキ量が四分アキとありましたが、値としては0.2emなことに気がつきました。
単純に計算するのであれば四分 = 25% = 0.25emかと思ったのでIssueを立ててみました。
視覚上の調整などであればすみません。
when useWordBreak === false && insertThinSpaces === false
,
and input = "Palt Typesetting は、美しい組版を作ります。"
as is
<typeset-latin>Palt Typesettingは、美しい組版を作ります。</typeset-latin>
to be
<typeset-latin>Palt Typesetting</typeset-latin>は、美しい組版を作ります。
日本語と全角括弧類との間に発生する四分アキを取り除く。
LanguageClass.isJapanese()
で、
一部括弧類が日本語に判定されないことに起因しているので、
japaneseRegex
が括弧類を含むように修正する。
入力
どうも(こんにちは]
出力
どうも<thin-space />(<thin-space />こんにちは<thin-space />]
入力
どうも(こんにちは]
出力
どうも<thin-space />(こんにちは]
スペースやタブ、その他制御文字(改行を行う \n
など)の前後に四分アキを入れない
as is
<span class="typeset-latin">English</span><span class="typeset-thin-space"> </span>。
to be
<span class="typeset-latin">English</span>。
wrapLatin
, noSpaceBetweenNoBreaks
, kerningRules
の3つは Intl.Segmenter に依存しなくなったので、これらの処理は Firefox でも行うよう修正する。useWordBreak
と insertThinSpaces
はスキップする。
Refactor
Add
ツメ組みの日本語全体の文字間を広げてしまうと漢字がパラパラして見えてしまう。
ひらがな、カタカナ、全角記号類のみを .typeset-palt
でラップする wrapPalt
オプションを検討する。
現状:
.p {
font-feature-setting: palt;
/* テキスト全体にトラッキングがかかる */
letter-spacing: 0.12em;
}
.typeset-latin {
/* 英語だけトラッキング調整 */
letter-spacing: 0.05em;
}
with wrapPalt
option:
.p {
/* テキスト全体にトラッキング。英数が基準。 */
letter-spacing: 0.05em;
}
.typeset-palt {
/* ひらがな、カタカナ、全角記号だけ文字間を広げる */
font-feature-setting: palt;
letter-spacing: 0.12em;
}
バンドルはむずかしい
Use from CDN
section from READMETypeSet methods
Webにおける日本語ツメ組の課題を解決するプログラムを作成したことに敬意を表します。
さて、ごく稀なケースですが、ダイアクリティカルマーク付きのラテン文字のみで構成される単語があった場合、ラテン文字クラスにならずに和欧間スペースが挿入されない不具合を見つけたので報告とPRをいたします。
ダイアクリティカルマークがない文字を含む単語の場合は、 latinRegex = /[A-Za-z...]/
を使って latinRegex.test(segment)
で判定しているのでラテン文字クラスと判定されています。
このケースに該当するのは、フランス語の前置詞 à とイタリア語の動詞の活用系 è、ピンインの a/o/e にマークのついた文字くらいしか思いつきませんが、他にもあるかもしれません。
前置詞à
前置詞<space><wbr>à
前置詞<wbr>à
ラテン文字かどうかを判定する latinRegex
の文字集合を次のように変更する
export const latinRegex = /[\p{scx=Latin}0-9!"#$%&'()*+,\-./:;<=>?@[\\\]^_`{|}~]+/u
Add to README and Update the Demo
iOS Safari にて、特定時の条件下(組版のオンオフ切り替えを行なった場合)で行末禁則が崩れる事例が見られた。「て-、」間には負値のカーニングがかかっており、不要な after 擬似要素が原因と思われる。
現状
.typeset-thin-space::after,
.typeset-kerning::after {
content: attr(data-content); /* Space または No-Break Space */
font-family: ling-one; /* カスタムフォントのスペースを使用します。 */
line-height: 0; /* 空白による行の高さの影響を無視します。 */
}
解決策
data-content
属性を持つタグにのみ、content などのスタイルを当てるように変更する。
.typeset-thin-space[data-content]::after,
.typeset-kerning[data-content]::after {
content: attr(data-content); /* Space または No-Break Space */
font-family: ling-one; /* カスタムフォントのスペースを使用します。 */
line-height: 0; /* 空白による行の高さの影響を無視します。 */
}
palt.typesetting.jp
TypeSet クラスへのメソッドの追加
サクッとテキストを入れて、ライブラリの挙動を検証できるデモページがあるといい。
最終的には Google Fonts の Type Tester くらいにしたいイメージだが、最初の段階としてはデバッグ目的のシンプルなものがあればいい。
ドメインは palt.typesetting.jp/playground
あたりがいい。
use esbuild
現状は THIN SPACE (U+2009) で四分アキを実現しているが、
両端揃え (text-align: justify;
) で行末にきた場合には無視される、
SPACE (U+0020) を使用する方が望ましい。
現状 SPACE を採用していない理由は、Chrome のフォントサイズ 10px 制限に起因している。
解決策
通常の半角スペースよりも狭い幅の SPACE (U+0020) グリフのみを持ったフォントデータを作成し、
.typeset-thin-space
内で使用する。
現在はラテン文字と日本語で使われる文字の間にスペースが入るようになっていますが、同様に次の文字体系の場合もスペースが欲しいです。
ラテン文字とくらべて使用頻度は少ないですが、ヴィタリ・ユシュマノフ『はじめてでも美味しく作れる ロシア料理』には日本語の文中に材料や料理名を説明するためロシア語が現れます。他にはクラシック音楽でのロシアの作曲家名や作品名の表記が用途として思いつきます。
多言語化して各言語間の印象を統一しよう!という試みでフォントとして他によく実装されているのがヘブライ文字とアラビア文字ですが、日本語の文脈上で出てくることはまずないので(書字方向の扱いもややこしいので)、ひとまずはキリル文字とギリシャ文字だけでいいかと思いました。
「その他」には上付きや下付きの数字、通貨記号などを想定しています。
例文:
HTMLProcessor の処理が DOM 依存のためかなり遅い。
なるべく DOM に頼らずに HTML テキストを解析できればある程度は解消できそう。
候補:htmlparser2
input
kerning: [{
between: ['す', '。'],
value: '-80'
}]
expected
す<span style="margin: -0.04em;"></span>。
Thank you for the awesome library, but I want to tell you that it doesn't work in Firefox.
中点類(・:;)の前後は四分アキではなく、八分アキにする。
四分アキだとだいぶ空いて見えてしまう。
calc(options.thinSpaceWidth / 2.0)
みたいにすれば OK。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.