<div x-data="{ font: 'sans', fontSize: '20', fontWeight: '400', fontWidth: '100', fontWeightRangeStep: '1' }">
<div class="container-md" :class="{ 'sans': font === 'sans', 'looped': font === 'looped', 'serif': font === 'serif' }">
<div class="btn-group btn-group-sm w-100 mt-2">
<a :class="{ 'active': font === 'sans' }" class="btn btn-outline-primary" @click="font = 'sans', fontWeightRangeStep = '1'">Noto Sans Thai</a>
<a :class="{ 'active': font === 'looped' }" @click="font = 'looped', fontWeightRangeStep = '100'" class="btn btn-outline-primary">Noto Sans Thai Looped</a>
<a :class="{ 'active': font === 'serif' }" @click="font = 'serif', fontWeightRangeStep = '1'" class="btn btn-outline-primary">Noto Serif Thai</a>
</div>
<div class="row mt-2">
<div :class="{ 'col-12 col-sm-4': font !== 'looped', 'col-12 col-sm-6': font === 'looped' }">
<label for="fontSizeRange" class="form-label mb-0">ขนาดฟอนต์ (<span x-text="fontSize"></span>px)</label>
<input x-model="fontSize" type="range" class="form-range" id="fontSizeRange" min="12" max="64" step="1">
</div>
<div :class="{ 'col-6 col-sm-4': font !== 'looped', 'col-12 col-sm-6': font === 'looped' }">
<label for="fontWeightRange" class="form-label mb-0">น้ำหนัก (<span x-text="fontWeight"></span>)</label>
<input x-model="fontWeight" type="range" class="form-range" id="fontWeightRange" min="100" max="900" :step="fontWeightRangeStep">
</div>
<div :class="{ 'col-6 col-sm-4': font !== 'looped', 'col-12 col-sm-6': font === 'looped' }" x-show="font !== 'looped'">
<label for="fontWidthRange" class="form-label mb-0">ความกว้าง (<span x-text="fontWidth"></span>%)</label>
<input x-model="fontWidth" type="range" class="form-range" id="fontWidthRange" min="62.5" max="100" step="0.5">
</div>
</div>
<div class="mt-2">
<textarea :style="{ 'font-size': fontSize + 'px', 'font-weight': fontWeight, 'font-stretch': fontWidth + '%' }" class="form-control" rows="8">เป็นมนุษย์สุดประเสริฐเลิศคุณค่า กว่าบรรดาฝูงสัตว์เดรัจฉาน
จงฝ่าฟันพัฒนาวิชาการ อย่าล้างผลาญฤๅเข่นฆ่าบีฑาใคร
ไม่ถือโทษโกรธแช่งซัดฮึดฮัดด่า หัดอภัยเหมือนกีฬาอัชฌาสัย
ปฏิบัติประพฤติกฎกำหนดใจ พูดจาให้จ๊ะ ๆ จ๋า น่าฟังเอยฯ</textarea>
<p class="mt-2 text-secondary text-center">
<small>CDN ฟอนต์จาก <a class="link-secondary" href="https://thaiwebfonts.lazywasabi.com/" target="_blank" rel="noreferrer">Thai Web Fonts</a></small>
</p>
</div>
</div>
</div>
@import "https://cdn.jsdelivr.net/gh/lazywasabi/[email protected]/fonts/NotoSansThai/var/NotoSansThai[wdth,wght].css";
@import "https://cdn.jsdelivr.net/gh/lazywasabi/[email protected]/fonts/NotoSansThaiLooped/NotoSansThaiLooped.css";
@import "https://cdn.jsdelivr.net/gh/lazywasabi/[email protected]/fonts/NotoSerifThai/var/NotoSerifThai[wdth,wght].css";
body,
.sans {
font-family: "Noto Sans Thai", ui-sans-serif, system-ui, -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
sans-serif;
}
.serif {
font-family: "Noto Serif Thai", Lora, Georgia, Cambria, "Times New Roman",
Times, serif;
}
.looped {
font-family: "Noto Sans Thai Looped", ui-sans-serif, system-ui, -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
sans-serif;
}
label {
font-size: 0.9rem;
}
textarea {
max-height: 70vh;
}