palt-typesetting 0.1.4 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -25
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
# Typesetting
|
|
1
|
+
# Palt Typesetting
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Typesetting Library for Propotional Spacing
|
|
4
|
+
|
|
5
|
+
Palt Typesetting は、読みやすく美しいテキスト表示を実現するための JavaScript ライブラリです。和欧混合、およびメトリクス詰め(`font-feature-settings: 'palt'`) の版面設計において、最大限の力を発揮します。
|
|
4
6
|
|
|
5
7
|
四分アキの自動挿入、カーニングルールの適用、英語のような語単位での改行など、高度な組版機能を提供します。
|
|
6
8
|
|
|
@@ -22,7 +24,7 @@ typesetter.renderToSelector('.my-class')
|
|
|
22
24
|
### Use from CDN
|
|
23
25
|
|
|
24
26
|
```html
|
|
25
|
-
<script src="https://unpkg.com/palt-typesetting@0.1.
|
|
27
|
+
<script src="https://unpkg.com/palt-typesetting@0.1.6/bundle/palt-typesetting.min.js"></script>
|
|
26
28
|
```
|
|
27
29
|
|
|
28
30
|
```html
|
|
@@ -74,17 +76,17 @@ console.log(typesetter.render(srcHtml))
|
|
|
74
76
|
|
|
75
77
|
### Constructor
|
|
76
78
|
|
|
77
|
-
|
|
|
78
|
-
|
|
|
79
|
-
| `
|
|
79
|
+
| <div style="width:18em">コンストラクタ</div> | 説明 | 引数 |
|
|
80
|
+
| -------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------- |
|
|
81
|
+
| `Typesetter(options?)` | Typesetter インスタンスを作成します。<br>オプションを指定することでカスタムの組版設定を適用できます。 | `options`: オプション（任意）。 |
|
|
80
82
|
|
|
81
83
|
### Methods
|
|
82
84
|
|
|
83
|
-
|
|
|
84
|
-
|
|
|
85
|
-
| `render(srcHtml)`
|
|
86
|
-
| `renderToElements(elements)`
|
|
87
|
-
| `renderToSelector(selector)`
|
|
85
|
+
| <div style="width:18em">メソッド名</div> | 説明 | 引数 | 返り値 |
|
|
86
|
+
| ---------------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------------------ | ---------------------------------------- |
|
|
87
|
+
| `render(srcHtml)` | スタイルを適用した HTML 文字列を返します。 | `srcHtml`: 処理する HTML 文字列 | `string`: スタイルを適用した HTML 文字列 |
|
|
88
|
+
| `renderToElements(elements)` | 指定された Element または Element の配列にスタイルを適用します。 | `elements`: スタイルを適用する Element または Element の配列 | `void` |
|
|
89
|
+
| `renderToSelector(selector)` | 指定された CSS セレクタに一致するすべての要素にスタイルを適用します。 | `selector`: スタイルを適用する要素を選択する CSS セレクタ | `void` |
|
|
88
90
|
|
|
89
91
|
## Options
|
|
90
92
|
|
|
@@ -117,7 +119,7 @@ const options = {
|
|
|
117
119
|
value: '-80',
|
|
118
120
|
},
|
|
119
121
|
{
|
|
120
|
-
between: ['
|
|
122
|
+
between: ['で', '、'],
|
|
121
123
|
value: '-120',
|
|
122
124
|
},
|
|
123
125
|
],
|
|
@@ -129,26 +131,26 @@ typesetter.renderToSelector('.my-class')
|
|
|
129
131
|
|
|
130
132
|
### Typesetting Options
|
|
131
133
|
|
|
132
|
-
|
|
|
133
|
-
|
|
|
134
|
-
| `classNamePrefix`
|
|
135
|
-
| `useWordBreak`
|
|
136
|
-
| `wrapLatin`
|
|
137
|
-
| `noSpaceBetweenNoBreaks`
|
|
138
|
-
| `addThinSpaces`
|
|
139
|
-
| `thinSpaceWidth`
|
|
140
|
-
| `kerningRules`
|
|
134
|
+
| <div style="width:18em">オプション名</div> | 説明 | 型 | デフォルト値 |
|
|
135
|
+
| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------------ |
|
|
136
|
+
| `classNamePrefix` | ライブラリで使用される CSS クラス名のプレフィックスを指定します。 | `string` | `'typeset' ` |
|
|
137
|
+
| `useWordBreak` | 単語や助詞など、語単位での改行を行います。 | `boolean` | `true` |
|
|
138
|
+
| `wrapLatin` | 英数を `span.typeset-latin` でラップします。<br>`useWordBreak` が `true` の場合にのみ有効です。 | `boolean` | `true` |
|
|
139
|
+
| `noSpaceBetweenNoBreaks` | 罫線などの分離禁則文字を `span.typeset-nobreaks` でラップし、文字間を 0 に設定します。<br>`useWordBreak` が `true` の場合にのみ有効です。 | `boolean` | `true` |
|
|
140
|
+
| `addThinSpaces` | 四分アキスペースを自動で追加します。 | `boolean` | `true` |
|
|
141
|
+
| `thinSpaceWidth` | 四分アキスペースの幅を設定します。<br>`addThinSpaces` が `true` の場合にのみ有効です。 | `string` | `'50%' ` |
|
|
142
|
+
| `kerningRules` | 特定の文字間のカーニングルールを設定します。 | `{between: [string, string], value: string \| number}[]` | `[]` |
|
|
141
143
|
|
|
142
144
|
## Notes
|
|
143
145
|
|
|
144
146
|
### 環境要件
|
|
145
147
|
|
|
146
|
-
Palt Typesetting ライブラリは、語単位の改行機能のコアとして `Intl.Segmenter`
|
|
148
|
+
Palt Typesetting ライブラリは、語単位の改行機能のコアとして `Intl.Segmenter` による分割処理を使用しています。そのため、以下の環境要件があります。
|
|
147
149
|
|
|
148
|
-
- Node.js: 16.0.0
|
|
149
|
-
- ブラウザ: Intl.Segmenter
|
|
150
|
+
- Node.js: 16.0.0 以上
|
|
151
|
+
- ブラウザ: Intl.Segmenter をサポートしているブラウザ
|
|
150
152
|
|
|
151
|
-
`Intl.Segmenter` は、テキストを言語固有のセグメントに分割する機能を提供しますが、一部のブラウザでは利用できません（クライアントサイドで実行する場合）。Palt Typesetting
|
|
153
|
+
`Intl.Segmenter` は、テキストを言語固有のセグメントに分割する機能を提供しますが、一部のブラウザでは利用できません（クライアントサイドで実行する場合）。Palt Typesetting ライブラリは、`Intl.Segmenter` がサポートされていない環境では組版処理をスキップし、元のテキストをそのまま返します。
|
|
152
154
|
|
|
153
155
|
`Intl.Segmenter` の対応状況については、[MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter) で確認できます。
|
|
154
156
|
|
package/package.json
CHANGED