palt-typesetting 0.1.3 → 0.1.5
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 +45 -22
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
# Typesetting Library for Propotional Spacing
|
|
2
2
|
|
|
3
|
-
Palt Typesetting は、読みやすく美しいテキスト表示を実現するための JavaScript
|
|
4
|
-
和欧混合、およびメトリクス詰め（`font-feature-settings: 'palt'`）の組版において、最大限の力を発揮します。
|
|
3
|
+
Palt Typesetting は、読みやすく美しいテキスト表示を実現するための JavaScript ライブラリです。和欧混合、およびメトリクス詰め(`font-feature-settings: 'palt'`) の版面設計において、最大限の力を発揮します。
|
|
5
4
|
|
|
6
5
|
四分アキの自動挿入、カーニングルールの適用、英語のような語単位での改行など、高度な組版機能を提供します。
|
|
7
6
|
|
|
@@ -23,7 +22,7 @@ typesetter.renderToSelector('.my-class')
|
|
|
23
22
|
### Use from CDN
|
|
24
23
|
|
|
25
24
|
```html
|
|
26
|
-
<script src="https://unpkg.com/palt-typesetting@0.1.
|
|
25
|
+
<script src="https://unpkg.com/palt-typesetting@0.1.5/bundle/palt-typesetting.min.js"></script>
|
|
27
26
|
```
|
|
28
27
|
|
|
29
28
|
```html
|
|
@@ -51,7 +50,7 @@ typesetter.renderToSelector('.my-class')
|
|
|
51
50
|
}
|
|
52
51
|
```
|
|
53
52
|
|
|
54
|
-
##
|
|
53
|
+
## Typesetter Class
|
|
55
54
|
|
|
56
55
|
### Usage
|
|
57
56
|
|
|
@@ -73,13 +72,19 @@ console.log(typesetter.render(srcHtml))
|
|
|
73
72
|
// <span class="typeset" /* 中略 */>「日本語」<span class="typeset-thin-space" style="font-size: 50%;" /* 中略 */> </span><wbr>と<span class="typeset-thin-space" style="font-size: 50%;" /* 中略 */> </span><wbr><span class="typeset-latin">English</span></span>
|
|
74
73
|
```
|
|
75
74
|
|
|
76
|
-
###
|
|
75
|
+
### Constructor
|
|
77
76
|
|
|
78
|
-
|
|
|
79
|
-
|
|
|
80
|
-
| `
|
|
81
|
-
|
|
82
|
-
|
|
77
|
+
| <div style="width:18em">コンストラクタ</div> | 説明 | 引数 |
|
|
78
|
+
| -------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------- |
|
|
79
|
+
| `Typesetter(options?)` | Typesetter インスタンスを作成します。<br>オプションを指定することでカスタムの組版設定を適用できます。 | `options`: オプション（任意）。 |
|
|
80
|
+
|
|
81
|
+
### Methods
|
|
82
|
+
|
|
83
|
+
| <div style="width:18em">メソッド名</div> | 説明 | 引数 | 返り値 |
|
|
84
|
+
| ---------------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------------------ | ---------------------------------------- |
|
|
85
|
+
| `render(srcHtml)` | スタイルを適用した HTML 文字列を返します。 | `srcHtml`: 処理する HTML 文字列 | `string`: スタイルを適用した HTML 文字列 |
|
|
86
|
+
| `renderToElements(elements)` | 指定された Element または Element の配列にスタイルを適用します。 | `elements`: スタイルを適用する Element または Element の配列 | `void` |
|
|
87
|
+
| `renderToSelector(selector)` | 指定された CSS セレクタに一致するすべての要素にスタイルを適用します。 | `selector`: スタイルを適用する要素を選択する CSS セレクタ | `void` |
|
|
83
88
|
|
|
84
89
|
## Options
|
|
85
90
|
|
|
@@ -112,27 +117,45 @@ const options = {
|
|
|
112
117
|
value: '-80',
|
|
113
118
|
},
|
|
114
119
|
{
|
|
115
|
-
between: ['
|
|
120
|
+
between: ['で', '、'],
|
|
116
121
|
value: '-120',
|
|
117
122
|
},
|
|
118
123
|
],
|
|
119
124
|
}
|
|
120
125
|
|
|
121
126
|
const typeset = new Typesetter(options)
|
|
127
|
+
typesetter.renderToSelector('.my-class')
|
|
122
128
|
```
|
|
123
129
|
|
|
124
130
|
### Typesetting Options
|
|
125
131
|
|
|
126
|
-
|
|
|
127
|
-
|
|
|
128
|
-
| `classNamePrefix`
|
|
129
|
-
| `useWordBreak`
|
|
130
|
-
| `wrapLatin`
|
|
131
|
-
| `noSpaceBetweenNoBreaks`
|
|
132
|
-
| `addThinSpaces`
|
|
133
|
-
| `thinSpaceWidth`
|
|
134
|
-
| `kerningRules`
|
|
132
|
+
| <div style="width:18em">オプション名</div> | 説明 | 型 | デフォルト値 |
|
|
133
|
+
| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------------ |
|
|
134
|
+
| `classNamePrefix` | ライブラリで使用される CSS クラス名のプレフィックスを指定します。 | `string` | `'typeset' ` |
|
|
135
|
+
| `useWordBreak` | 単語や助詞など、語単位での改行を行います。 | `boolean` | `true` |
|
|
136
|
+
| `wrapLatin` | 英数を `span.typeset-latin` でラップします。<br>`useWordBreak` が `true` の場合にのみ有効です。 | `boolean` | `true` |
|
|
137
|
+
| `noSpaceBetweenNoBreaks` | 罫線などの分離禁則文字を `span.typeset-nobreaks` でラップし、文字間を 0 に設定します。<br>`useWordBreak` が `true` の場合にのみ有効です。 | `boolean` | `true` |
|
|
138
|
+
| `addThinSpaces` | 四分アキスペースを自動で追加します。 | `boolean` | `true` |
|
|
139
|
+
| `thinSpaceWidth` | 四分アキスペースの幅を設定します。<br>`addThinSpaces` が `true` の場合にのみ有効です。 | `string` | `'50%' ` |
|
|
140
|
+
| `kerningRules` | 特定の文字間のカーニングルールを設定します。 | `{between: [string, string], value: string \| number}[]` | `[]` |
|
|
141
|
+
|
|
142
|
+
## Notes
|
|
143
|
+
|
|
144
|
+
### 環境要件
|
|
145
|
+
|
|
146
|
+
Palt Typesetting ライブラリは、語単位の改行機能のコアとして `Intl.Segmenter` による分割処理を使用しています。そのため、以下の環境要件があります。
|
|
147
|
+
|
|
148
|
+
- Node.js: 16.0.0 以上
|
|
149
|
+
- ブラウザ: Intl.Segmenter をサポートしているブラウザ
|
|
150
|
+
|
|
151
|
+
`Intl.Segmenter` は、テキストを言語固有のセグメントに分割する機能を提供しますが、一部のブラウザでは利用できません（クライアントサイドで実行する場合）。Palt Typesetting ライブラリは、`Intl.Segmenter` がサポートされていない環境では組版処理をスキップし、元のテキストをそのまま返します。
|
|
152
|
+
|
|
153
|
+
`Intl.Segmenter` の対応状況については、[MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter) で確認できます。
|
|
154
|
+
|
|
155
|
+
### 注意事項
|
|
156
|
+
|
|
157
|
+
Palt Typesetting ライブラリは HTML 入力をサポートしていますが、入力された HTML をサニタイズする機能は**含まれていません**。 入力を信頼できない場合は、適切なサニタイザライブラリと共に使用することを強く推奨します。
|
|
135
158
|
|
|
136
|
-
##
|
|
159
|
+
## Author
|
|
137
160
|
|
|
138
|
-
|
|
161
|
+
飯塚 大和 (Yamato Iizuka)
|
package/package.json
CHANGED