type tester という簡易的なフォント(関連のスタイリング)のテスターツールを Vue.js で作ってみる。 その7
GitHub Pages: https://yuheijotaki.github.io/type-tester/
GitHub リポジトリ:https://github.com/yuheijotaki/type-tester
Vue でラジオボタンの値だけ取得してJavaScriptで <textarea>
の要素を入れ替える形にしました。
App.vue
(抜粋)
... changeTextRadio: function (textType) { const inputTextArea = document.tools.inputTextArea; // ツールのテキストエリアオブジェクトを取得 const textTypeValue = textType; // 選択されたラジオボタンのテキストタイプを取得 if ( textTypeValue === 'textJa' ) { inputTextArea.value = defaultTextJa; // ツールのテキストエリアの値書き換え this.message = defaultTextJa; // プレビューエリアのテキストを書き換え } else if ( textTypeValue === 'textEn' ) { inputTextArea.value = defaultTextEn; this.message = defaultTextEn; } else if ( textTypeValue === 'textFree' ) { inputTextArea.value = ``; this.message = ``; } }, ...
font-feature-settings
の値CSS的な話ですが、font-feature-settings
の値で、
normal
や inherit
initial
unset
は ""
がなし"palt"
"smcp"
"swsh"
は ""
がありで値変更したときに下記のように変更しないとダメでした。App.vue
(抜粋)
... changeFontFeatureSettings: function (feature) { if ( feature === 'normal' ) { this.styleObject['font-feature-settings'] = `${feature}`; } else { this.styleObject['font-feature-settings'] = `"${feature}"`; } }, ...
text-align:
の初期値は left
と思っていたのですが、start
だったり細かい発見がありました。