yamatoiizuka / palt-typesetting Goto Github PK

日本語と半角カンマ、ピリオドとの間に発生する四分アキを取り除く

現状

入力

ラテン, 日本語.

出力

ラテン<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="">&thinsp;</span></span>

to be

<!-- typeset-thinsp は ::after 擬似要素などで &thinsp; を出力する -->
<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 はスキップする。

• Add twitter:title meta tag
• Create input button of wrapLatin in #target

Refactor

• addWbrToHtml → useWordBreak
• addThinSpaceToHtml → addThinSpaces
• kerning → kerningRules

Add

• noSpaceBetweenNoBreaks（分離禁則文字を .typeset-no-breaks 文字間をゼロにする）
• wrapLatin（英数を .typeset-latin でラップする）
• classNamePrefix (クラス名のprefix。default: 'typeset')

ツメ組みの日本語全体の文字間を広げてしまうと漢字がパラパラして見えてしまう。
ひらがな、カタカナ、全角記号類のみを .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;
}

バンドルはむずかしい

• Remove Use from CDN section from README
• Remove bundle related scripts in package.json
• Uninstall ESBuild

TypeSet methods

• renderFromElements → renderToElements
• renderFromSelector → renderToSelector

Webにおける日本語ツメ組の課題を解決するプログラムを作成したことに敬意を表します。

さて、ごく稀なケースですが、ダイアクリティカルマーク付きのラテン文字のみで構成される単語があった場合、ラテン文字クラスにならずに和欧間スペースが挿入されない不具合を見つけたので報告とPRをいたします。

ダイアクリティカルマークがない文字を含む単語の場合は、 latinRegex = /[A-Za-z...]/ を使って latinRegex.test(segment) で判定しているのでラテン文字クラスと判定されています。

このケースに該当するのは、フランス語の前置詞 à とイタリア語の動詞の活用系 è、ピンインの a/o/e にマークのついた文字くらいしか思いつきませんが、他にもあるかもしれません。

Input

前置詞à

Expected

前置詞<space><wbr>à

Actual

前置詞<wbr>à

解決法

ラテン文字かどうかを判定する latinRegex の文字集合を次のように変更する

export const latinRegex = /[\p{scx=Latin}0-9!"#$%&'()*+,\-./:;<=>?@[\\\]^_`{|}~]+/u

Add to README and Update the Demo

• -webkit-text-stroke
• vertical-align

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; /* 空白による行の高さの影響を無視します。 */
}

• GitHub Pages
• Set Domain to palt.typesetting.jp
• Update README

• CSS の調整
• トグルボタンの色調整
• メールアドレスの@変換の修正
• index.ts にコメントを追加

TypeSet クラスへのメソッドの追加

• HTMLElement（ひとつまたは複数）の innerHTML を変換し、セットするメソッド
• class 名や id 名（.piyo や #hoge など）をもとに HTMLElement を取得し、変換後の innerHTML をセットするメソッド
• 上記について最低限のテストを作成する

Safari のリーダーモードで両端揃えの場合、<wbr> が入っている箇所（「い-て」「ト-表」など）の文字間が0になってしまい、アキ量が揃わない模様。Zero Width Joiner のような挙動に見える。<wbr> に visibility: hidden; をかけることで、目的の挙動（改行の許可）を失わずに対応できそう。

.typeset wbr {
  visibility: hidden;
}

サクッとテキストを入れて、ライブラリの挙動を検証できるデモページがあるといい。
最終的には 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 内で使用する。

現在はラテン文字と日本語で使われる文字の間にスペースが入るようになっていますが、同様に次の文字体系の場合もスペースが欲しいです。

• キリル文字
• ギリシャ文字
• その他

ラテン文字とくらべて使用頻度は少ないですが、ヴィタリ・ユシュマノフ『はじめてでも美味しく作れる ロシア料理』には日本語の文中に材料や料理名を説明するためロシア語が現れます。他にはクラシック音楽でのロシアの作曲家名や作品名の表記が用途として思いつきます。

多言語化して各言語間の印象を統一しよう！という試みでフォントとして他によく実装されているのがヘブライ文字とアラビア文字ですが、日本語の文脈上で出てくることはまずないので（書字方向の扱いもややこしいので）、ひとまずはキリル文字とギリシャ文字だけでいいかと思いました。

「その他」には上付きや下付きの数字、通貨記号などを想定しています。

例文：

• 温室効果ガス CO₂ の削減
• 主要な放射能汚染源である ¹³⁷Cs の回収
• Glyphs 3の価格は€299です

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。

• Update demo url
• Add og-image

約物と英数との間に不要な四分アキが入ることがある。
これらは hasLanguageTransition で判定されてしまっているので、
セグメントに約物が含まれる場合には処理をスキップするようにする。

• Add a demo of CodeSandbox
• Refactor CSS
• Refactor import

• Mobile CSS
• viewport: width=device-width, initial-scale=1.0
• domain name: palt.typesetting.jp
• addThinSpaces → insertThinSpaces