1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 6 <title> 7 GT America Intl typeface exclusively at Grilli Type â Download Free Trial 8 Fonts 9 </title> 10
10<script src="/index.49cd543c.js" defer=""></script>
10 11 <!-- 12 <link 13 rel="preload" 14 as="font" 15 type="font/woff2" 16 href="./fonts/GT-Pressura-Loader.woff2" 17 /> 18 <link 19 rel="preload" 20 as="font" 21 type="font/ttf" 22 href="./fonts/GT-Pressura-Mono-VF.ttf" 23 /> 24 <link 25 rel="preload" 26 as="font" 27 type="font/woff2" 28 href="./fonts/GT-Pressura-Mono-VF.woff2" 29 /> 30 <link 31 rel="preload" 32 as="font" 33 type="font/ttf" 34 href="./fonts/GT-Pressura-VF-Mini.ttf" 35 /> 36 <link 37 rel="preload" 38 as="font" 39 type="font/woff2" 40 href="./fonts/GT-Pressura-VF-Mini.woff2" 41 /> 42 <link 43 rel="preload" 44 as="fetch" 45 type="application/json" 46 crossorigin="anonymous" 47 href="./animations/loader.json" 48 /> 49
49<script> 50 document.documentElement.className += 51 "ontouchstart" in document.documentElement ? " touch" : " no-touch"; 52 </script>
52 53 --> 54 55 <link rel="stylesheet" href="/index.a4c263fa.css"> 56 57 <!-- Favicon --> 58 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.92595565.png"> 59 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.32128860.png"> 60 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.1c6cfe22.png"> 61 <link rel="mask-icon" href="/safari-pinned-tab.d85ebaa8.svg" color="#FF3500"> 62 <meta name="msapplication-TileColor" content="#FF3500"> 63 <meta name="theme-color" content="#FF3500"> 64 65 <!-- FB OG Tags --> 66 <meta property="og:url" content="https://www.gt-america.com"> 67 <meta property="og:type" content="article"> 68 <meta property="og:title" content="GT America Intl Typeface"> 69 <meta property="og:description" content="GT America Intl connects two centuries of typographic genres, combining 19th century American Gothic and 20th century European Grotesk styles. Now supporting five new writing systems."> 70 <meta property="og:image" content="https://www.gt-america.com/images/gt-america-sharing.png"> 71 <meta property="og:image:width" content="1200"> 72 <meta property="og:image:height" content="630"> 73 74 <!-- Twitter & Slack Tags --> 75 <meta name="twitter:card" content="summary_large_image"> 76 <meta name="twitter:site" content="@grillitype"> 77 <meta name="twitter:creator" content="@grillitype"> 78 <meta name="twitter:title" content="GT America Intl Typeface"> 79 <meta name="twitter:description" content="GT America Intl connects two centuries of typographic genres, combining 19th century American Gothic and 20th century European Grotesk styles. Now supporting five new writing systems."> 80 <meta name="twitter:image" content="https://www.gt-america.com/images/gt-america-sharing.png"> 81 82 <!-- Google tag (gtag.js) -->
vendor: 71 bytes, lines 82-83
82 83 <script async="" src="https://www.googletagmanager.com/gtag/js?id=
83G-1CH2EWV079
vendor: 16 bytes, lines 83-84
83"></script> 84
84<script>
vendor: 134 bytes, lines 84-89
84window.dataLayer = window.dataLayer || []; 85function gtag() { 86 dataLayer.push(arguments); 87} 88gtag("js", new Date()); 89gtag("config", "
89G-1CH2EWV079
vendor: 5 bytes, lines 89-90
89"); 90
91</script>
91 92 93 <!-- 94 ******************************************************************************* 95 96 .oOOOOOOOo OOO OOO OOO OOO OOOOOOOOOOOOO 97 OOO" `"OOO """ OOO OOO """ OOO 98 oOO" OO oOO OOO OOO OOO OOO OOO "OO| |OO:OOOoOOOOo. .oOOOOOo 99 OOO OOOOOOO OOOP"" OOO OOO OOO OOO OOO 7OO. OOO OOO^ "OOOp|OO""""OOO 100 oOOo OOO OOO OOO OOO OOO OOO OOO 1OO OOO OOO OOOp|OOOOOOOOO 101 oOOOy,,yOOOO OOO OOO OOO OOO OOO OOO OOOOO OOO:,,yOOO "OOO,,,ooy 102 ""OOOOO`'OO OOO OOO OOO OOO OOO OOO OOO OOO"OOOO" "OOOOO^ 103 yyOOO` OOO 104 "OOP OOO 105 106 ******************************************************************************* 107 108 GT America by Noël Leu and many collaborators 109 For Minisite design, development, animations, copywriting credits, see Information section 110 Please donât rip our typefaces they take a lot of work kbaithx 111 112 ******************************************************************************* 113--> 114 </head> 115 <body class="bg-white text-blue antialiased selection:bg-red selection:text-white"> 116 <header data-component="mobile-scrolly-header" class="fixed w-full p-3 md:p-4 md:left-0 md:right-4 h-50px text-md md:text-base z-10"> 117 <div class="flex justify-between" data-component="nav-colour-switcher"> 118 <h1 class="text-[color:var(--color)]">GT America Intl</h1> 119 <div class=""> 120 <a href="https://www.grillitype.com/free-trial-fonts" class="md:hidden mr-5 text-[color:var(--color)] hover:text-[color:var(--color-hover)]"><span class="mr-2">â</span>Trials</a> 121 <a href="https://www.grillitype.com/typeface/gt-america-intl-collection" class="md:hidden mr-5 text-[color:var(--color)] hover:text-[color:var(--color-hover)]"><span class="mr-2">â</span>Buy</a> 122 <button data-component="tt-toggle" class="text-[color:var(--color)] hover:text-[color:var(--color-hover)]"> 123 <span class="md:hidden"><span class="mr-2">â</span>Test</span> 124 <span class="hidden md:flex nav-item-typetester"><span class="hidden md:flex mr-2">â</span>Type Tester</span> 125 </button> 126 </div> 127 </div> 128</header> 129 130<nav data-component="" class="hidden md:block section-nav text-md md:text-base"> 131 <span data-component="sticky-nav-item" data-nav-section-target="concept" data-index="0" class="sticky-nav-item absolute top-0 block w-1 pointer-events-none whitespace-nowrap z-10" style="--height: 3000px; --inner-top: 800px"> 132 <button data-component="nav-colour-switcher" class="text-[color:var(--color)] hover:text-[color:var(--color-hover)] pl-4 sticky pointer-events-auto"> 133 <span class="inline-block"></span>Concept 134 </button> 135</span> 136 137 <span data-component="sticky-nav-item" data-nav-section-target="languages" data-index="1" class="sticky-nav-item absolute top-0 block w-1 pointer-events-none whitespace-nowrap z-10" style="--height: 3000px; --inner-top: 800px"> 138 <button data-component="nav-colour-switcher" class="text-[color:var(--color)] hover:text-[color:var(--color-hover)] pl-4 sticky pointer-events-auto"> 139 <span class="inline-block"></span>Languages 140 </button> 141</span> 142 143 <span data-component="sticky-nav-item" data-nav-section-target="design" data-index="2" class="sticky-nav-item absolute top-0 block w-1 pointer-events-none whitespace-nowrap z-10" style="--height: 3000px; --inner-top: 800px"> 144 <button data-component="nav-colour-switcher" class="text-[color:var(--color)] hover:text-[color:var(--color-hover)] pl-4 sticky pointer-events-auto"> 145 <span class="inline-block"></span>Design 146 </button> 147</span> 148 149 <span data-component="sticky-nav-item" data-nav-section-target="information" data-index="3" class="sticky-nav-item absolute top-0 block w-1 pointer-events-none whitespace-nowrap z-10" style="--height: 3000px; --inner-top: 800px"> 150 <button data-component="nav-colour-switcher" class="text-[color:var(--color)] hover:text-[color:var(--color-hover)] pl-4 sticky pointer-events-auto"> 151 <span class="inline-block"></span>Information 152 </button> 153</span> 154 155 <div class="hidden md:flex fixed bottom-4 left-4 flex-row mt-5 nav-reveal-left" data-component="nav-colour-switcher"> 156 <a href="https://www.grillitype.com/free-trial-fonts" class="mr-4 text-[color:var(--color)] hover:text-[color:var(--color-hover)] z-10"><span class="mr-2">â</span>Trials</a> 157 <a href="https://www.grillitype.com/typeface/gt-america-intl-collection" class="text-[color:var(--color)] hover:text-[color:var(--color-hover)] z-10"><span class="mr-2">â</span>Buy</a> 158 </div> 159</nav> 160 161 162 <!--LOADING SCREEN--> 163 <div id="loader-section" class="fixed top-0 flex w-full h-full overflow-hidden bg-transparent text-blue"> 164 <div class="flex h-screen w-screen justify-center"> 165 <!-- <lottie-player 166 data-component="lottie-player" 167 class="w-[70vw]" 168 data-src="loader.json" 169 ></lottie-player> --> 170 <div class="absolute text-md md:text-base font-loader tracking-normal bottom-3 md:top-4">
171 Loading data. Please wait. Thank you. 172 </div> 173 </div> 174</div> 175 176 177 <!--TYPETESTER--> 178 <div class="bg-white fixed max-w-full tt z-10 top-0 left-0 h-full overflow-y-scroll text-blue"> 179 <nav class="sticky md:p-4 z-50 top-0 left-0 right-0 text-md md:text-base"> 180 <div class="flex justify-between"> 181 <div> 182 <h3 class="hidden md:flex md:pl-[12px]">Type Tester</h3> 183 </div> 184 <div class=""> 185 <button data-component="tt-close"> 186 <span class="mr-2">â</span>Close 187 </button> 188 </div> 189 </div> 190</nav> 191 192 <!-- Typetester Overlay Container --> 193 194 <div class="flex flex-col text-blue z-50"> 195 <!-- Typetester Sample --> 196<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 197 <!-- Partial Width Content Area With Section Nav --> 198 <!-- Section Nav Area --> 199<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="latin"> 200 <!-- Select Script--> 201 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 202 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 203 204 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en" selected="selected"> 205 Latin 206 </option> 207 208 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 209 Cyrillic 210 </option> 211 212 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 213 Greek 214 </option> 215 216 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 217 Vietnamese 218 </option> 219 220 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 221 Arabic 222 </option> 223 224 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 225 Devanagari 226 </option> 227 228 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 229 Hebrew 230 </option> 231 232 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 233 Korean 234 </option> 235 236 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 237 Thai 238 </option> 239 </select> 240 </div> 241 242 <!-- Latin: Proportional / Mono Option --> 243 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 244 <div class="text-blue hover:text-red pt-1 w-[120px]"> 245 <!-- I'm sure theres a better way of applying this attribute conditionally --> 246 247 <input type="radio" checked="" id="sample-1_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 248 <label class="nav-radio-label hover:cursor-pointer" for="sample-1_prop-mono_proportional">Proportional</label> 249</div> 250 251 <div class="text-blue hover:text-red pt-1 w-[120px]"> 252 <!-- I'm sure theres a better way of applying this attribute conditionally --> 253 254 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 255 <input type="radio" id="sample-1_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 256 <label class="nav-radio-label hover:cursor-pointer" for="sample-1_prop-mono_mono">Monospaced</label> 257</div> 258 259 </fieldset> 260 261 <!-- Latin: Upright / Italic Option --> 262 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 263 <div class="text-blue hover:text-red pt-1 w-[120px]"> 264 <!-- I'm sure theres a better way of applying this attribute conditionally --> 265 266 <input type="radio" checked="" id="sample-1_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 267 <label class="nav-radio-label hover:cursor-pointer" for="sample-1_upright-ital_upright">Upright</label> 268</div> 269 270 <div class="text-blue hover:text-red pt-1 w-[120px]"> 271 <!-- I'm sure theres a better way of applying this attribute conditionally --> 272 273 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 274 <input type="radio" id="sample-1_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 275 <label class="nav-radio-label hover:cursor-pointer" for="sample-1_upright-ital_italic">Italic</label> 276</div> 277 278 </fieldset> 279 280 <!-- Latin: Default / Alternatives Option --> 281 <!-- Currently Disabled, Too Many Options Syndrome --> 282 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 283 <include src="source/html-includes/radio-button.html"> 284 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 285 "default", "label": "Default", "checked": true, "namePrefix": "sample-1" } 286 </include> 287 <include src="source/html-includes/radio-button.html"> 288 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 289 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 290 "sample-1" } 291 </include> 292 </fieldset> --> 293 294 <!-- Thai: Looped / Loopless Option --> 295 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 296 <div class="text-blue hover:text-red pt-1 w-[120px]"> 297 <!-- I'm sure theres a better way of applying this attribute conditionally --> 298 299 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 300 <input type="radio" id="sample-1_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 301 <label class="nav-radio-label hover:cursor-pointer" for="sample-1_looped_looped">Looped</label> 302</div> 303 304 <div class="text-blue hover:text-red pt-1 w-[120px]"> 305 <!-- I'm sure theres a better way of applying this attribute conditionally --> 306 307 <input type="radio" checked="" id="sample-1_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 308 <label class="nav-radio-label hover:cursor-pointer" for="sample-1_looped_loopless">Loopless</label> 309</div> 310 311 </fieldset> 312 313 <!-- Latin Dropdown: Variable + all 84 styles --> 314 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 315 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 316 <option value="variable" selected="selected">Variable</option> 317 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 318 Compressed Ultra Light 319 </option> 320 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 321 Compressed Thin 322 </option> 323 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 324 Compressed Light 325 </option> 326 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 327 Compressed Regular 328 </option> 329 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 330 Compressed Medium
331 </option> 332 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 333 Compressed Bold 334 </option> 335 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 336 Compressed Black 337 </option> 338 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 339 Condensed Ultra Light 340 </option> 341 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 342 Condensed Thin 343 </option> 344 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 345 Condensed Light 346 </option> 347 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 348 Condensed Regular 349 </option> 350 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 351 Condensed Medium 352 </option> 353 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 354 Condensed Bold 355 </option> 356 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 357 Condensed Black 358 </option> 359 <option value="standard ultra light" data-wght="100" data-wdth="100"> 360 Standard Ultra Light 361 </option> 362 <option value="standard thin" data-wght="200" data-wdth="100"> 363 Standard Thin 364 </option> 365 <option value="standard light" data-wght="300" data-wdth="100"> 366 Standard Light 367 </option> 368 <option value="standard regular" data-wght="400" data-wdth="100"> 369 Standard Regular 370 </option> 371 <option value="standard medium" data-wght="500" data-wdth="100"> 372 Standard Medium 373 </option> 374 <option value="standard bold" data-wght="700" data-wdth="100"> 375 Standard Bold 376 </option> 377 <option value="standard black" data-wght="900" data-wdth="100"> 378 Standard Black 379 </option> 380 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 381 Extended Ultra Light 382 </option> 383 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 384 Extended Thin 385 </option> 386 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 387 Extended Light 388 </option> 389 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 390 Extended Regular 391 </option> 392 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 393 Extended Medium 394 </option> 395 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 396 Extended Bold 397 </option> 398 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 399 Extended Black 400 </option> 401 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 402 Expanded Ultra Light 403 </option> 404 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 405 Expanded Thin 406 </option> 407 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 408 Expanded Light 409 </option> 410 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 411 Expanded Regular 412 </option> 413 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 414 Expanded Medium 415 </option> 416 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 417 Expanded Bold 418 </option> 419 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 420 Expanded Black 421 </option> 422 </select> 423 </div> 424 425 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 426 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 427 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 428 <option value="variable" selected="selected">Variable</option> 429 <option value="looped ultra light" data-wght="100">Ultra Light</option> 430 <option value="looped thin" data-wght="200">Thin</option> 431 <option value="looped light" data-wght="300">Light</option> 432 <option value="looped regular" data-wght="400">Regular</option> 433 <option value="looped medium" data-wght="500">Medium</option> 434 <option value="looped bold" data-wght="700">Bold</option> 435 <option value="looped black" data-wght="900">Black</option> 436 </select> 437 </div> 438 439 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 440 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 441 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 442 <option value="variable" selected="selected">Variable</option> 443 <option value="ultra light" data-wght="100">Ultra Light</option> 444 <option value="thin" data-wght="200">Thin</option> 445 <option value="light" data-wght="300">Light</option> 446 <option value="regular" data-wght="400">Regular</option> 447 <option value="medium" data-wght="500">Medium</option> 448 <option value="bold" data-wght="700">Bold</option> 449 <option value="black" data-wght="900">Black</option> 450 </select> 451 </div> 452 453 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 454 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 455 <option value="variable" selected="selected">Variable</option> 456 <option value="ultra light" data-wght="100">Ultra Light</option> 457 <option value="thin" data-wght="200">Thin</option> 458 <option value="light" data-wght="300">Light</option> 459 <option value="regular" data-wght="400">Regular</option> 460 <option value="medium" data-wght="500">Medium</option> 461 <option value="bold" data-wght="700">Bold</option> 462 <option value="black" data-wght="900">Black</option> 463 </select> 464 </div> 465 466 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 467 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 468 <option value="variable" selected="selected">Variable</option> 469 <option value="ultra light" data-wght="100">Ultra Light</option> 470 <option value="thin" data-wght="200">Thin</option> 471 <option value="light" data-wght="300">Light</option> 472 <option value="regular" data-wght="400">Regular</option> 473 <option value="medium" data-wght="500">Medium</option> 474 <option value="bold" data-wght="700">Bold</option> 475 <option value="black" data-wght="900">Black</option> 476 </select> 477 </div> 478 479 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 480 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 481 <option value="variable" selected="selected">Variable</option> 482 <option value="ultra light" data-wght="100">Ultra Light</option> 483 <option value="thin" data-wght="200">Thin</option> 484 <option value="light" data-wght="300">Light</option> 485 <option value="regular" data-wght="400">Regular</option> 486 <option value="medium" data-wght="500">Medium</option> 487 <option value="bold" data-wght="700">Bold</option> 488 <option value="black" data-wght="900">Black</option> 489 </select> 490 </div> 491 492 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 493 <!-- Thai Slider: Weight (100â900) --> 494 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
495 <div data-component="tt__control-area"> 496 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 497 <div class="flex flex-row justify-between"> 498 <div class="">Width</div> 499 <div data-component="tt__wdth-value"></div> 500 </div> 501 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="50" class="typetester-slider w-full" id="typetesterWdthRange"> 502 </div> 503 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 504 <div class="flex flex-row justify-between"> 505 <div class="">Weight</div> 506 <div data-component="tt__wght-value"></div> 507 </div> 508 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="900" class="typetester-slider w-full" id="typetesterWghtRange"> 509 </div> 510 </div> 511</form> 512 513 <!-- Main Content Area --> 514 <div class="md:ml-[48px] flex w-full justify-center align-middle"> 515 <div data-component="tt__sample-text" class="w-full self-center tt-sample tt-sample-size-l text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="en" data-size="l"></div> 516 </div> 517</section> 518 519 520 <!-- Typetester Sample --> 521<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 522 <!-- Partial Width Content Area With Section Nav --> 523 <!-- Section Nav Area --> 524<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="latin"> 525 <!-- Select Script--> 526 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 527 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 528 529 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en" selected="selected"> 530 Latin 531 </option> 532 533 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 534 Cyrillic 535 </option> 536 537 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 538 Greek 539 </option> 540 541 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 542 Vietnamese 543 </option> 544 545 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 546 Arabic 547 </option> 548 549 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 550 Devanagari 551 </option> 552 553 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 554 Hebrew 555 </option> 556 557 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 558 Korean 559 </option> 560 561 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 562 Thai 563 </option> 564 </select> 565 </div> 566 567 <!-- Latin: Proportional / Mono Option --> 568 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 569 <div class="text-blue hover:text-red pt-1 w-[120px]"> 570 <!-- I'm sure theres a better way of applying this attribute conditionally --> 571 572 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 573 <input type="radio" id="sample-2_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 574 <label class="nav-radio-label hover:cursor-pointer" for="sample-2_prop-mono_proportional">Proportional</label> 575</div> 576 577 <div class="text-blue hover:text-red pt-1 w-[120px]"> 578 <!-- I'm sure theres a better way of applying this attribute conditionally --> 579 580 <input type="radio" checked="" id="sample-2_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 581 <label class="nav-radio-label hover:cursor-pointer" for="sample-2_prop-mono_mono">Monospaced</label> 582</div> 583 584 </fieldset> 585 586 <!-- Latin: Upright / Italic Option --> 587 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 588 <div class="text-blue hover:text-red pt-1 w-[120px]"> 589 <!-- I'm sure theres a better way of applying this attribute conditionally --> 590 591 <input type="radio" checked="" id="sample-2_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 592 <label class="nav-radio-label hover:cursor-pointer" for="sample-2_upright-ital_upright">Upright</label> 593</div> 594 595 <div class="text-blue hover:text-red pt-1 w-[120px]"> 596 <!-- I'm sure theres a better way of applying this attribute conditionally --> 597 598 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 599 <input type="radio" id="sample-2_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 600 <label class="nav-radio-label hover:cursor-pointer" for="sample-2_upright-ital_italic">Italic</label> 601</div> 602 603 </fieldset> 604 605 <!-- Latin: Default / Alternatives Option --> 606 <!-- Currently Disabled, Too Many Options Syndrome --> 607 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 608 <include src="source/html-includes/radio-button.html"> 609 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 610 "default", "label": "Default", "checked": true, "namePrefix": "sample-2" } 611 </include> 612 <include src="source/html-includes/radio-button.html"> 613 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 614 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 615 "sample-2" } 616 </include> 617 </fieldset> --> 618 619 <!-- Thai: Looped / Loopless Option --> 620 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 621 <div class="text-blue hover:text-red pt-1 w-[120px]"> 622 <!-- I'm sure theres a better way of applying this attribute conditionally --> 623 624 <input type="radio" checked="" id="sample-2_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 625 <label class="nav-radio-label hover:cursor-pointer" for="sample-2_looped_looped">Looped</label> 626</div> 627 628 <div class="text-blue hover:text-red pt-1 w-[120px]"> 629 <!-- I'm sure theres a better way of applying this attribute conditionally --> 630 631 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 632 <input type="radio" id="sample-2_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 633 <label class="nav-radio-label hover:cursor-pointer" for="sample-2_looped_loopless">Loopless</label> 634</div> 635 636 </fieldset> 637 638 <!-- Latin Dropdown: Variable + all 84 styles --> 639 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 640 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 641 <option value="variable" selected="selected">Variable</option> 642 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 643 Compressed Ultra Light 644 </option> 645 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 646 Compressed Thin 647 </option> 648 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 649 Compressed Light 650 </option> 651 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 652 Compressed Regular 653 </option> 654 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 655 Compressed Medium
656 </option> 657 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 658 Compressed Bold 659 </option> 660 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 661 Compressed Black 662 </option> 663 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 664 Condensed Ultra Light 665 </option> 666 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 667 Condensed Thin 668 </option> 669 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 670 Condensed Light 671 </option> 672 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 673 Condensed Regular 674 </option> 675 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 676 Condensed Medium 677 </option> 678 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 679 Condensed Bold 680 </option> 681 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 682 Condensed Black 683 </option> 684 <option value="standard ultra light" data-wght="100" data-wdth="100"> 685 Standard Ultra Light 686 </option> 687 <option value="standard thin" data-wght="200" data-wdth="100"> 688 Standard Thin 689 </option> 690 <option value="standard light" data-wght="300" data-wdth="100"> 691 Standard Light 692 </option> 693 <option value="standard regular" data-wght="400" data-wdth="100"> 694 Standard Regular 695 </option> 696 <option value="standard medium" data-wght="500" data-wdth="100"> 697 Standard Medium 698 </option> 699 <option value="standard bold" data-wght="700" data-wdth="100"> 700 Standard Bold 701 </option> 702 <option value="standard black" data-wght="900" data-wdth="100"> 703 Standard Black 704 </option> 705 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 706 Extended Ultra Light 707 </option> 708 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 709 Extended Thin 710 </option> 711 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 712 Extended Light 713 </option> 714 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 715 Extended Regular 716 </option> 717 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 718 Extended Medium 719 </option> 720 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 721 Extended Bold 722 </option> 723 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 724 Extended Black 725 </option> 726 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 727 Expanded Ultra Light 728 </option> 729 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 730 Expanded Thin 731 </option> 732 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 733 Expanded Light 734 </option> 735 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 736 Expanded Regular 737 </option> 738 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 739 Expanded Medium 740 </option> 741 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 742 Expanded Bold 743 </option> 744 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 745 Expanded Black 746 </option> 747 </select> 748 </div> 749 750 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 751 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 752 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 753 <option value="variable" selected="selected">Variable</option> 754 <option value="looped ultra light" data-wght="100">Ultra Light</option> 755 <option value="looped thin" data-wght="200">Thin</option> 756 <option value="looped light" data-wght="300">Light</option> 757 <option value="looped regular" data-wght="400">Regular</option> 758 <option value="looped medium" data-wght="500">Medium</option> 759 <option value="looped bold" data-wght="700">Bold</option> 760 <option value="looped black" data-wght="900">Black</option> 761 </select> 762 </div> 763 764 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 765 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 766 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 767 <option value="variable" selected="selected">Variable</option> 768 <option value="ultra light" data-wght="100">Ultra Light</option> 769 <option value="thin" data-wght="200">Thin</option> 770 <option value="light" data-wght="300">Light</option> 771 <option value="regular" data-wght="400">Regular</option> 772 <option value="medium" data-wght="500">Medium</option> 773 <option value="bold" data-wght="700">Bold</option> 774 <option value="black" data-wght="900">Black</option> 775 </select> 776 </div> 777 778 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 779 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 780 <option value="variable" selected="selected">Variable</option> 781 <option value="ultra light" data-wght="100">Ultra Light</option> 782 <option value="thin" data-wght="200">Thin</option> 783 <option value="light" data-wght="300">Light</option> 784 <option value="regular" data-wght="400">Regular</option> 785 <option value="medium" data-wght="500">Medium</option> 786 <option value="bold" data-wght="700">Bold</option> 787 <option value="black" data-wght="900">Black</option> 788 </select> 789 </div> 790 791 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 792 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 793 <option value="variable" selected="selected">Variable</option> 794 <option value="ultra light" data-wght="100">Ultra Light</option> 795 <option value="thin" data-wght="200">Thin</option> 796 <option value="light" data-wght="300">Light</option> 797 <option value="regular" data-wght="400">Regular</option> 798 <option value="medium" data-wght="500">Medium</option> 799 <option value="bold" data-wght="700">Bold</option> 800 <option value="black" data-wght="900">Black</option> 801 </select> 802 </div> 803 804 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 805 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 806 <option value="variable" selected="selected">Variable</option> 807 <option value="ultra light" data-wght="100">Ultra Light</option> 808 <option value="thin" data-wght="200">Thin</option> 809 <option value="light" data-wght="300">Light</option> 810 <option value="regular" data-wght="400">Regular</option> 811 <option value="medium" data-wght="500">Medium</option> 812 <option value="bold" data-wght="700">Bold</option> 813 <option value="black" data-wght="900">Black</option> 814 </select> 815 </div> 816 817 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 818 <!-- Thai Slider: Weight (100â900) --> 819 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
820 <div data-component="tt__control-area"> 821 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 822 <div class="flex flex-row justify-between"> 823 <div class="">Width</div> 824 <div data-component="tt__wdth-value"></div> 825 </div> 826 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 827 </div> 828 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 829 <div class="flex flex-row justify-between"> 830 <div class="">Weight</div> 831 <div data-component="tt__wght-value"></div> 832 </div> 833 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="700" class="typetester-slider w-full" id="typetesterWghtRange"> 834 </div> 835 </div> 836</form> 837 838 <!-- Main Content Area --> 839 <div class="md:ml-[48px] flex w-full justify-center align-middle"> 840 <div data-component="tt__sample-text" class="w-full self-center tt-sample tt-sample-size-m text-red font-std-black outline-none transition-all" contenteditable="true" spellcheck="false" lang="en" data-size="m"> 841 Test 842 </div> 843 </div> 844</section> 845 846 847 <!-- Typetester Sample --> 848<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 849 <!-- Partial Width Content Area With Section Nav --> 850 <!-- Section Nav Area --> 851<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="latin"> 852 <!-- Select Script--> 853 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 854 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 855 856 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en" selected="selected"> 857 Latin 858 </option> 859 860 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 861 Cyrillic 862 </option> 863 864 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 865 Greek 866 </option> 867 868 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 869 Vietnamese 870 </option> 871 872 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 873 Arabic 874 </option> 875 876 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 877 Devanagari 878 </option> 879 880 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 881 Hebrew 882 </option> 883 884 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 885 Korean 886 </option> 887 888 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 889 Thai 890 </option> 891 </select> 892 </div> 893 894 <!-- Latin: Proportional / Mono Option --> 895 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 896 <div class="text-blue hover:text-red pt-1 w-[120px]"> 897 <!-- I'm sure theres a better way of applying this attribute conditionally --> 898 899 <input type="radio" checked="" id="sample-3_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 900 <label class="nav-radio-label hover:cursor-pointer" for="sample-3_prop-mono_proportional">Proportional</label> 901</div> 902 903 <div class="text-blue hover:text-red pt-1 w-[120px]"> 904 <!-- I'm sure theres a better way of applying this attribute conditionally --> 905 906 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 907 <input type="radio" id="sample-3_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 908 <label class="nav-radio-label hover:cursor-pointer" for="sample-3_prop-mono_mono">Monospaced</label> 909</div> 910 911 </fieldset> 912 913 <!-- Latin: Upright / Italic Option --> 914 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 915 <div class="text-blue hover:text-red pt-1 w-[120px]"> 916 <!-- I'm sure theres a better way of applying this attribute conditionally --> 917 918 <input type="radio" checked="" id="sample-3_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 919 <label class="nav-radio-label hover:cursor-pointer" for="sample-3_upright-ital_upright">Upright</label> 920</div> 921 922 <div class="text-blue hover:text-red pt-1 w-[120px]"> 923 <!-- I'm sure theres a better way of applying this attribute conditionally --> 924 925 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 926 <input type="radio" id="sample-3_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 927 <label class="nav-radio-label hover:cursor-pointer" for="sample-3_upright-ital_italic">Italic</label> 928</div> 929 930 </fieldset> 931 932 <!-- Latin: Default / Alternatives Option --> 933 <!-- Currently Disabled, Too Many Options Syndrome --> 934 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 935 <include src="source/html-includes/radio-button.html"> 936 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 937 "default", "label": "Default", "checked": true, "namePrefix": "sample-3" } 938 </include> 939 <include src="source/html-includes/radio-button.html"> 940 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 941 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 942 "sample-3" } 943 </include> 944 </fieldset> --> 945 946 <!-- Thai: Looped / Loopless Option --> 947 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 948 <div class="text-blue hover:text-red pt-1 w-[120px]"> 949 <!-- I'm sure theres a better way of applying this attribute conditionally --> 950 951 <input type="radio" checked="" id="sample-3_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 952 <label class="nav-radio-label hover:cursor-pointer" for="sample-3_looped_looped">Looped</label> 953</div> 954 955 <div class="text-blue hover:text-red pt-1 w-[120px]"> 956 <!-- I'm sure theres a better way of applying this attribute conditionally --> 957 958 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 959 <input type="radio" id="sample-3_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 960 <label class="nav-radio-label hover:cursor-pointer" for="sample-3_looped_loopless">Loopless</label> 961</div> 962 963 </fieldset> 964 965 <!-- Latin Dropdown: Variable + all 84 styles --> 966 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 967 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 968 <option value="variable" selected="selected">Variable</option> 969 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 970 Compressed Ultra Light 971 </option> 972 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 973 Compressed Thin 974 </option> 975 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 976 Compressed Light 977 </option> 978 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 979 Compressed Regular 980 </option> 981 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 982 Compressed Medium
983 </option> 984 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 985 Compressed Bold 986 </option> 987 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 988 Compressed Black 989 </option> 990 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 991 Condensed Ultra Light 992 </option> 993 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 994 Condensed Thin 995 </option> 996 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 997 Condensed Light 998 </option> 999 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 1000 Condensed Regular 1001 </option> 1002 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 1003 Condensed Medium 1004 </option> 1005 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 1006 Condensed Bold 1007 </option> 1008 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 1009 Condensed Black 1010 </option> 1011 <option value="standard ultra light" data-wght="100" data-wdth="100"> 1012 Standard Ultra Light 1013 </option> 1014 <option value="standard thin" data-wght="200" data-wdth="100"> 1015 Standard Thin 1016 </option> 1017 <option value="standard light" data-wght="300" data-wdth="100"> 1018 Standard Light 1019 </option> 1020 <option value="standard regular" data-wght="400" data-wdth="100"> 1021 Standard Regular 1022 </option> 1023 <option value="standard medium" data-wght="500" data-wdth="100"> 1024 Standard Medium 1025 </option> 1026 <option value="standard bold" data-wght="700" data-wdth="100"> 1027 Standard Bold 1028 </option> 1029 <option value="standard black" data-wght="900" data-wdth="100"> 1030 Standard Black 1031 </option> 1032 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 1033 Extended Ultra Light 1034 </option> 1035 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 1036 Extended Thin 1037 </option> 1038 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 1039 Extended Light 1040 </option> 1041 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 1042 Extended Regular 1043 </option> 1044 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 1045 Extended Medium 1046 </option> 1047 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 1048 Extended Bold 1049 </option> 1050 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 1051 Extended Black 1052 </option> 1053 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 1054 Expanded Ultra Light 1055 </option> 1056 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 1057 Expanded Thin 1058 </option> 1059 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 1060 Expanded Light 1061 </option> 1062 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 1063 Expanded Regular 1064 </option> 1065 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 1066 Expanded Medium 1067 </option> 1068 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 1069 Expanded Bold 1070 </option> 1071 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 1072 Expanded Black 1073 </option> 1074 </select> 1075 </div> 1076 1077 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 1078 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 1079 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 1080 <option value="variable" selected="selected">Variable</option> 1081 <option value="looped ultra light" data-wght="100">Ultra Light</option> 1082 <option value="looped thin" data-wght="200">Thin</option> 1083 <option value="looped light" data-wght="300">Light</option> 1084 <option value="looped regular" data-wght="400">Regular</option> 1085 <option value="looped medium" data-wght="500">Medium</option> 1086 <option value="looped bold" data-wght="700">Bold</option> 1087 <option value="looped black" data-wght="900">Black</option> 1088 </select> 1089 </div> 1090 1091 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 1092 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 1093 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 1094 <option value="variable" selected="selected">Variable</option> 1095 <option value="ultra light" data-wght="100">Ultra Light</option> 1096 <option value="thin" data-wght="200">Thin</option> 1097 <option value="light" data-wght="300">Light</option> 1098 <option value="regular" data-wght="400">Regular</option> 1099 <option value="medium" data-wght="500">Medium</option> 1100 <option value="bold" data-wght="700">Bold</option> 1101 <option value="black" data-wght="900">Black</option> 1102 </select> 1103 </div> 1104 1105 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 1106 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 1107 <option value="variable" selected="selected">Variable</option> 1108 <option value="ultra light" data-wght="100">Ultra Light</option> 1109 <option value="thin" data-wght="200">Thin</option> 1110 <option value="light" data-wght="300">Light</option> 1111 <option value="regular" data-wght="400">Regular</option> 1112 <option value="medium" data-wght="500">Medium</option> 1113 <option value="bold" data-wght="700">Bold</option> 1114 <option value="black" data-wght="900">Black</option> 1115 </select> 1116 </div> 1117 1118 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 1119 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 1120 <option value="variable" selected="selected">Variable</option> 1121 <option value="ultra light" data-wght="100">Ultra Light</option> 1122 <option value="thin" data-wght="200">Thin</option> 1123 <option value="light" data-wght="300">Light</option> 1124 <option value="regular" data-wght="400">Regular</option> 1125 <option value="medium" data-wght="500">Medium</option> 1126 <option value="bold" data-wght="700">Bold</option> 1127 <option value="black" data-wght="900">Black</option> 1128 </select> 1129 </div> 1130 1131 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 1132 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 1133 <option value="variable" selected="selected">Variable</option> 1134 <option value="ultra light" data-wght="100">Ultra Light</option> 1135 <option value="thin" data-wght="200">Thin</option> 1136 <option value="light" data-wght="300">Light</option> 1137 <option value="regular" data-wght="400">Regular</option> 1138 <option value="medium" data-wght="500">Medium</option> 1139 <option value="bold" data-wght="700">Bold</option> 1140 <option value="black" data-wght="900">Black</option> 1141 </select> 1142 </div> 1143 1144 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 1145 <!-- Thai Slider: Weight (100â900) --> 1146 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
1147 <div data-component="tt__control-area"> 1148 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 1149 <div class="flex flex-row justify-between"> 1150 <div class="">Width</div> 1151 <div data-component="tt__wdth-value"></div> 1152 </div> 1153 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 1154 </div> 1155 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 1156 <div class="flex flex-row justify-between"> 1157 <div class="">Weight</div> 1158 <div data-component="tt__wght-value"></div> 1159 </div> 1160 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="400" class="typetester-slider w-full" id="typetesterWghtRange"> 1161 </div> 1162 </div> 1163</form> 1164 1165 <!-- Main Content Area --> 1166 <div class="md:ml-[48px] flex w-full justify-center align-middle"> 1167 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="en" data-size="s"></div> 1168 </div> 1169</section> 1170 1171 1172 <!-- Typetester Sample --> 1173<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 1174 <!-- Partial Width Content Area With Section Nav --> 1175 <!-- Section Nav Area --> 1176<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="cyrillic"> 1177 <!-- Select Script--> 1178 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 1179 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 1180 1181 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 1182 Latin 1183 </option> 1184 1185 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk" selected="selected"> 1186 Cyrillic 1187 </option> 1188 1189 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 1190 Greek 1191 </option> 1192 1193 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 1194 Vietnamese 1195 </option> 1196 1197 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 1198 Arabic 1199 </option> 1200 1201 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 1202 Devanagari 1203 </option> 1204 1205 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 1206 Hebrew 1207 </option> 1208 1209 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 1210 Korean 1211 </option> 1212 1213 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 1214 Thai 1215 </option> 1216 </select> 1217 </div> 1218 1219 <!-- Latin: Proportional / Mono Option --> 1220 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 1221 <div class="text-blue hover:text-red pt-1 w-[120px]"> 1222 <!-- I'm sure theres a better way of applying this attribute conditionally --> 1223 1224 <input type="radio" checked="" id="sample-4_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 1225 <label class="nav-radio-label hover:cursor-pointer" for="sample-4_prop-mono_proportional">Proportional</label> 1226</div> 1227 1228 <div class="text-blue hover:text-red pt-1 w-[120px]"> 1229 <!-- I'm sure theres a better way of applying this attribute conditionally --> 1230 1231 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 1232 <input type="radio" id="sample-4_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 1233 <label class="nav-radio-label hover:cursor-pointer" for="sample-4_prop-mono_mono">Monospaced</label> 1234</div> 1235 1236 </fieldset> 1237 1238 <!-- Latin: Upright / Italic Option --> 1239 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 1240 <div class="text-blue hover:text-red pt-1 w-[120px]"> 1241 <!-- I'm sure theres a better way of applying this attribute conditionally --> 1242 1243 <input type="radio" checked="" id="sample-4_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 1244 <label class="nav-radio-label hover:cursor-pointer" for="sample-4_upright-ital_upright">Upright</label> 1245</div> 1246 1247 <div class="text-blue hover:text-red pt-1 w-[120px]"> 1248 <!-- I'm sure theres a better way of applying this attribute conditionally --> 1249 1250 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 1251 <input type="radio" id="sample-4_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 1252 <label class="nav-radio-label hover:cursor-pointer" for="sample-4_upright-ital_italic">Italic</label> 1253</div> 1254 1255 </fieldset> 1256 1257 <!-- Latin: Default / Alternatives Option --> 1258 <!-- Currently Disabled, Too Many Options Syndrome --> 1259 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 1260 <include src="source/html-includes/radio-button.html"> 1261 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 1262 "default", "label": "Default", "checked": true, "namePrefix": "sample-4" } 1263 </include> 1264 <include src="source/html-includes/radio-button.html"> 1265 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 1266 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 1267 "sample-4" } 1268 </include> 1269 </fieldset> --> 1270 1271 <!-- Thai: Looped / Loopless Option --> 1272 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 1273 <div class="text-blue hover:text-red pt-1 w-[120px]"> 1274 <!-- I'm sure theres a better way of applying this attribute conditionally --> 1275 1276 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 1277 <input type="radio" id="sample-4_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 1278 <label class="nav-radio-label hover:cursor-pointer" for="sample-4_looped_looped">Looped</label> 1279</div> 1280 1281 <div class="text-blue hover:text-red pt-1 w-[120px]"> 1282 <!-- I'm sure theres a better way of applying this attribute conditionally --> 1283 1284 <input type="radio" checked="" id="sample-4_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 1285 <label class="nav-radio-label hover:cursor-pointer" for="sample-4_looped_loopless">Loopless</label> 1286</div> 1287 1288 </fieldset> 1289 1290 <!-- Latin Dropdown: Variable + all 84 styles --> 1291 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 1292 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 1293 <option value="variable" selected="selected">Variable</option> 1294 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 1295 Compressed Ultra Light 1296 </option> 1297 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 1298 Compressed Thin 1299 </option> 1300 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 1301 Compressed Light 1302 </option> 1303 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 1304 Compressed Regular 1305 </option> 1306 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 1307 Compressed Medium
1308 </option> 1309 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 1310 Compressed Bold 1311 </option> 1312 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 1313 Compressed Black 1314 </option> 1315 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 1316 Condensed Ultra Light 1317 </option> 1318 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 1319 Condensed Thin 1320 </option> 1321 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 1322 Condensed Light 1323 </option> 1324 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 1325 Condensed Regular 1326 </option> 1327 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 1328 Condensed Medium 1329 </option> 1330 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 1331 Condensed Bold 1332 </option> 1333 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 1334 Condensed Black 1335 </option> 1336 <option value="standard ultra light" data-wght="100" data-wdth="100"> 1337 Standard Ultra Light 1338 </option> 1339 <option value="standard thin" data-wght="200" data-wdth="100"> 1340 Standard Thin 1341 </option> 1342 <option value="standard light" data-wght="300" data-wdth="100"> 1343 Standard Light 1344 </option> 1345 <option value="standard regular" data-wght="400" data-wdth="100"> 1346 Standard Regular 1347 </option> 1348 <option value="standard medium" data-wght="500" data-wdth="100"> 1349 Standard Medium 1350 </option> 1351 <option value="standard bold" data-wght="700" data-wdth="100"> 1352 Standard Bold 1353 </option> 1354 <option value="standard black" data-wght="900" data-wdth="100"> 1355 Standard Black 1356 </option> 1357 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 1358 Extended Ultra Light 1359 </option> 1360 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 1361 Extended Thin 1362 </option> 1363 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 1364 Extended Light 1365 </option> 1366 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 1367 Extended Regular 1368 </option> 1369 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 1370 Extended Medium 1371 </option> 1372 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 1373 Extended Bold 1374 </option> 1375 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 1376 Extended Black 1377 </option> 1378 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 1379 Expanded Ultra Light 1380 </option> 1381 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 1382 Expanded Thin 1383 </option> 1384 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 1385 Expanded Light 1386 </option> 1387 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 1388 Expanded Regular 1389 </option> 1390 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 1391 Expanded Medium 1392 </option> 1393 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 1394 Expanded Bold 1395 </option> 1396 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 1397 Expanded Black 1398 </option> 1399 </select> 1400 </div> 1401 1402 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 1403 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 1404 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 1405 <option value="variable" selected="selected">Variable</option> 1406 <option value="looped ultra light" data-wght="100">Ultra Light</option> 1407 <option value="looped thin" data-wght="200">Thin</option> 1408 <option value="looped light" data-wght="300">Light</option> 1409 <option value="looped regular" data-wght="400">Regular</option> 1410 <option value="looped medium" data-wght="500">Medium</option> 1411 <option value="looped bold" data-wght="700">Bold</option> 1412 <option value="looped black" data-wght="900">Black</option> 1413 </select> 1414 </div> 1415 1416 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 1417 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 1418 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 1419 <option value="variable" selected="selected">Variable</option> 1420 <option value="ultra light" data-wght="100">Ultra Light</option> 1421 <option value="thin" data-wght="200">Thin</option> 1422 <option value="light" data-wght="300">Light</option> 1423 <option value="regular" data-wght="400">Regular</option> 1424 <option value="medium" data-wght="500">Medium</option> 1425 <option value="bold" data-wght="700">Bold</option> 1426 <option value="black" data-wght="900">Black</option> 1427 </select> 1428 </div> 1429 1430 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 1431 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 1432 <option value="variable" selected="selected">Variable</option> 1433 <option value="ultra light" data-wght="100">Ultra Light</option> 1434 <option value="thin" data-wght="200">Thin</option> 1435 <option value="light" data-wght="300">Light</option> 1436 <option value="regular" data-wght="400">Regular</option> 1437 <option value="medium" data-wght="500">Medium</option> 1438 <option value="bold" data-wght="700">Bold</option> 1439 <option value="black" data-wght="900">Black</option> 1440 </select> 1441 </div> 1442 1443 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 1444 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 1445 <option value="variable" selected="selected">Variable</option> 1446 <option value="ultra light" data-wght="100">Ultra Light</option> 1447 <option value="thin" data-wght="200">Thin</option> 1448 <option value="light" data-wght="300">Light</option> 1449 <option value="regular" data-wght="400">Regular</option> 1450 <option value="medium" data-wght="500">Medium</option> 1451 <option value="bold" data-wght="700">Bold</option> 1452 <option value="black" data-wght="900">Black</option> 1453 </select> 1454 </div> 1455 1456 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 1457 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 1458 <option value="variable" selected="selected">Variable</option> 1459 <option value="ultra light" data-wght="100">Ultra Light</option> 1460 <option value="thin" data-wght="200">Thin</option> 1461 <option value="light" data-wght="300">Light</option> 1462 <option value="regular" data-wght="400">Regular</option> 1463 <option value="medium" data-wght="500">Medium</option> 1464 <option value="bold" data-wght="700">Bold</option> 1465 <option value="black" data-wght="900">Black</option> 1466 </select> 1467 </div> 1468 1469 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 1470 <!-- Thai Slider: Weight (100â900) --> 1471 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
1472 <div data-component="tt__control-area"> 1473 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 1474 <div class="flex flex-row justify-between"> 1475 <div class="">Width</div> 1476 <div data-component="tt__wdth-value"></div> 1477 </div> 1478 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 1479 </div> 1480 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 1481 <div class="flex flex-row justify-between"> 1482 <div class="">Weight</div> 1483 <div data-component="tt__wght-value"></div> 1484 </div> 1485 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="900" class="typetester-slider w-full" id="typetesterWghtRange"> 1486 </div> 1487 </div> 1488</form> 1489 1490 <!-- Main Content Area --> 1491 <div class="md:ml-[48px] flex w-full justify-center align-middle"> 1492 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="uk" data-size="l"></div> 1493 </div> 1494</section> 1495 1496 1497 <!-- Typetester Sample --> 1498<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 1499 <!-- Partial Width Content Area With Section Nav --> 1500 <!-- Section Nav Area --> 1501<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="cyrillic"> 1502 <!-- Select Script--> 1503 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 1504 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 1505 1506 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 1507 Latin 1508 </option> 1509 1510 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk" selected="selected"> 1511 Cyrillic 1512 </option> 1513 1514 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 1515 Greek 1516 </option> 1517 1518 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 1519 Vietnamese 1520 </option> 1521 1522 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 1523 Arabic 1524 </option> 1525 1526 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 1527 Devanagari 1528 </option> 1529 1530 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 1531 Hebrew 1532 </option> 1533 1534 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 1535 Korean 1536 </option> 1537 1538 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 1539 Thai 1540 </option> 1541 </select> 1542 </div> 1543 1544 <!-- Latin: Proportional / Mono Option --> 1545 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 1546 <div class="text-blue hover:text-red pt-1 w-[120px]"> 1547 <!-- I'm sure theres a better way of applying this attribute conditionally --> 1548 1549 <input type="radio" checked="" id="sample-5_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 1550 <label class="nav-radio-label hover:cursor-pointer" for="sample-5_prop-mono_proportional">Proportional</label> 1551</div> 1552 1553 <div class="text-blue hover:text-red pt-1 w-[120px]"> 1554 <!-- I'm sure theres a better way of applying this attribute conditionally --> 1555 1556 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 1557 <input type="radio" id="sample-5_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 1558 <label class="nav-radio-label hover:cursor-pointer" for="sample-5_prop-mono_mono">Monospaced</label> 1559</div> 1560 1561 </fieldset> 1562 1563 <!-- Latin: Upright / Italic Option --> 1564 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 1565 <div class="text-blue hover:text-red pt-1 w-[120px]"> 1566 <!-- I'm sure theres a better way of applying this attribute conditionally --> 1567 1568 <input type="radio" checked="" id="sample-5_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 1569 <label class="nav-radio-label hover:cursor-pointer" for="sample-5_upright-ital_upright">Upright</label> 1570</div> 1571 1572 <div class="text-blue hover:text-red pt-1 w-[120px]"> 1573 <!-- I'm sure theres a better way of applying this attribute conditionally --> 1574 1575 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 1576 <input type="radio" id="sample-5_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 1577 <label class="nav-radio-label hover:cursor-pointer" for="sample-5_upright-ital_italic">Italic</label> 1578</div> 1579 1580 </fieldset> 1581 1582 <!-- Latin: Default / Alternatives Option --> 1583 <!-- Currently Disabled, Too Many Options Syndrome --> 1584 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 1585 <include src="source/html-includes/radio-button.html"> 1586 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 1587 "default", "label": "Default", "checked": true, "namePrefix": "sample-5" } 1588 </include> 1589 <include src="source/html-includes/radio-button.html"> 1590 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 1591 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 1592 "sample-5" } 1593 </include> 1594 </fieldset> --> 1595 1596 <!-- Thai: Looped / Loopless Option --> 1597 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 1598 <div class="text-blue hover:text-red pt-1 w-[120px]"> 1599 <!-- I'm sure theres a better way of applying this attribute conditionally --> 1600 1601 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 1602 <input type="radio" id="sample-5_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 1603 <label class="nav-radio-label hover:cursor-pointer" for="sample-5_looped_looped">Looped</label> 1604</div> 1605 1606 <div class="text-blue hover:text-red pt-1 w-[120px]"> 1607 <!-- I'm sure theres a better way of applying this attribute conditionally --> 1608 1609 <input type="radio" checked="" id="sample-5_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 1610 <label class="nav-radio-label hover:cursor-pointer" for="sample-5_looped_loopless">Loopless</label> 1611</div> 1612 1613 </fieldset> 1614 1615 <!-- Latin Dropdown: Variable + all 84 styles --> 1616 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 1617 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 1618 <option value="variable" selected="selected">Variable</option> 1619 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 1620 Compressed Ultra Light 1621 </option> 1622 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 1623 Compressed Thin 1624 </option> 1625 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 1626 Compressed Light 1627 </option> 1628 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 1629 Compressed Regular 1630 </option> 1631 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 1632 Compressed Medium
1633 </option> 1634 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 1635 Compressed Bold 1636 </option> 1637 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 1638 Compressed Black 1639 </option> 1640 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 1641 Condensed Ultra Light 1642 </option> 1643 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 1644 Condensed Thin 1645 </option> 1646 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 1647 Condensed Light 1648 </option> 1649 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 1650 Condensed Regular 1651 </option> 1652 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 1653 Condensed Medium 1654 </option> 1655 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 1656 Condensed Bold 1657 </option> 1658 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 1659 Condensed Black 1660 </option> 1661 <option value="standard ultra light" data-wght="100" data-wdth="100"> 1662 Standard Ultra Light 1663 </option> 1664 <option value="standard thin" data-wght="200" data-wdth="100"> 1665 Standard Thin 1666 </option> 1667 <option value="standard light" data-wght="300" data-wdth="100"> 1668 Standard Light 1669 </option> 1670 <option value="standard regular" data-wght="400" data-wdth="100"> 1671 Standard Regular 1672 </option> 1673 <option value="standard medium" data-wght="500" data-wdth="100"> 1674 Standard Medium 1675 </option> 1676 <option value="standard bold" data-wght="700" data-wdth="100"> 1677 Standard Bold 1678 </option> 1679 <option value="standard black" data-wght="900" data-wdth="100"> 1680 Standard Black 1681 </option> 1682 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 1683 Extended Ultra Light 1684 </option> 1685 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 1686 Extended Thin 1687 </option> 1688 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 1689 Extended Light 1690 </option> 1691 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 1692 Extended Regular 1693 </option> 1694 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 1695 Extended Medium 1696 </option> 1697 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 1698 Extended Bold 1699 </option> 1700 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 1701 Extended Black 1702 </option> 1703 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 1704 Expanded Ultra Light 1705 </option> 1706 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 1707 Expanded Thin 1708 </option> 1709 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 1710 Expanded Light 1711 </option> 1712 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 1713 Expanded Regular 1714 </option> 1715 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 1716 Expanded Medium 1717 </option> 1718 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 1719 Expanded Bold 1720 </option> 1721 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 1722 Expanded Black 1723 </option> 1724 </select> 1725 </div> 1726 1727 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 1728 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 1729 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 1730 <option value="variable" selected="selected">Variable</option> 1731 <option value="looped ultra light" data-wght="100">Ultra Light</option> 1732 <option value="looped thin" data-wght="200">Thin</option> 1733 <option value="looped light" data-wght="300">Light</option> 1734 <option value="looped regular" data-wght="400">Regular</option> 1735 <option value="looped medium" data-wght="500">Medium</option> 1736 <option value="looped bold" data-wght="700">Bold</option> 1737 <option value="looped black" data-wght="900">Black</option> 1738 </select> 1739 </div> 1740 1741 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 1742 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 1743 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 1744 <option value="variable" selected="selected">Variable</option> 1745 <option value="ultra light" data-wght="100">Ultra Light</option> 1746 <option value="thin" data-wght="200">Thin</option> 1747 <option value="light" data-wght="300">Light</option> 1748 <option value="regular" data-wght="400">Regular</option> 1749 <option value="medium" data-wght="500">Medium</option> 1750 <option value="bold" data-wght="700">Bold</option> 1751 <option value="black" data-wght="900">Black</option> 1752 </select> 1753 </div> 1754 1755 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 1756 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 1757 <option value="variable" selected="selected">Variable</option> 1758 <option value="ultra light" data-wght="100">Ultra Light</option> 1759 <option value="thin" data-wght="200">Thin</option> 1760 <option value="light" data-wght="300">Light</option> 1761 <option value="regular" data-wght="400">Regular</option> 1762 <option value="medium" data-wght="500">Medium</option> 1763 <option value="bold" data-wght="700">Bold</option> 1764 <option value="black" data-wght="900">Black</option> 1765 </select> 1766 </div> 1767 1768 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 1769 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 1770 <option value="variable" selected="selected">Variable</option> 1771 <option value="ultra light" data-wght="100">Ultra Light</option> 1772 <option value="thin" data-wght="200">Thin</option> 1773 <option value="light" data-wght="300">Light</option> 1774 <option value="regular" data-wght="400">Regular</option> 1775 <option value="medium" data-wght="500">Medium</option> 1776 <option value="bold" data-wght="700">Bold</option> 1777 <option value="black" data-wght="900">Black</option> 1778 </select> 1779 </div> 1780 1781 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 1782 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 1783 <option value="variable" selected="selected">Variable</option> 1784 <option value="ultra light" data-wght="100">Ultra Light</option> 1785 <option value="thin" data-wght="200">Thin</option> 1786 <option value="light" data-wght="300">Light</option> 1787 <option value="regular" data-wght="400">Regular</option> 1788 <option value="medium" data-wght="500">Medium</option> 1789 <option value="bold" data-wght="700">Bold</option> 1790 <option value="black" data-wght="900">Black</option> 1791 </select> 1792 </div> 1793 1794 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 1795 <!-- Thai Slider: Weight (100â900) --> 1796 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
1797 <div data-component="tt__control-area"> 1798 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 1799 <div class="flex flex-row justify-between"> 1800 <div class="">Width</div> 1801 <div data-component="tt__wdth-value"></div> 1802 </div> 1803 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="150" class="typetester-slider w-full" id="typetesterWdthRange"> 1804 </div> 1805 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 1806 <div class="flex flex-row justify-between"> 1807 <div class="">Weight</div> 1808 <div data-component="tt__wght-value"></div> 1809 </div> 1810 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="500" class="typetester-slider w-full" id="typetesterWghtRange"> 1811 </div> 1812 </div> 1813</form> 1814 1815 <!-- Main Content Area --> 1816 <div class="md:ml-[48px] flex w-full justify-center align-middle"> 1817 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="uk" data-size="m"></div> 1818 </div> 1819</section> 1820 1821 1822 <!-- Typetester Sample --> 1823<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 1824 <!-- Partial Width Content Area With Section Nav --> 1825 <!-- Section Nav Area --> 1826<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="cyrillic"> 1827 <!-- Select Script--> 1828 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 1829 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 1830 1831 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 1832 Latin 1833 </option> 1834 1835 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk" selected="selected"> 1836 Cyrillic 1837 </option> 1838 1839 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 1840 Greek 1841 </option> 1842 1843 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 1844 Vietnamese 1845 </option> 1846 1847 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 1848 Arabic 1849 </option> 1850 1851 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 1852 Devanagari 1853 </option> 1854 1855 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 1856 Hebrew 1857 </option> 1858 1859 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 1860 Korean 1861 </option> 1862 1863 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 1864 Thai 1865 </option> 1866 </select> 1867 </div> 1868 1869 <!-- Latin: Proportional / Mono Option --> 1870 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 1871 <div class="text-blue hover:text-red pt-1 w-[120px]"> 1872 <!-- I'm sure theres a better way of applying this attribute conditionally --> 1873 1874 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 1875 <input type="radio" id="sample-6_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 1876 <label class="nav-radio-label hover:cursor-pointer" for="sample-6_prop-mono_proportional">Proportional</label> 1877</div> 1878 1879 <div class="text-blue hover:text-red pt-1 w-[120px]"> 1880 <!-- I'm sure theres a better way of applying this attribute conditionally --> 1881 1882 <input type="radio" checked="" id="sample-6_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 1883 <label class="nav-radio-label hover:cursor-pointer" for="sample-6_prop-mono_mono">Monospaced</label> 1884</div> 1885 1886 </fieldset> 1887 1888 <!-- Latin: Upright / Italic Option --> 1889 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 1890 <div class="text-blue hover:text-red pt-1 w-[120px]"> 1891 <!-- I'm sure theres a better way of applying this attribute conditionally --> 1892 1893 <input type="radio" checked="" id="sample-6_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 1894 <label class="nav-radio-label hover:cursor-pointer" for="sample-6_upright-ital_upright">Upright</label> 1895</div> 1896 1897 <div class="text-blue hover:text-red pt-1 w-[120px]"> 1898 <!-- I'm sure theres a better way of applying this attribute conditionally --> 1899 1900 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 1901 <input type="radio" id="sample-6_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 1902 <label class="nav-radio-label hover:cursor-pointer" for="sample-6_upright-ital_italic">Italic</label> 1903</div> 1904 1905 </fieldset> 1906 1907 <!-- Latin: Default / Alternatives Option --> 1908 <!-- Currently Disabled, Too Many Options Syndrome --> 1909 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 1910 <include src="source/html-includes/radio-button.html"> 1911 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 1912 "default", "label": "Default", "checked": true, "namePrefix": "sample-6" } 1913 </include> 1914 <include src="source/html-includes/radio-button.html"> 1915 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 1916 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 1917 "sample-6" } 1918 </include> 1919 </fieldset> --> 1920 1921 <!-- Thai: Looped / Loopless Option --> 1922 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 1923 <div class="text-blue hover:text-red pt-1 w-[120px]"> 1924 <!-- I'm sure theres a better way of applying this attribute conditionally --> 1925 1926 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 1927 <input type="radio" id="sample-6_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 1928 <label class="nav-radio-label hover:cursor-pointer" for="sample-6_looped_looped">Looped</label> 1929</div> 1930 1931 <div class="text-blue hover:text-red pt-1 w-[120px]"> 1932 <!-- I'm sure theres a better way of applying this attribute conditionally --> 1933 1934 <input type="radio" checked="" id="sample-6_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 1935 <label class="nav-radio-label hover:cursor-pointer" for="sample-6_looped_loopless">Loopless</label> 1936</div> 1937 1938 </fieldset> 1939 1940 <!-- Latin Dropdown: Variable + all 84 styles --> 1941 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 1942 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 1943 <option value="variable" selected="selected">Variable</option> 1944 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 1945 Compressed Ultra Light 1946 </option> 1947 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 1948 Compressed Thin 1949 </option> 1950 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 1951 Compressed Light 1952 </option> 1953 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 1954 Compressed Regular 1955 </option> 1956 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 1957 Compressed Medium
1958 </option> 1959 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 1960 Compressed Bold 1961 </option> 1962 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 1963 Compressed Black 1964 </option> 1965 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 1966 Condensed Ultra Light 1967 </option> 1968 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 1969 Condensed Thin 1970 </option> 1971 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 1972 Condensed Light 1973 </option> 1974 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 1975 Condensed Regular 1976 </option> 1977 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 1978 Condensed Medium 1979 </option> 1980 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 1981 Condensed Bold 1982 </option> 1983 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 1984 Condensed Black 1985 </option> 1986 <option value="standard ultra light" data-wght="100" data-wdth="100"> 1987 Standard Ultra Light 1988 </option> 1989 <option value="standard thin" data-wght="200" data-wdth="100"> 1990 Standard Thin 1991 </option> 1992 <option value="standard light" data-wght="300" data-wdth="100"> 1993 Standard Light 1994 </option> 1995 <option value="standard regular" data-wght="400" data-wdth="100"> 1996 Standard Regular 1997 </option> 1998 <option value="standard medium" data-wght="500" data-wdth="100"> 1999 Standard Medium 2000 </option> 2001 <option value="standard bold" data-wght="700" data-wdth="100"> 2002 Standard Bold 2003 </option> 2004 <option value="standard black" data-wght="900" data-wdth="100"> 2005 Standard Black 2006 </option> 2007 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 2008 Extended Ultra Light 2009 </option> 2010 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 2011 Extended Thin 2012 </option> 2013 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 2014 Extended Light 2015 </option> 2016 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 2017 Extended Regular 2018 </option> 2019 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 2020 Extended Medium 2021 </option> 2022 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 2023 Extended Bold 2024 </option> 2025 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 2026 Extended Black 2027 </option> 2028 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 2029 Expanded Ultra Light 2030 </option> 2031 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 2032 Expanded Thin 2033 </option> 2034 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 2035 Expanded Light 2036 </option> 2037 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 2038 Expanded Regular 2039 </option> 2040 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 2041 Expanded Medium 2042 </option> 2043 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 2044 Expanded Bold 2045 </option> 2046 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 2047 Expanded Black 2048 </option> 2049 </select> 2050 </div> 2051 2052 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 2053 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 2054 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 2055 <option value="variable" selected="selected">Variable</option> 2056 <option value="looped ultra light" data-wght="100">Ultra Light</option> 2057 <option value="looped thin" data-wght="200">Thin</option> 2058 <option value="looped light" data-wght="300">Light</option> 2059 <option value="looped regular" data-wght="400">Regular</option> 2060 <option value="looped medium" data-wght="500">Medium</option> 2061 <option value="looped bold" data-wght="700">Bold</option> 2062 <option value="looped black" data-wght="900">Black</option> 2063 </select> 2064 </div> 2065 2066 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 2067 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 2068 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 2069 <option value="variable" selected="selected">Variable</option> 2070 <option value="ultra light" data-wght="100">Ultra Light</option> 2071 <option value="thin" data-wght="200">Thin</option> 2072 <option value="light" data-wght="300">Light</option> 2073 <option value="regular" data-wght="400">Regular</option> 2074 <option value="medium" data-wght="500">Medium</option> 2075 <option value="bold" data-wght="700">Bold</option> 2076 <option value="black" data-wght="900">Black</option> 2077 </select> 2078 </div> 2079 2080 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 2081 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 2082 <option value="variable" selected="selected">Variable</option> 2083 <option value="ultra light" data-wght="100">Ultra Light</option> 2084 <option value="thin" data-wght="200">Thin</option> 2085 <option value="light" data-wght="300">Light</option> 2086 <option value="regular" data-wght="400">Regular</option> 2087 <option value="medium" data-wght="500">Medium</option> 2088 <option value="bold" data-wght="700">Bold</option> 2089 <option value="black" data-wght="900">Black</option> 2090 </select> 2091 </div> 2092 2093 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 2094 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 2095 <option value="variable" selected="selected">Variable</option> 2096 <option value="ultra light" data-wght="100">Ultra Light</option> 2097 <option value="thin" data-wght="200">Thin</option> 2098 <option value="light" data-wght="300">Light</option> 2099 <option value="regular" data-wght="400">Regular</option> 2100 <option value="medium" data-wght="500">Medium</option> 2101 <option value="bold" data-wght="700">Bold</option> 2102 <option value="black" data-wght="900">Black</option> 2103 </select> 2104 </div> 2105 2106 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 2107 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 2108 <option value="variable" selected="selected">Variable</option> 2109 <option value="ultra light" data-wght="100">Ultra Light</option> 2110 <option value="thin" data-wght="200">Thin</option> 2111 <option value="light" data-wght="300">Light</option> 2112 <option value="regular" data-wght="400">Regular</option> 2113 <option value="medium" data-wght="500">Medium</option> 2114 <option value="bold" data-wght="700">Bold</option> 2115 <option value="black" data-wght="900">Black</option> 2116 </select> 2117 </div> 2118 2119 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 2120 <!-- Thai Slider: Weight (100â900) --> 2121 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
2122 <div data-component="tt__control-area"> 2123 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 2124 <div class="flex flex-row justify-between"> 2125 <div class="">Width</div> 2126 <div data-component="tt__wdth-value"></div> 2127 </div> 2128 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 2129 </div> 2130 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 2131 <div class="flex flex-row justify-between"> 2132 <div class="">Weight</div> 2133 <div data-component="tt__wght-value"></div> 2134 </div> 2135 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="400" class="typetester-slider w-full" id="typetesterWghtRange"> 2136 </div> 2137 </div> 2138</form> 2139 2140 <!-- Main Content Area --> 2141 <div class="md:ml-[48px] flex w-full justify-center align-middle"> 2142 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="uk" data-size="s"></div> 2143 </div> 2144</section> 2145 2146 2147 <!-- Typetester Sample --> 2148<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 2149 <!-- Partial Width Content Area With Section Nav --> 2150 <!-- Section Nav Area --> 2151<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="greek"> 2152 <!-- Select Script--> 2153 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 2154 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 2155 2156 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 2157 Latin 2158 </option> 2159 2160 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 2161 Cyrillic 2162 </option> 2163 2164 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el" selected="selected"> 2165 Greek 2166 </option> 2167 2168 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 2169 Vietnamese 2170 </option> 2171 2172 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 2173 Arabic 2174 </option> 2175 2176 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 2177 Devanagari 2178 </option> 2179 2180 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 2181 Hebrew 2182 </option> 2183 2184 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 2185 Korean 2186 </option> 2187 2188 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 2189 Thai 2190 </option> 2191 </select> 2192 </div> 2193 2194 <!-- Latin: Proportional / Mono Option --> 2195 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 2196 <div class="text-blue hover:text-red pt-1 w-[120px]"> 2197 <!-- I'm sure theres a better way of applying this attribute conditionally --> 2198 2199 <input type="radio" checked="" id="sample-7_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 2200 <label class="nav-radio-label hover:cursor-pointer" for="sample-7_prop-mono_proportional">Proportional</label> 2201</div> 2202 2203 <div class="text-blue hover:text-red pt-1 w-[120px]"> 2204 <!-- I'm sure theres a better way of applying this attribute conditionally --> 2205 2206 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 2207 <input type="radio" id="sample-7_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 2208 <label class="nav-radio-label hover:cursor-pointer" for="sample-7_prop-mono_mono">Monospaced</label> 2209</div> 2210 2211 </fieldset> 2212 2213 <!-- Latin: Upright / Italic Option --> 2214 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 2215 <div class="text-blue hover:text-red pt-1 w-[120px]"> 2216 <!-- I'm sure theres a better way of applying this attribute conditionally --> 2217 2218 <input type="radio" checked="" id="sample-7_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 2219 <label class="nav-radio-label hover:cursor-pointer" for="sample-7_upright-ital_upright">Upright</label> 2220</div> 2221 2222 <div class="text-blue hover:text-red pt-1 w-[120px]"> 2223 <!-- I'm sure theres a better way of applying this attribute conditionally --> 2224 2225 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 2226 <input type="radio" id="sample-7_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 2227 <label class="nav-radio-label hover:cursor-pointer" for="sample-7_upright-ital_italic">Italic</label> 2228</div> 2229 2230 </fieldset> 2231 2232 <!-- Latin: Default / Alternatives Option --> 2233 <!-- Currently Disabled, Too Many Options Syndrome --> 2234 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 2235 <include src="source/html-includes/radio-button.html"> 2236 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 2237 "default", "label": "Default", "checked": true, "namePrefix": "sample-7" } 2238 </include> 2239 <include src="source/html-includes/radio-button.html"> 2240 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 2241 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 2242 "sample-7" } 2243 </include> 2244 </fieldset> --> 2245 2246 <!-- Thai: Looped / Loopless Option --> 2247 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 2248 <div class="text-blue hover:text-red pt-1 w-[120px]"> 2249 <!-- I'm sure theres a better way of applying this attribute conditionally --> 2250 2251 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 2252 <input type="radio" id="sample-7_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 2253 <label class="nav-radio-label hover:cursor-pointer" for="sample-7_looped_looped">Looped</label> 2254</div> 2255 2256 <div class="text-blue hover:text-red pt-1 w-[120px]"> 2257 <!-- I'm sure theres a better way of applying this attribute conditionally --> 2258 2259 <input type="radio" checked="" id="sample-7_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 2260 <label class="nav-radio-label hover:cursor-pointer" for="sample-7_looped_loopless">Loopless</label> 2261</div> 2262 2263 </fieldset> 2264 2265 <!-- Latin Dropdown: Variable + all 84 styles --> 2266 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 2267 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 2268 <option value="variable" selected="selected">Variable</option> 2269 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 2270 Compressed Ultra Light 2271 </option> 2272 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 2273 Compressed Thin 2274 </option> 2275 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 2276 Compressed Light 2277 </option> 2278 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 2279 Compressed Regular 2280 </option> 2281 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 2282 Compressed Medium
2283 </option> 2284 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 2285 Compressed Bold 2286 </option> 2287 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 2288 Compressed Black 2289 </option> 2290 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 2291 Condensed Ultra Light 2292 </option> 2293 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 2294 Condensed Thin 2295 </option> 2296 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 2297 Condensed Light 2298 </option> 2299 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 2300 Condensed Regular 2301 </option> 2302 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 2303 Condensed Medium 2304 </option> 2305 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 2306 Condensed Bold 2307 </option> 2308 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 2309 Condensed Black 2310 </option> 2311 <option value="standard ultra light" data-wght="100" data-wdth="100"> 2312 Standard Ultra Light 2313 </option> 2314 <option value="standard thin" data-wght="200" data-wdth="100"> 2315 Standard Thin 2316 </option> 2317 <option value="standard light" data-wght="300" data-wdth="100"> 2318 Standard Light 2319 </option> 2320 <option value="standard regular" data-wght="400" data-wdth="100"> 2321 Standard Regular 2322 </option> 2323 <option value="standard medium" data-wght="500" data-wdth="100"> 2324 Standard Medium 2325 </option> 2326 <option value="standard bold" data-wght="700" data-wdth="100"> 2327 Standard Bold 2328 </option> 2329 <option value="standard black" data-wght="900" data-wdth="100"> 2330 Standard Black 2331 </option> 2332 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 2333 Extended Ultra Light 2334 </option> 2335 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 2336 Extended Thin 2337 </option> 2338 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 2339 Extended Light 2340 </option> 2341 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 2342 Extended Regular 2343 </option> 2344 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 2345 Extended Medium 2346 </option> 2347 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 2348 Extended Bold 2349 </option> 2350 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 2351 Extended Black 2352 </option> 2353 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 2354 Expanded Ultra Light 2355 </option> 2356 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 2357 Expanded Thin 2358 </option> 2359 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 2360 Expanded Light 2361 </option> 2362 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 2363 Expanded Regular 2364 </option> 2365 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 2366 Expanded Medium 2367 </option> 2368 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 2369 Expanded Bold 2370 </option> 2371 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 2372 Expanded Black 2373 </option> 2374 </select> 2375 </div> 2376 2377 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 2378 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 2379 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 2380 <option value="variable" selected="selected">Variable</option> 2381 <option value="looped ultra light" data-wght="100">Ultra Light</option> 2382 <option value="looped thin" data-wght="200">Thin</option> 2383 <option value="looped light" data-wght="300">Light</option> 2384 <option value="looped regular" data-wght="400">Regular</option> 2385 <option value="looped medium" data-wght="500">Medium</option> 2386 <option value="looped bold" data-wght="700">Bold</option> 2387 <option value="looped black" data-wght="900">Black</option> 2388 </select> 2389 </div> 2390 2391 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 2392 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 2393 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 2394 <option value="variable" selected="selected">Variable</option> 2395 <option value="ultra light" data-wght="100">Ultra Light</option> 2396 <option value="thin" data-wght="200">Thin</option> 2397 <option value="light" data-wght="300">Light</option> 2398 <option value="regular" data-wght="400">Regular</option> 2399 <option value="medium" data-wght="500">Medium</option> 2400 <option value="bold" data-wght="700">Bold</option> 2401 <option value="black" data-wght="900">Black</option> 2402 </select> 2403 </div> 2404 2405 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 2406 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 2407 <option value="variable" selected="selected">Variable</option> 2408 <option value="ultra light" data-wght="100">Ultra Light</option> 2409 <option value="thin" data-wght="200">Thin</option> 2410 <option value="light" data-wght="300">Light</option> 2411 <option value="regular" data-wght="400">Regular</option> 2412 <option value="medium" data-wght="500">Medium</option> 2413 <option value="bold" data-wght="700">Bold</option> 2414 <option value="black" data-wght="900">Black</option> 2415 </select> 2416 </div> 2417 2418 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 2419 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 2420 <option value="variable" selected="selected">Variable</option> 2421 <option value="ultra light" data-wght="100">Ultra Light</option> 2422 <option value="thin" data-wght="200">Thin</option> 2423 <option value="light" data-wght="300">Light</option> 2424 <option value="regular" data-wght="400">Regular</option> 2425 <option value="medium" data-wght="500">Medium</option> 2426 <option value="bold" data-wght="700">Bold</option> 2427 <option value="black" data-wght="900">Black</option> 2428 </select> 2429 </div> 2430 2431 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 2432 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 2433 <option value="variable" selected="selected">Variable</option> 2434 <option value="ultra light" data-wght="100">Ultra Light</option> 2435 <option value="thin" data-wght="200">Thin</option> 2436 <option value="light" data-wght="300">Light</option> 2437 <option value="regular" data-wght="400">Regular</option> 2438 <option value="medium" data-wght="500">Medium</option> 2439 <option value="bold" data-wght="700">Bold</option> 2440 <option value="black" data-wght="900">Black</option> 2441 </select> 2442 </div> 2443 2444 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 2445 <!-- Thai Slider: Weight (100â900) --> 2446 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
2447 <div data-component="tt__control-area"> 2448 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 2449 <div class="flex flex-row justify-between"> 2450 <div class="">Width</div> 2451 <div data-component="tt__wdth-value"></div> 2452 </div> 2453 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="50" class="typetester-slider w-full" id="typetesterWdthRange"> 2454 </div> 2455 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 2456 <div class="flex flex-row justify-between"> 2457 <div class="">Weight</div> 2458 <div data-component="tt__wght-value"></div> 2459 </div> 2460 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="200" class="typetester-slider w-full" id="typetesterWghtRange"> 2461 </div> 2462 </div> 2463</form> 2464 2465 <!-- Main Content Area --> 2466 <div class="md:ml-[48px] flex w-full justify-center align-middle"> 2467 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="el" data-size="l"></div> 2468 </div> 2469</section> 2470 2471 2472 <!-- Typetester Sample --> 2473<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 2474 <!-- Partial Width Content Area With Section Nav --> 2475 <!-- Section Nav Area --> 2476<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="greek"> 2477 <!-- Select Script--> 2478 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 2479 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 2480 2481 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 2482 Latin 2483 </option> 2484 2485 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 2486 Cyrillic 2487 </option> 2488 2489 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el" selected="selected"> 2490 Greek 2491 </option> 2492 2493 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 2494 Vietnamese 2495 </option> 2496 2497 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 2498 Arabic 2499 </option> 2500 2501 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 2502 Devanagari 2503 </option> 2504 2505 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 2506 Hebrew 2507 </option> 2508 2509 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 2510 Korean 2511 </option> 2512 2513 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 2514 Thai 2515 </option> 2516 </select> 2517 </div> 2518 2519 <!-- Latin: Proportional / Mono Option --> 2520 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 2521 <div class="text-blue hover:text-red pt-1 w-[120px]"> 2522 <!-- I'm sure theres a better way of applying this attribute conditionally --> 2523 2524 <input type="radio" checked="" id="sample-8_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 2525 <label class="nav-radio-label hover:cursor-pointer" for="sample-8_prop-mono_proportional">Proportional</label> 2526</div> 2527 2528 <div class="text-blue hover:text-red pt-1 w-[120px]"> 2529 <!-- I'm sure theres a better way of applying this attribute conditionally --> 2530 2531 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 2532 <input type="radio" id="sample-8_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 2533 <label class="nav-radio-label hover:cursor-pointer" for="sample-8_prop-mono_mono">Monospaced</label> 2534</div> 2535 2536 </fieldset> 2537 2538 <!-- Latin: Upright / Italic Option --> 2539 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 2540 <div class="text-blue hover:text-red pt-1 w-[120px]"> 2541 <!-- I'm sure theres a better way of applying this attribute conditionally --> 2542 2543 <input type="radio" checked="" id="sample-8_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 2544 <label class="nav-radio-label hover:cursor-pointer" for="sample-8_upright-ital_upright">Upright</label> 2545</div> 2546 2547 <div class="text-blue hover:text-red pt-1 w-[120px]"> 2548 <!-- I'm sure theres a better way of applying this attribute conditionally --> 2549 2550 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 2551 <input type="radio" id="sample-8_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 2552 <label class="nav-radio-label hover:cursor-pointer" for="sample-8_upright-ital_italic">Italic</label> 2553</div> 2554 2555 </fieldset> 2556 2557 <!-- Latin: Default / Alternatives Option --> 2558 <!-- Currently Disabled, Too Many Options Syndrome --> 2559 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 2560 <include src="source/html-includes/radio-button.html"> 2561 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 2562 "default", "label": "Default", "checked": true, "namePrefix": "sample-8" } 2563 </include> 2564 <include src="source/html-includes/radio-button.html"> 2565 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 2566 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 2567 "sample-8" } 2568 </include> 2569 </fieldset> --> 2570 2571 <!-- Thai: Looped / Loopless Option --> 2572 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 2573 <div class="text-blue hover:text-red pt-1 w-[120px]"> 2574 <!-- I'm sure theres a better way of applying this attribute conditionally --> 2575 2576 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 2577 <input type="radio" id="sample-8_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 2578 <label class="nav-radio-label hover:cursor-pointer" for="sample-8_looped_looped">Looped</label> 2579</div> 2580 2581 <div class="text-blue hover:text-red pt-1 w-[120px]"> 2582 <!-- I'm sure theres a better way of applying this attribute conditionally --> 2583 2584 <input type="radio" checked="" id="sample-8_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 2585 <label class="nav-radio-label hover:cursor-pointer" for="sample-8_looped_loopless">Loopless</label> 2586</div> 2587 2588 </fieldset> 2589 2590 <!-- Latin Dropdown: Variable + all 84 styles --> 2591 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 2592 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 2593 <option value="variable" selected="selected">Variable</option> 2594 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 2595 Compressed Ultra Light 2596 </option> 2597 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 2598 Compressed Thin 2599 </option> 2600 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 2601 Compressed Light 2602 </option> 2603 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 2604 Compressed Regular 2605 </option> 2606 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 2607 Compressed Medium
2608 </option> 2609 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 2610 Compressed Bold 2611 </option> 2612 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 2613 Compressed Black 2614 </option> 2615 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 2616 Condensed Ultra Light 2617 </option> 2618 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 2619 Condensed Thin 2620 </option> 2621 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 2622 Condensed Light 2623 </option> 2624 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 2625 Condensed Regular 2626 </option> 2627 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 2628 Condensed Medium 2629 </option> 2630 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 2631 Condensed Bold 2632 </option> 2633 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 2634 Condensed Black 2635 </option> 2636 <option value="standard ultra light" data-wght="100" data-wdth="100"> 2637 Standard Ultra Light 2638 </option> 2639 <option value="standard thin" data-wght="200" data-wdth="100"> 2640 Standard Thin 2641 </option> 2642 <option value="standard light" data-wght="300" data-wdth="100"> 2643 Standard Light 2644 </option> 2645 <option value="standard regular" data-wght="400" data-wdth="100"> 2646 Standard Regular 2647 </option> 2648 <option value="standard medium" data-wght="500" data-wdth="100"> 2649 Standard Medium 2650 </option> 2651 <option value="standard bold" data-wght="700" data-wdth="100"> 2652 Standard Bold 2653 </option> 2654 <option value="standard black" data-wght="900" data-wdth="100"> 2655 Standard Black 2656 </option> 2657 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 2658 Extended Ultra Light 2659 </option> 2660 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 2661 Extended Thin 2662 </option> 2663 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 2664 Extended Light 2665 </option> 2666 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 2667 Extended Regular 2668 </option> 2669 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 2670 Extended Medium 2671 </option> 2672 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 2673 Extended Bold 2674 </option> 2675 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 2676 Extended Black 2677 </option> 2678 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 2679 Expanded Ultra Light 2680 </option> 2681 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 2682 Expanded Thin 2683 </option> 2684 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 2685 Expanded Light 2686 </option> 2687 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 2688 Expanded Regular 2689 </option> 2690 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 2691 Expanded Medium 2692 </option> 2693 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 2694 Expanded Bold 2695 </option> 2696 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 2697 Expanded Black 2698 </option> 2699 </select> 2700 </div> 2701 2702 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 2703 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 2704 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 2705 <option value="variable" selected="selected">Variable</option> 2706 <option value="looped ultra light" data-wght="100">Ultra Light</option> 2707 <option value="looped thin" data-wght="200">Thin</option> 2708 <option value="looped light" data-wght="300">Light</option> 2709 <option value="looped regular" data-wght="400">Regular</option> 2710 <option value="looped medium" data-wght="500">Medium</option> 2711 <option value="looped bold" data-wght="700">Bold</option> 2712 <option value="looped black" data-wght="900">Black</option> 2713 </select> 2714 </div> 2715 2716 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 2717 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 2718 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 2719 <option value="variable" selected="selected">Variable</option> 2720 <option value="ultra light" data-wght="100">Ultra Light</option> 2721 <option value="thin" data-wght="200">Thin</option> 2722 <option value="light" data-wght="300">Light</option> 2723 <option value="regular" data-wght="400">Regular</option> 2724 <option value="medium" data-wght="500">Medium</option> 2725 <option value="bold" data-wght="700">Bold</option> 2726 <option value="black" data-wght="900">Black</option> 2727 </select> 2728 </div> 2729 2730 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 2731 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 2732 <option value="variable" selected="selected">Variable</option> 2733 <option value="ultra light" data-wght="100">Ultra Light</option> 2734 <option value="thin" data-wght="200">Thin</option> 2735 <option value="light" data-wght="300">Light</option> 2736 <option value="regular" data-wght="400">Regular</option> 2737 <option value="medium" data-wght="500">Medium</option> 2738 <option value="bold" data-wght="700">Bold</option> 2739 <option value="black" data-wght="900">Black</option> 2740 </select> 2741 </div> 2742 2743 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 2744 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 2745 <option value="variable" selected="selected">Variable</option> 2746 <option value="ultra light" data-wght="100">Ultra Light</option> 2747 <option value="thin" data-wght="200">Thin</option> 2748 <option value="light" data-wght="300">Light</option> 2749 <option value="regular" data-wght="400">Regular</option> 2750 <option value="medium" data-wght="500">Medium</option> 2751 <option value="bold" data-wght="700">Bold</option> 2752 <option value="black" data-wght="900">Black</option> 2753 </select> 2754 </div> 2755 2756 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 2757 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 2758 <option value="variable" selected="selected">Variable</option> 2759 <option value="ultra light" data-wght="100">Ultra Light</option> 2760 <option value="thin" data-wght="200">Thin</option> 2761 <option value="light" data-wght="300">Light</option> 2762 <option value="regular" data-wght="400">Regular</option> 2763 <option value="medium" data-wght="500">Medium</option> 2764 <option value="bold" data-wght="700">Bold</option> 2765 <option value="black" data-wght="900">Black</option> 2766 </select> 2767 </div> 2768 2769 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 2770 <!-- Thai Slider: Weight (100â900) --> 2771 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
2772 <div data-component="tt__control-area"> 2773 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 2774 <div class="flex flex-row justify-between"> 2775 <div class="">Width</div> 2776 <div data-component="tt__wdth-value"></div> 2777 </div> 2778 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 2779 </div> 2780 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 2781 <div class="flex flex-row justify-between"> 2782 <div class="">Weight</div> 2783 <div data-component="tt__wght-value"></div> 2784 </div> 2785 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="700" class="typetester-slider w-full" id="typetesterWghtRange"> 2786 </div> 2787 </div> 2788</form> 2789 2790 <!-- Main Content Area --> 2791 <div class="md:ml-[48px] flex w-full justify-center align-middle"> 2792 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="el" data-size="m"></div> 2793 </div> 2794</section> 2795 2796 2797 <!-- Typetester Sample --> 2798<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 2799 <!-- Partial Width Content Area With Section Nav --> 2800 <!-- Section Nav Area --> 2801<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="greek"> 2802 <!-- Select Script--> 2803 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 2804 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 2805 2806 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 2807 Latin 2808 </option> 2809 2810 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 2811 Cyrillic 2812 </option> 2813 2814 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el" selected="selected"> 2815 Greek 2816 </option> 2817 2818 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 2819 Vietnamese 2820 </option> 2821 2822 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 2823 Arabic 2824 </option> 2825 2826 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 2827 Devanagari 2828 </option> 2829 2830 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 2831 Hebrew 2832 </option> 2833 2834 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 2835 Korean 2836 </option> 2837 2838 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 2839 Thai 2840 </option> 2841 </select> 2842 </div> 2843 2844 <!-- Latin: Proportional / Mono Option --> 2845 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 2846 <div class="text-blue hover:text-red pt-1 w-[120px]"> 2847 <!-- I'm sure theres a better way of applying this attribute conditionally --> 2848 2849 <input type="radio" checked="" id="sample-9_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 2850 <label class="nav-radio-label hover:cursor-pointer" for="sample-9_prop-mono_proportional">Proportional</label> 2851</div> 2852 2853 <div class="text-blue hover:text-red pt-1 w-[120px]"> 2854 <!-- I'm sure theres a better way of applying this attribute conditionally --> 2855 2856 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 2857 <input type="radio" id="sample-9_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 2858 <label class="nav-radio-label hover:cursor-pointer" for="sample-9_prop-mono_mono">Monospaced</label> 2859</div> 2860 2861 </fieldset> 2862 2863 <!-- Latin: Upright / Italic Option --> 2864 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 2865 <div class="text-blue hover:text-red pt-1 w-[120px]"> 2866 <!-- I'm sure theres a better way of applying this attribute conditionally --> 2867 2868 <input type="radio" checked="" id="sample-9_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 2869 <label class="nav-radio-label hover:cursor-pointer" for="sample-9_upright-ital_upright">Upright</label> 2870</div> 2871 2872 <div class="text-blue hover:text-red pt-1 w-[120px]"> 2873 <!-- I'm sure theres a better way of applying this attribute conditionally --> 2874 2875 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 2876 <input type="radio" id="sample-9_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 2877 <label class="nav-radio-label hover:cursor-pointer" for="sample-9_upright-ital_italic">Italic</label> 2878</div> 2879 2880 </fieldset> 2881 2882 <!-- Latin: Default / Alternatives Option --> 2883 <!-- Currently Disabled, Too Many Options Syndrome --> 2884 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 2885 <include src="source/html-includes/radio-button.html"> 2886 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 2887 "default", "label": "Default", "checked": true, "namePrefix": "sample-9" } 2888 </include> 2889 <include src="source/html-includes/radio-button.html"> 2890 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 2891 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 2892 "sample-9" } 2893 </include> 2894 </fieldset> --> 2895 2896 <!-- Thai: Looped / Loopless Option --> 2897 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 2898 <div class="text-blue hover:text-red pt-1 w-[120px]"> 2899 <!-- I'm sure theres a better way of applying this attribute conditionally --> 2900 2901 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 2902 <input type="radio" id="sample-9_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 2903 <label class="nav-radio-label hover:cursor-pointer" for="sample-9_looped_looped">Looped</label> 2904</div> 2905 2906 <div class="text-blue hover:text-red pt-1 w-[120px]"> 2907 <!-- I'm sure theres a better way of applying this attribute conditionally --> 2908 2909 <input type="radio" checked="" id="sample-9_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 2910 <label class="nav-radio-label hover:cursor-pointer" for="sample-9_looped_loopless">Loopless</label> 2911</div> 2912 2913 </fieldset> 2914 2915 <!-- Latin Dropdown: Variable + all 84 styles --> 2916 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 2917 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 2918 <option value="variable" selected="selected">Variable</option> 2919 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 2920 Compressed Ultra Light 2921 </option> 2922 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 2923 Compressed Thin 2924 </option> 2925 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 2926 Compressed Light 2927 </option> 2928 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 2929 Compressed Regular 2930 </option> 2931 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 2932 Compressed Medium
2933 </option> 2934 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 2935 Compressed Bold 2936 </option> 2937 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 2938 Compressed Black 2939 </option> 2940 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 2941 Condensed Ultra Light 2942 </option> 2943 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 2944 Condensed Thin 2945 </option> 2946 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 2947 Condensed Light 2948 </option> 2949 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 2950 Condensed Regular 2951 </option> 2952 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 2953 Condensed Medium 2954 </option> 2955 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 2956 Condensed Bold 2957 </option> 2958 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 2959 Condensed Black 2960 </option> 2961 <option value="standard ultra light" data-wght="100" data-wdth="100"> 2962 Standard Ultra Light 2963 </option> 2964 <option value="standard thin" data-wght="200" data-wdth="100"> 2965 Standard Thin 2966 </option> 2967 <option value="standard light" data-wght="300" data-wdth="100"> 2968 Standard Light 2969 </option> 2970 <option value="standard regular" data-wght="400" data-wdth="100"> 2971 Standard Regular 2972 </option> 2973 <option value="standard medium" data-wght="500" data-wdth="100"> 2974 Standard Medium 2975 </option> 2976 <option value="standard bold" data-wght="700" data-wdth="100"> 2977 Standard Bold 2978 </option> 2979 <option value="standard black" data-wght="900" data-wdth="100"> 2980 Standard Black 2981 </option> 2982 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 2983 Extended Ultra Light 2984 </option> 2985 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 2986 Extended Thin 2987 </option> 2988 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 2989 Extended Light 2990 </option> 2991 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 2992 Extended Regular 2993 </option> 2994 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 2995 Extended Medium 2996 </option> 2997 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 2998 Extended Bold 2999 </option> 3000 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 3001 Extended Black 3002 </option> 3003 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 3004 Expanded Ultra Light 3005 </option> 3006 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 3007 Expanded Thin 3008 </option> 3009 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 3010 Expanded Light 3011 </option> 3012 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 3013 Expanded Regular 3014 </option> 3015 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 3016 Expanded Medium 3017 </option> 3018 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 3019 Expanded Bold 3020 </option> 3021 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 3022 Expanded Black 3023 </option> 3024 </select> 3025 </div> 3026 3027 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 3028 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 3029 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 3030 <option value="variable" selected="selected">Variable</option> 3031 <option value="looped ultra light" data-wght="100">Ultra Light</option> 3032 <option value="looped thin" data-wght="200">Thin</option> 3033 <option value="looped light" data-wght="300">Light</option> 3034 <option value="looped regular" data-wght="400">Regular</option> 3035 <option value="looped medium" data-wght="500">Medium</option> 3036 <option value="looped bold" data-wght="700">Bold</option> 3037 <option value="looped black" data-wght="900">Black</option> 3038 </select> 3039 </div> 3040 3041 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 3042 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 3043 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 3044 <option value="variable" selected="selected">Variable</option> 3045 <option value="ultra light" data-wght="100">Ultra Light</option> 3046 <option value="thin" data-wght="200">Thin</option> 3047 <option value="light" data-wght="300">Light</option> 3048 <option value="regular" data-wght="400">Regular</option> 3049 <option value="medium" data-wght="500">Medium</option> 3050 <option value="bold" data-wght="700">Bold</option> 3051 <option value="black" data-wght="900">Black</option> 3052 </select> 3053 </div> 3054 3055 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 3056 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 3057 <option value="variable" selected="selected">Variable</option> 3058 <option value="ultra light" data-wght="100">Ultra Light</option> 3059 <option value="thin" data-wght="200">Thin</option> 3060 <option value="light" data-wght="300">Light</option> 3061 <option value="regular" data-wght="400">Regular</option> 3062 <option value="medium" data-wght="500">Medium</option> 3063 <option value="bold" data-wght="700">Bold</option> 3064 <option value="black" data-wght="900">Black</option> 3065 </select> 3066 </div> 3067 3068 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 3069 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 3070 <option value="variable" selected="selected">Variable</option> 3071 <option value="ultra light" data-wght="100">Ultra Light</option> 3072 <option value="thin" data-wght="200">Thin</option> 3073 <option value="light" data-wght="300">Light</option> 3074 <option value="regular" data-wght="400">Regular</option> 3075 <option value="medium" data-wght="500">Medium</option> 3076 <option value="bold" data-wght="700">Bold</option> 3077 <option value="black" data-wght="900">Black</option> 3078 </select> 3079 </div> 3080 3081 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 3082 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 3083 <option value="variable" selected="selected">Variable</option> 3084 <option value="ultra light" data-wght="100">Ultra Light</option> 3085 <option value="thin" data-wght="200">Thin</option> 3086 <option value="light" data-wght="300">Light</option> 3087 <option value="regular" data-wght="400">Regular</option> 3088 <option value="medium" data-wght="500">Medium</option> 3089 <option value="bold" data-wght="700">Bold</option> 3090 <option value="black" data-wght="900">Black</option> 3091 </select> 3092 </div> 3093 3094 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 3095 <!-- Thai Slider: Weight (100â900) --> 3096 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
3097 <div data-component="tt__control-area"> 3098 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 3099 <div class="flex flex-row justify-between"> 3100 <div class="">Width</div> 3101 <div data-component="tt__wdth-value"></div> 3102 </div> 3103 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 3104 </div> 3105 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 3106 <div class="flex flex-row justify-between"> 3107 <div class="">Weight</div> 3108 <div data-component="tt__wght-value"></div> 3109 </div> 3110 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="400" class="typetester-slider w-full" id="typetesterWghtRange"> 3111 </div> 3112 </div> 3113</form> 3114 3115 <!-- Main Content Area --> 3116 <div class="md:ml-[48px] flex w-full justify-center align-middle"> 3117 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="el" data-size="s"></div> 3118 </div> 3119</section> 3120 3121 3122 <!-- Typetester Sample --> 3123<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 3124 <!-- Partial Width Content Area With Section Nav --> 3125 <!-- Section Nav Area --> 3126<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="vietnamese"> 3127 <!-- Select Script--> 3128 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 3129 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 3130 3131 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 3132 Latin 3133 </option> 3134 3135 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 3136 Cyrillic 3137 </option> 3138 3139 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 3140 Greek 3141 </option> 3142 3143 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi" selected="selected"> 3144 Vietnamese 3145 </option> 3146 3147 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 3148 Arabic 3149 </option> 3150 3151 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 3152 Devanagari 3153 </option> 3154 3155 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 3156 Hebrew 3157 </option> 3158 3159 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 3160 Korean 3161 </option> 3162 3163 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 3164 Thai 3165 </option> 3166 </select> 3167 </div> 3168 3169 <!-- Latin: Proportional / Mono Option --> 3170 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 3171 <div class="text-blue hover:text-red pt-1 w-[120px]"> 3172 <!-- I'm sure theres a better way of applying this attribute conditionally --> 3173 3174 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 3175 <input type="radio" id="sample-10_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 3176 <label class="nav-radio-label hover:cursor-pointer" for="sample-10_prop-mono_proportional">Proportional</label> 3177</div> 3178 3179 <div class="text-blue hover:text-red pt-1 w-[120px]"> 3180 <!-- I'm sure theres a better way of applying this attribute conditionally --> 3181 3182 <input type="radio" checked="" id="sample-10_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 3183 <label class="nav-radio-label hover:cursor-pointer" for="sample-10_prop-mono_mono">Monospaced</label> 3184</div> 3185 3186 </fieldset> 3187 3188 <!-- Latin: Upright / Italic Option --> 3189 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 3190 <div class="text-blue hover:text-red pt-1 w-[120px]"> 3191 <!-- I'm sure theres a better way of applying this attribute conditionally --> 3192 3193 <input type="radio" checked="" id="sample-10_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 3194 <label class="nav-radio-label hover:cursor-pointer" for="sample-10_upright-ital_upright">Upright</label> 3195</div> 3196 3197 <div class="text-blue hover:text-red pt-1 w-[120px]"> 3198 <!-- I'm sure theres a better way of applying this attribute conditionally --> 3199 3200 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 3201 <input type="radio" id="sample-10_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 3202 <label class="nav-radio-label hover:cursor-pointer" for="sample-10_upright-ital_italic">Italic</label> 3203</div> 3204 3205 </fieldset> 3206 3207 <!-- Latin: Default / Alternatives Option --> 3208 <!-- Currently Disabled, Too Many Options Syndrome --> 3209 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 3210 <include src="source/html-includes/radio-button.html"> 3211 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 3212 "default", "label": "Default", "checked": true, "namePrefix": "sample-10" } 3213 </include> 3214 <include src="source/html-includes/radio-button.html"> 3215 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 3216 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 3217 "sample-10" } 3218 </include> 3219 </fieldset> --> 3220 3221 <!-- Thai: Looped / Loopless Option --> 3222 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 3223 <div class="text-blue hover:text-red pt-1 w-[120px]"> 3224 <!-- I'm sure theres a better way of applying this attribute conditionally --> 3225 3226 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 3227 <input type="radio" id="sample-10_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 3228 <label class="nav-radio-label hover:cursor-pointer" for="sample-10_looped_looped">Looped</label> 3229</div> 3230 3231 <div class="text-blue hover:text-red pt-1 w-[120px]"> 3232 <!-- I'm sure theres a better way of applying this attribute conditionally --> 3233 3234 <input type="radio" checked="" id="sample-10_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 3235 <label class="nav-radio-label hover:cursor-pointer" for="sample-10_looped_loopless">Loopless</label> 3236</div> 3237 3238 </fieldset> 3239 3240 <!-- Latin Dropdown: Variable + all 84 styles --> 3241 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 3242 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 3243 <option value="variable" selected="selected">Variable</option> 3244 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 3245 Compressed Ultra Light 3246 </option> 3247 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 3248 Compressed Thin 3249 </option> 3250 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 3251 Compressed Light 3252 </option> 3253 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 3254 Compressed Regular 3255 </option> 3256 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 3257 Compressed Medium
3258 </option> 3259 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 3260 Compressed Bold 3261 </option> 3262 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 3263 Compressed Black 3264 </option> 3265 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 3266 Condensed Ultra Light 3267 </option> 3268 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 3269 Condensed Thin 3270 </option> 3271 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 3272 Condensed Light 3273 </option> 3274 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 3275 Condensed Regular 3276 </option> 3277 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 3278 Condensed Medium 3279 </option> 3280 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 3281 Condensed Bold 3282 </option> 3283 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 3284 Condensed Black 3285 </option> 3286 <option value="standard ultra light" data-wght="100" data-wdth="100"> 3287 Standard Ultra Light 3288 </option> 3289 <option value="standard thin" data-wght="200" data-wdth="100"> 3290 Standard Thin 3291 </option> 3292 <option value="standard light" data-wght="300" data-wdth="100"> 3293 Standard Light 3294 </option> 3295 <option value="standard regular" data-wght="400" data-wdth="100"> 3296 Standard Regular 3297 </option> 3298 <option value="standard medium" data-wght="500" data-wdth="100"> 3299 Standard Medium 3300 </option> 3301 <option value="standard bold" data-wght="700" data-wdth="100"> 3302 Standard Bold 3303 </option> 3304 <option value="standard black" data-wght="900" data-wdth="100"> 3305 Standard Black 3306 </option> 3307 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 3308 Extended Ultra Light 3309 </option> 3310 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 3311 Extended Thin 3312 </option> 3313 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 3314 Extended Light 3315 </option> 3316 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 3317 Extended Regular 3318 </option> 3319 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 3320 Extended Medium 3321 </option> 3322 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 3323 Extended Bold 3324 </option> 3325 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 3326 Extended Black 3327 </option> 3328 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 3329 Expanded Ultra Light 3330 </option> 3331 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 3332 Expanded Thin 3333 </option> 3334 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 3335 Expanded Light 3336 </option> 3337 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 3338 Expanded Regular 3339 </option> 3340 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 3341 Expanded Medium 3342 </option> 3343 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 3344 Expanded Bold 3345 </option> 3346 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 3347 Expanded Black 3348 </option> 3349 </select> 3350 </div> 3351 3352 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 3353 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 3354 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 3355 <option value="variable" selected="selected">Variable</option> 3356 <option value="looped ultra light" data-wght="100">Ultra Light</option> 3357 <option value="looped thin" data-wght="200">Thin</option> 3358 <option value="looped light" data-wght="300">Light</option> 3359 <option value="looped regular" data-wght="400">Regular</option> 3360 <option value="looped medium" data-wght="500">Medium</option> 3361 <option value="looped bold" data-wght="700">Bold</option> 3362 <option value="looped black" data-wght="900">Black</option> 3363 </select> 3364 </div> 3365 3366 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 3367 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 3368 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 3369 <option value="variable" selected="selected">Variable</option> 3370 <option value="ultra light" data-wght="100">Ultra Light</option> 3371 <option value="thin" data-wght="200">Thin</option> 3372 <option value="light" data-wght="300">Light</option> 3373 <option value="regular" data-wght="400">Regular</option> 3374 <option value="medium" data-wght="500">Medium</option> 3375 <option value="bold" data-wght="700">Bold</option> 3376 <option value="black" data-wght="900">Black</option> 3377 </select> 3378 </div> 3379 3380 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 3381 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 3382 <option value="variable" selected="selected">Variable</option> 3383 <option value="ultra light" data-wght="100">Ultra Light</option> 3384 <option value="thin" data-wght="200">Thin</option> 3385 <option value="light" data-wght="300">Light</option> 3386 <option value="regular" data-wght="400">Regular</option> 3387 <option value="medium" data-wght="500">Medium</option> 3388 <option value="bold" data-wght="700">Bold</option> 3389 <option value="black" data-wght="900">Black</option> 3390 </select> 3391 </div> 3392 3393 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 3394 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 3395 <option value="variable" selected="selected">Variable</option> 3396 <option value="ultra light" data-wght="100">Ultra Light</option> 3397 <option value="thin" data-wght="200">Thin</option> 3398 <option value="light" data-wght="300">Light</option> 3399 <option value="regular" data-wght="400">Regular</option> 3400 <option value="medium" data-wght="500">Medium</option> 3401 <option value="bold" data-wght="700">Bold</option> 3402 <option value="black" data-wght="900">Black</option> 3403 </select> 3404 </div> 3405 3406 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 3407 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 3408 <option value="variable" selected="selected">Variable</option> 3409 <option value="ultra light" data-wght="100">Ultra Light</option> 3410 <option value="thin" data-wght="200">Thin</option> 3411 <option value="light" data-wght="300">Light</option> 3412 <option value="regular" data-wght="400">Regular</option> 3413 <option value="medium" data-wght="500">Medium</option> 3414 <option value="bold" data-wght="700">Bold</option> 3415 <option value="black" data-wght="900">Black</option> 3416 </select> 3417 </div> 3418 3419 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 3420 <!-- Thai Slider: Weight (100â900) --> 3421 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
3422 <div data-component="tt__control-area"> 3423 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 3424 <div class="flex flex-row justify-between"> 3425 <div class="">Width</div> 3426 <div data-component="tt__wdth-value"></div> 3427 </div> 3428 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 3429 </div> 3430 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 3431 <div class="flex flex-row justify-between"> 3432 <div class="">Weight</div> 3433 <div data-component="tt__wght-value"></div> 3434 </div> 3435 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="900" class="typetester-slider w-full" id="typetesterWghtRange"> 3436 </div> 3437 </div> 3438</form> 3439 3440 <!-- Main Content Area --> 3441 <div class="md:ml-[48px] flex w-full justify-center align-middle"> 3442 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="vi" data-size="l"></div> 3443 </div> 3444</section> 3445 3446 3447 <!-- Typetester Sample --> 3448<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 3449 <!-- Partial Width Content Area With Section Nav --> 3450 <!-- Section Nav Area --> 3451<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="vietnamese"> 3452 <!-- Select Script--> 3453 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 3454 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 3455 3456 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 3457 Latin 3458 </option> 3459 3460 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 3461 Cyrillic 3462 </option> 3463 3464 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 3465 Greek 3466 </option> 3467 3468 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi" selected="selected"> 3469 Vietnamese 3470 </option> 3471 3472 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 3473 Arabic 3474 </option> 3475 3476 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 3477 Devanagari 3478 </option> 3479 3480 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 3481 Hebrew 3482 </option> 3483 3484 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 3485 Korean 3486 </option> 3487 3488 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 3489 Thai 3490 </option> 3491 </select> 3492 </div> 3493 3494 <!-- Latin: Proportional / Mono Option --> 3495 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 3496 <div class="text-blue hover:text-red pt-1 w-[120px]"> 3497 <!-- I'm sure theres a better way of applying this attribute conditionally --> 3498 3499 <input type="radio" checked="" id="sample-11_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 3500 <label class="nav-radio-label hover:cursor-pointer" for="sample-11_prop-mono_proportional">Proportional</label> 3501</div> 3502 3503 <div class="text-blue hover:text-red pt-1 w-[120px]"> 3504 <!-- I'm sure theres a better way of applying this attribute conditionally --> 3505 3506 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 3507 <input type="radio" id="sample-11_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 3508 <label class="nav-radio-label hover:cursor-pointer" for="sample-11_prop-mono_mono">Monospaced</label> 3509</div> 3510 3511 </fieldset> 3512 3513 <!-- Latin: Upright / Italic Option --> 3514 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 3515 <div class="text-blue hover:text-red pt-1 w-[120px]"> 3516 <!-- I'm sure theres a better way of applying this attribute conditionally --> 3517 3518 <input type="radio" checked="" id="sample-11_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 3519 <label class="nav-radio-label hover:cursor-pointer" for="sample-11_upright-ital_upright">Upright</label> 3520</div> 3521 3522 <div class="text-blue hover:text-red pt-1 w-[120px]"> 3523 <!-- I'm sure theres a better way of applying this attribute conditionally --> 3524 3525 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 3526 <input type="radio" id="sample-11_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 3527 <label class="nav-radio-label hover:cursor-pointer" for="sample-11_upright-ital_italic">Italic</label> 3528</div> 3529 3530 </fieldset> 3531 3532 <!-- Latin: Default / Alternatives Option --> 3533 <!-- Currently Disabled, Too Many Options Syndrome --> 3534 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 3535 <include src="source/html-includes/radio-button.html"> 3536 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 3537 "default", "label": "Default", "checked": true, "namePrefix": "sample-11" } 3538 </include> 3539 <include src="source/html-includes/radio-button.html"> 3540 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 3541 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 3542 "sample-11" } 3543 </include> 3544 </fieldset> --> 3545 3546 <!-- Thai: Looped / Loopless Option --> 3547 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 3548 <div class="text-blue hover:text-red pt-1 w-[120px]"> 3549 <!-- I'm sure theres a better way of applying this attribute conditionally --> 3550 3551 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 3552 <input type="radio" id="sample-11_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 3553 <label class="nav-radio-label hover:cursor-pointer" for="sample-11_looped_looped">Looped</label> 3554</div> 3555 3556 <div class="text-blue hover:text-red pt-1 w-[120px]"> 3557 <!-- I'm sure theres a better way of applying this attribute conditionally --> 3558 3559 <input type="radio" checked="" id="sample-11_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 3560 <label class="nav-radio-label hover:cursor-pointer" for="sample-11_looped_loopless">Loopless</label> 3561</div> 3562 3563 </fieldset> 3564 3565 <!-- Latin Dropdown: Variable + all 84 styles --> 3566 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 3567 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 3568 <option value="variable" selected="selected">Variable</option> 3569 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 3570 Compressed Ultra Light 3571 </option> 3572 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 3573 Compressed Thin 3574 </option> 3575 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 3576 Compressed Light 3577 </option> 3578 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 3579 Compressed Regular 3580 </option> 3581 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 3582 Compressed Medium
3583 </option> 3584 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 3585 Compressed Bold 3586 </option> 3587 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 3588 Compressed Black 3589 </option> 3590 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 3591 Condensed Ultra Light 3592 </option> 3593 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 3594 Condensed Thin 3595 </option> 3596 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 3597 Condensed Light 3598 </option> 3599 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 3600 Condensed Regular 3601 </option> 3602 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 3603 Condensed Medium 3604 </option> 3605 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 3606 Condensed Bold 3607 </option> 3608 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 3609 Condensed Black 3610 </option> 3611 <option value="standard ultra light" data-wght="100" data-wdth="100"> 3612 Standard Ultra Light 3613 </option> 3614 <option value="standard thin" data-wght="200" data-wdth="100"> 3615 Standard Thin 3616 </option> 3617 <option value="standard light" data-wght="300" data-wdth="100"> 3618 Standard Light 3619 </option> 3620 <option value="standard regular" data-wght="400" data-wdth="100"> 3621 Standard Regular 3622 </option> 3623 <option value="standard medium" data-wght="500" data-wdth="100"> 3624 Standard Medium 3625 </option> 3626 <option value="standard bold" data-wght="700" data-wdth="100"> 3627 Standard Bold 3628 </option> 3629 <option value="standard black" data-wght="900" data-wdth="100"> 3630 Standard Black 3631 </option> 3632 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 3633 Extended Ultra Light 3634 </option> 3635 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 3636 Extended Thin 3637 </option> 3638 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 3639 Extended Light 3640 </option> 3641 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 3642 Extended Regular 3643 </option> 3644 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 3645 Extended Medium 3646 </option> 3647 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 3648 Extended Bold 3649 </option> 3650 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 3651 Extended Black 3652 </option> 3653 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 3654 Expanded Ultra Light 3655 </option> 3656 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 3657 Expanded Thin 3658 </option> 3659 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 3660 Expanded Light 3661 </option> 3662 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 3663 Expanded Regular 3664 </option> 3665 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 3666 Expanded Medium 3667 </option> 3668 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 3669 Expanded Bold 3670 </option> 3671 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 3672 Expanded Black 3673 </option> 3674 </select> 3675 </div> 3676 3677 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 3678 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 3679 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 3680 <option value="variable" selected="selected">Variable</option> 3681 <option value="looped ultra light" data-wght="100">Ultra Light</option> 3682 <option value="looped thin" data-wght="200">Thin</option> 3683 <option value="looped light" data-wght="300">Light</option> 3684 <option value="looped regular" data-wght="400">Regular</option> 3685 <option value="looped medium" data-wght="500">Medium</option> 3686 <option value="looped bold" data-wght="700">Bold</option> 3687 <option value="looped black" data-wght="900">Black</option> 3688 </select> 3689 </div> 3690 3691 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 3692 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 3693 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 3694 <option value="variable" selected="selected">Variable</option> 3695 <option value="ultra light" data-wght="100">Ultra Light</option> 3696 <option value="thin" data-wght="200">Thin</option> 3697 <option value="light" data-wght="300">Light</option> 3698 <option value="regular" data-wght="400">Regular</option> 3699 <option value="medium" data-wght="500">Medium</option> 3700 <option value="bold" data-wght="700">Bold</option> 3701 <option value="black" data-wght="900">Black</option> 3702 </select> 3703 </div> 3704 3705 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 3706 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 3707 <option value="variable" selected="selected">Variable</option> 3708 <option value="ultra light" data-wght="100">Ultra Light</option> 3709 <option value="thin" data-wght="200">Thin</option> 3710 <option value="light" data-wght="300">Light</option> 3711 <option value="regular" data-wght="400">Regular</option> 3712 <option value="medium" data-wght="500">Medium</option> 3713 <option value="bold" data-wght="700">Bold</option> 3714 <option value="black" data-wght="900">Black</option> 3715 </select> 3716 </div> 3717 3718 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 3719 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 3720 <option value="variable" selected="selected">Variable</option> 3721 <option value="ultra light" data-wght="100">Ultra Light</option> 3722 <option value="thin" data-wght="200">Thin</option> 3723 <option value="light" data-wght="300">Light</option> 3724 <option value="regular" data-wght="400">Regular</option> 3725 <option value="medium" data-wght="500">Medium</option> 3726 <option value="bold" data-wght="700">Bold</option> 3727 <option value="black" data-wght="900">Black</option> 3728 </select> 3729 </div> 3730 3731 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 3732 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 3733 <option value="variable" selected="selected">Variable</option> 3734 <option value="ultra light" data-wght="100">Ultra Light</option> 3735 <option value="thin" data-wght="200">Thin</option> 3736 <option value="light" data-wght="300">Light</option> 3737 <option value="regular" data-wght="400">Regular</option> 3738 <option value="medium" data-wght="500">Medium</option> 3739 <option value="bold" data-wght="700">Bold</option> 3740 <option value="black" data-wght="900">Black</option> 3741 </select> 3742 </div> 3743 3744 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 3745 <!-- Thai Slider: Weight (100â900) --> 3746 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
3747 <div data-component="tt__control-area"> 3748 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 3749 <div class="flex flex-row justify-between"> 3750 <div class="">Width</div> 3751 <div data-component="tt__wdth-value"></div> 3752 </div> 3753 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 3754 </div> 3755 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 3756 <div class="flex flex-row justify-between"> 3757 <div class="">Weight</div> 3758 <div data-component="tt__wght-value"></div> 3759 </div> 3760 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="300" class="typetester-slider w-full" id="typetesterWghtRange"> 3761 </div> 3762 </div> 3763</form> 3764 3765 <!-- Main Content Area --> 3766 <div class="md:ml-[48px] flex w-full justify-center align-middle"> 3767 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="vi" data-size="m"></div> 3768 </div> 3769</section> 3770 3771 3772 <!-- Typetester Sample --> 3773<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 3774 <!-- Partial Width Content Area With Section Nav --> 3775 <!-- Section Nav Area --> 3776<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="vietnamese"> 3777 <!-- Select Script--> 3778 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 3779 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 3780 3781 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 3782 Latin 3783 </option> 3784 3785 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 3786 Cyrillic 3787 </option> 3788 3789 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 3790 Greek 3791 </option> 3792 3793 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi" selected="selected"> 3794 Vietnamese 3795 </option> 3796 3797 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 3798 Arabic 3799 </option> 3800 3801 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 3802 Devanagari 3803 </option> 3804 3805 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 3806 Hebrew 3807 </option> 3808 3809 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 3810 Korean 3811 </option> 3812 3813 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 3814 Thai 3815 </option> 3816 </select> 3817 </div> 3818 3819 <!-- Latin: Proportional / Mono Option --> 3820 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 3821 <div class="text-blue hover:text-red pt-1 w-[120px]"> 3822 <!-- I'm sure theres a better way of applying this attribute conditionally --> 3823 3824 <input type="radio" checked="" id="sample-12_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 3825 <label class="nav-radio-label hover:cursor-pointer" for="sample-12_prop-mono_proportional">Proportional</label> 3826</div> 3827 3828 <div class="text-blue hover:text-red pt-1 w-[120px]"> 3829 <!-- I'm sure theres a better way of applying this attribute conditionally --> 3830 3831 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 3832 <input type="radio" id="sample-12_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 3833 <label class="nav-radio-label hover:cursor-pointer" for="sample-12_prop-mono_mono">Monospaced</label> 3834</div> 3835 3836 </fieldset> 3837 3838 <!-- Latin: Upright / Italic Option --> 3839 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 3840 <div class="text-blue hover:text-red pt-1 w-[120px]"> 3841 <!-- I'm sure theres a better way of applying this attribute conditionally --> 3842 3843 <input type="radio" checked="" id="sample-12_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 3844 <label class="nav-radio-label hover:cursor-pointer" for="sample-12_upright-ital_upright">Upright</label> 3845</div> 3846 3847 <div class="text-blue hover:text-red pt-1 w-[120px]"> 3848 <!-- I'm sure theres a better way of applying this attribute conditionally --> 3849 3850 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 3851 <input type="radio" id="sample-12_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 3852 <label class="nav-radio-label hover:cursor-pointer" for="sample-12_upright-ital_italic">Italic</label> 3853</div> 3854 3855 </fieldset> 3856 3857 <!-- Latin: Default / Alternatives Option --> 3858 <!-- Currently Disabled, Too Many Options Syndrome --> 3859 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 3860 <include src="source/html-includes/radio-button.html"> 3861 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 3862 "default", "label": "Default", "checked": true, "namePrefix": "sample-12" } 3863 </include> 3864 <include src="source/html-includes/radio-button.html"> 3865 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 3866 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 3867 "sample-12" } 3868 </include> 3869 </fieldset> --> 3870 3871 <!-- Thai: Looped / Loopless Option --> 3872 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 3873 <div class="text-blue hover:text-red pt-1 w-[120px]"> 3874 <!-- I'm sure theres a better way of applying this attribute conditionally --> 3875 3876 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 3877 <input type="radio" id="sample-12_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 3878 <label class="nav-radio-label hover:cursor-pointer" for="sample-12_looped_looped">Looped</label> 3879</div> 3880 3881 <div class="text-blue hover:text-red pt-1 w-[120px]"> 3882 <!-- I'm sure theres a better way of applying this attribute conditionally --> 3883 3884 <input type="radio" checked="" id="sample-12_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 3885 <label class="nav-radio-label hover:cursor-pointer" for="sample-12_looped_loopless">Loopless</label> 3886</div> 3887 3888 </fieldset> 3889 3890 <!-- Latin Dropdown: Variable + all 84 styles --> 3891 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 3892 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 3893 <option value="variable" selected="selected">Variable</option> 3894 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 3895 Compressed Ultra Light 3896 </option> 3897 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 3898 Compressed Thin 3899 </option> 3900 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 3901 Compressed Light 3902 </option> 3903 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 3904 Compressed Regular 3905 </option> 3906 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 3907 Compressed Medium
3908 </option> 3909 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 3910 Compressed Bold 3911 </option> 3912 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 3913 Compressed Black 3914 </option> 3915 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 3916 Condensed Ultra Light 3917 </option> 3918 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 3919 Condensed Thin 3920 </option> 3921 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 3922 Condensed Light 3923 </option> 3924 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 3925 Condensed Regular 3926 </option> 3927 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 3928 Condensed Medium 3929 </option> 3930 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 3931 Condensed Bold 3932 </option> 3933 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 3934 Condensed Black 3935 </option> 3936 <option value="standard ultra light" data-wght="100" data-wdth="100"> 3937 Standard Ultra Light 3938 </option> 3939 <option value="standard thin" data-wght="200" data-wdth="100"> 3940 Standard Thin 3941 </option> 3942 <option value="standard light" data-wght="300" data-wdth="100"> 3943 Standard Light 3944 </option> 3945 <option value="standard regular" data-wght="400" data-wdth="100"> 3946 Standard Regular 3947 </option> 3948 <option value="standard medium" data-wght="500" data-wdth="100"> 3949 Standard Medium 3950 </option> 3951 <option value="standard bold" data-wght="700" data-wdth="100"> 3952 Standard Bold 3953 </option> 3954 <option value="standard black" data-wght="900" data-wdth="100"> 3955 Standard Black 3956 </option> 3957 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 3958 Extended Ultra Light 3959 </option> 3960 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 3961 Extended Thin 3962 </option> 3963 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 3964 Extended Light 3965 </option> 3966 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 3967 Extended Regular 3968 </option> 3969 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 3970 Extended Medium 3971 </option> 3972 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 3973 Extended Bold 3974 </option> 3975 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 3976 Extended Black 3977 </option> 3978 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 3979 Expanded Ultra Light 3980 </option> 3981 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 3982 Expanded Thin 3983 </option> 3984 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 3985 Expanded Light 3986 </option> 3987 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 3988 Expanded Regular 3989 </option> 3990 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 3991 Expanded Medium 3992 </option> 3993 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 3994 Expanded Bold 3995 </option> 3996 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 3997 Expanded Black 3998 </option> 3999 </select> 4000 </div> 4001 4002 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 4003 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 4004 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 4005 <option value="variable" selected="selected">Variable</option> 4006 <option value="looped ultra light" data-wght="100">Ultra Light</option> 4007 <option value="looped thin" data-wght="200">Thin</option> 4008 <option value="looped light" data-wght="300">Light</option> 4009 <option value="looped regular" data-wght="400">Regular</option> 4010 <option value="looped medium" data-wght="500">Medium</option> 4011 <option value="looped bold" data-wght="700">Bold</option> 4012 <option value="looped black" data-wght="900">Black</option> 4013 </select> 4014 </div> 4015 4016 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 4017 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 4018 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 4019 <option value="variable" selected="selected">Variable</option> 4020 <option value="ultra light" data-wght="100">Ultra Light</option> 4021 <option value="thin" data-wght="200">Thin</option> 4022 <option value="light" data-wght="300">Light</option> 4023 <option value="regular" data-wght="400">Regular</option> 4024 <option value="medium" data-wght="500">Medium</option> 4025 <option value="bold" data-wght="700">Bold</option> 4026 <option value="black" data-wght="900">Black</option> 4027 </select> 4028 </div> 4029 4030 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 4031 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 4032 <option value="variable" selected="selected">Variable</option> 4033 <option value="ultra light" data-wght="100">Ultra Light</option> 4034 <option value="thin" data-wght="200">Thin</option> 4035 <option value="light" data-wght="300">Light</option> 4036 <option value="regular" data-wght="400">Regular</option> 4037 <option value="medium" data-wght="500">Medium</option> 4038 <option value="bold" data-wght="700">Bold</option> 4039 <option value="black" data-wght="900">Black</option> 4040 </select> 4041 </div> 4042 4043 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 4044 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 4045 <option value="variable" selected="selected">Variable</option> 4046 <option value="ultra light" data-wght="100">Ultra Light</option> 4047 <option value="thin" data-wght="200">Thin</option> 4048 <option value="light" data-wght="300">Light</option> 4049 <option value="regular" data-wght="400">Regular</option> 4050 <option value="medium" data-wght="500">Medium</option> 4051 <option value="bold" data-wght="700">Bold</option> 4052 <option value="black" data-wght="900">Black</option> 4053 </select> 4054 </div> 4055 4056 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 4057 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 4058 <option value="variable" selected="selected">Variable</option> 4059 <option value="ultra light" data-wght="100">Ultra Light</option> 4060 <option value="thin" data-wght="200">Thin</option> 4061 <option value="light" data-wght="300">Light</option> 4062 <option value="regular" data-wght="400">Regular</option> 4063 <option value="medium" data-wght="500">Medium</option> 4064 <option value="bold" data-wght="700">Bold</option> 4065 <option value="black" data-wght="900">Black</option> 4066 </select> 4067 </div> 4068 4069 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 4070 <!-- Thai Slider: Weight (100â900) --> 4071 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
4072 <div data-component="tt__control-area"> 4073 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 4074 <div class="flex flex-row justify-between"> 4075 <div class="">Width</div> 4076 <div data-component="tt__wdth-value"></div> 4077 </div> 4078 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 4079 </div> 4080 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 4081 <div class="flex flex-row justify-between"> 4082 <div class="">Weight</div> 4083 <div data-component="tt__wght-value"></div> 4084 </div> 4085 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="400" class="typetester-slider w-full" id="typetesterWghtRange"> 4086 </div> 4087 </div> 4088</form> 4089 4090 <!-- Main Content Area --> 4091 <div class="md:ml-[48px] flex w-full justify-center align-middle"> 4092 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="vi" data-size="s"></div> 4093 </div> 4094</section> 4095 4096 4097 <!-- Typetester Sample --> 4098<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 4099 <!-- Partial Width Content Area With Section Nav --> 4100 <!-- Section Nav Area --> 4101<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="arabic"> 4102 <!-- Select Script--> 4103 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 4104 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 4105 4106 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 4107 Latin 4108 </option> 4109 4110 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 4111 Cyrillic 4112 </option> 4113 4114 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 4115 Greek 4116 </option> 4117 4118 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 4119 Vietnamese 4120 </option> 4121 4122 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar" selected="selected"> 4123 Arabic 4124 </option> 4125 4126 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 4127 Devanagari 4128 </option> 4129 4130 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 4131 Hebrew 4132 </option> 4133 4134 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 4135 Korean 4136 </option> 4137 4138 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 4139 Thai 4140 </option> 4141 </select> 4142 </div> 4143 4144 <!-- Latin: Proportional / Mono Option --> 4145 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 4146 <div class="text-blue hover:text-red pt-1 w-[120px]"> 4147 <!-- I'm sure theres a better way of applying this attribute conditionally --> 4148 4149 <input type="radio" checked="" id="sample-13_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 4150 <label class="nav-radio-label hover:cursor-pointer" for="sample-13_prop-mono_proportional">Proportional</label> 4151</div> 4152 4153 <div class="text-blue hover:text-red pt-1 w-[120px]"> 4154 <!-- I'm sure theres a better way of applying this attribute conditionally --> 4155 4156 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 4157 <input type="radio" id="sample-13_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 4158 <label class="nav-radio-label hover:cursor-pointer" for="sample-13_prop-mono_mono">Monospaced</label> 4159</div> 4160 4161 </fieldset> 4162 4163 <!-- Latin: Upright / Italic Option --> 4164 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 4165 <div class="text-blue hover:text-red pt-1 w-[120px]"> 4166 <!-- I'm sure theres a better way of applying this attribute conditionally --> 4167 4168 <input type="radio" checked="" id="sample-13_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 4169 <label class="nav-radio-label hover:cursor-pointer" for="sample-13_upright-ital_upright">Upright</label> 4170</div> 4171 4172 <div class="text-blue hover:text-red pt-1 w-[120px]"> 4173 <!-- I'm sure theres a better way of applying this attribute conditionally --> 4174 4175 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 4176 <input type="radio" id="sample-13_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 4177 <label class="nav-radio-label hover:cursor-pointer" for="sample-13_upright-ital_italic">Italic</label> 4178</div> 4179 4180 </fieldset> 4181 4182 <!-- Latin: Default / Alternatives Option --> 4183 <!-- Currently Disabled, Too Many Options Syndrome --> 4184 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 4185 <include src="source/html-includes/radio-button.html"> 4186 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 4187 "default", "label": "Default", "checked": true, "namePrefix": "sample-13" } 4188 </include> 4189 <include src="source/html-includes/radio-button.html"> 4190 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 4191 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 4192 "sample-13" } 4193 </include> 4194 </fieldset> --> 4195 4196 <!-- Thai: Looped / Loopless Option --> 4197 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 4198 <div class="text-blue hover:text-red pt-1 w-[120px]"> 4199 <!-- I'm sure theres a better way of applying this attribute conditionally --> 4200 4201 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 4202 <input type="radio" id="sample-13_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 4203 <label class="nav-radio-label hover:cursor-pointer" for="sample-13_looped_looped">Looped</label> 4204</div> 4205 4206 <div class="text-blue hover:text-red pt-1 w-[120px]"> 4207 <!-- I'm sure theres a better way of applying this attribute conditionally --> 4208 4209 <input type="radio" checked="" id="sample-13_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 4210 <label class="nav-radio-label hover:cursor-pointer" for="sample-13_looped_loopless">Loopless</label> 4211</div> 4212 4213 </fieldset> 4214 4215 <!-- Latin Dropdown: Variable + all 84 styles --> 4216 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 4217 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 4218 <option value="variable" selected="selected">Variable</option> 4219 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 4220 Compressed Ultra Light 4221 </option> 4222 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 4223 Compressed Thin 4224 </option> 4225 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 4226 Compressed Light 4227 </option> 4228 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 4229 Compressed Regular 4230 </option> 4231 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 4232 Compressed Medium
4233 </option> 4234 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 4235 Compressed Bold 4236 </option> 4237 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 4238 Compressed Black 4239 </option> 4240 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 4241 Condensed Ultra Light 4242 </option> 4243 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 4244 Condensed Thin 4245 </option> 4246 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 4247 Condensed Light 4248 </option> 4249 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 4250 Condensed Regular 4251 </option> 4252 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 4253 Condensed Medium 4254 </option> 4255 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 4256 Condensed Bold 4257 </option> 4258 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 4259 Condensed Black 4260 </option> 4261 <option value="standard ultra light" data-wght="100" data-wdth="100"> 4262 Standard Ultra Light 4263 </option> 4264 <option value="standard thin" data-wght="200" data-wdth="100"> 4265 Standard Thin 4266 </option> 4267 <option value="standard light" data-wght="300" data-wdth="100"> 4268 Standard Light 4269 </option> 4270 <option value="standard regular" data-wght="400" data-wdth="100"> 4271 Standard Regular 4272 </option> 4273 <option value="standard medium" data-wght="500" data-wdth="100"> 4274 Standard Medium 4275 </option> 4276 <option value="standard bold" data-wght="700" data-wdth="100"> 4277 Standard Bold 4278 </option> 4279 <option value="standard black" data-wght="900" data-wdth="100"> 4280 Standard Black 4281 </option> 4282 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 4283 Extended Ultra Light 4284 </option> 4285 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 4286 Extended Thin 4287 </option> 4288 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 4289 Extended Light 4290 </option> 4291 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 4292 Extended Regular 4293 </option> 4294 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 4295 Extended Medium 4296 </option> 4297 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 4298 Extended Bold 4299 </option> 4300 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 4301 Extended Black 4302 </option> 4303 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 4304 Expanded Ultra Light 4305 </option> 4306 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 4307 Expanded Thin 4308 </option> 4309 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 4310 Expanded Light 4311 </option> 4312 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 4313 Expanded Regular 4314 </option> 4315 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 4316 Expanded Medium 4317 </option> 4318 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 4319 Expanded Bold 4320 </option> 4321 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 4322 Expanded Black 4323 </option> 4324 </select> 4325 </div> 4326 4327 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 4328 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 4329 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 4330 <option value="variable" selected="selected">Variable</option> 4331 <option value="looped ultra light" data-wght="100">Ultra Light</option> 4332 <option value="looped thin" data-wght="200">Thin</option> 4333 <option value="looped light" data-wght="300">Light</option> 4334 <option value="looped regular" data-wght="400">Regular</option> 4335 <option value="looped medium" data-wght="500">Medium</option> 4336 <option value="looped bold" data-wght="700">Bold</option> 4337 <option value="looped black" data-wght="900">Black</option> 4338 </select> 4339 </div> 4340 4341 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 4342 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 4343 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 4344 <option value="variable" selected="selected">Variable</option> 4345 <option value="ultra light" data-wght="100">Ultra Light</option> 4346 <option value="thin" data-wght="200">Thin</option> 4347 <option value="light" data-wght="300">Light</option> 4348 <option value="regular" data-wght="400">Regular</option> 4349 <option value="medium" data-wght="500">Medium</option> 4350 <option value="bold" data-wght="700">Bold</option> 4351 <option value="black" data-wght="900">Black</option> 4352 </select> 4353 </div> 4354 4355 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 4356 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 4357 <option value="variable" selected="selected">Variable</option> 4358 <option value="ultra light" data-wght="100">Ultra Light</option> 4359 <option value="thin" data-wght="200">Thin</option> 4360 <option value="light" data-wght="300">Light</option> 4361 <option value="regular" data-wght="400">Regular</option> 4362 <option value="medium" data-wght="500">Medium</option> 4363 <option value="bold" data-wght="700">Bold</option> 4364 <option value="black" data-wght="900">Black</option> 4365 </select> 4366 </div> 4367 4368 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 4369 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 4370 <option value="variable" selected="selected">Variable</option> 4371 <option value="ultra light" data-wght="100">Ultra Light</option> 4372 <option value="thin" data-wght="200">Thin</option> 4373 <option value="light" data-wght="300">Light</option> 4374 <option value="regular" data-wght="400">Regular</option> 4375 <option value="medium" data-wght="500">Medium</option> 4376 <option value="bold" data-wght="700">Bold</option> 4377 <option value="black" data-wght="900">Black</option> 4378 </select> 4379 </div> 4380 4381 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 4382 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 4383 <option value="variable" selected="selected">Variable</option> 4384 <option value="ultra light" data-wght="100">Ultra Light</option> 4385 <option value="thin" data-wght="200">Thin</option> 4386 <option value="light" data-wght="300">Light</option> 4387 <option value="regular" data-wght="400">Regular</option> 4388 <option value="medium" data-wght="500">Medium</option> 4389 <option value="bold" data-wght="700">Bold</option> 4390 <option value="black" data-wght="900">Black</option> 4391 </select> 4392 </div> 4393 4394 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 4395 <!-- Thai Slider: Weight (100â900) --> 4396 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
4397 <div data-component="tt__control-area"> 4398 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 4399 <div class="flex flex-row justify-between"> 4400 <div class="">Width</div> 4401 <div data-component="tt__wdth-value"></div> 4402 </div> 4403 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 4404 </div> 4405 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 4406 <div class="flex flex-row justify-between"> 4407 <div class="">Weight</div> 4408 <div data-component="tt__wght-value"></div> 4409 </div> 4410 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="700" class="typetester-slider w-full" id="typetesterWghtRange"> 4411 </div> 4412 </div> 4413</form> 4414 4415 <!-- Main Content Area --> 4416 <div class="md:ml-[48px] flex w-full justify-center align-middle overflow-x-clip"> 4417 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="ar" data-size="l" dir="rtl"></div> 4418 </div> 4419</section> 4420 4421 4422 <!-- Typetester Sample --> 4423<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 4424 <!-- Partial Width Content Area With Section Nav --> 4425 <!-- Section Nav Area --> 4426<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="arabic"> 4427 <!-- Select Script--> 4428 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 4429 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 4430 4431 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 4432 Latin 4433 </option> 4434 4435 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 4436 Cyrillic 4437 </option> 4438 4439 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 4440 Greek 4441 </option> 4442 4443 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 4444 Vietnamese 4445 </option> 4446 4447 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar" selected="selected"> 4448 Arabic 4449 </option> 4450 4451 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 4452 Devanagari 4453 </option> 4454 4455 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 4456 Hebrew 4457 </option> 4458 4459 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 4460 Korean 4461 </option> 4462 4463 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 4464 Thai 4465 </option> 4466 </select> 4467 </div> 4468 4469 <!-- Latin: Proportional / Mono Option --> 4470 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 4471 <div class="text-blue hover:text-red pt-1 w-[120px]"> 4472 <!-- I'm sure theres a better way of applying this attribute conditionally --> 4473 4474 <input type="radio" checked="" id="sample-14_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 4475 <label class="nav-radio-label hover:cursor-pointer" for="sample-14_prop-mono_proportional">Proportional</label> 4476</div> 4477 4478 <div class="text-blue hover:text-red pt-1 w-[120px]"> 4479 <!-- I'm sure theres a better way of applying this attribute conditionally --> 4480 4481 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 4482 <input type="radio" id="sample-14_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 4483 <label class="nav-radio-label hover:cursor-pointer" for="sample-14_prop-mono_mono">Monospaced</label> 4484</div> 4485 4486 </fieldset> 4487 4488 <!-- Latin: Upright / Italic Option --> 4489 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 4490 <div class="text-blue hover:text-red pt-1 w-[120px]"> 4491 <!-- I'm sure theres a better way of applying this attribute conditionally --> 4492 4493 <input type="radio" checked="" id="sample-14_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 4494 <label class="nav-radio-label hover:cursor-pointer" for="sample-14_upright-ital_upright">Upright</label> 4495</div> 4496 4497 <div class="text-blue hover:text-red pt-1 w-[120px]"> 4498 <!-- I'm sure theres a better way of applying this attribute conditionally --> 4499 4500 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 4501 <input type="radio" id="sample-14_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 4502 <label class="nav-radio-label hover:cursor-pointer" for="sample-14_upright-ital_italic">Italic</label> 4503</div> 4504 4505 </fieldset> 4506 4507 <!-- Latin: Default / Alternatives Option --> 4508 <!-- Currently Disabled, Too Many Options Syndrome --> 4509 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 4510 <include src="source/html-includes/radio-button.html"> 4511 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 4512 "default", "label": "Default", "checked": true, "namePrefix": "sample-14" } 4513 </include> 4514 <include src="source/html-includes/radio-button.html"> 4515 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 4516 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 4517 "sample-14" } 4518 </include> 4519 </fieldset> --> 4520 4521 <!-- Thai: Looped / Loopless Option --> 4522 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 4523 <div class="text-blue hover:text-red pt-1 w-[120px]"> 4524 <!-- I'm sure theres a better way of applying this attribute conditionally --> 4525 4526 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 4527 <input type="radio" id="sample-14_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 4528 <label class="nav-radio-label hover:cursor-pointer" for="sample-14_looped_looped">Looped</label> 4529</div> 4530 4531 <div class="text-blue hover:text-red pt-1 w-[120px]"> 4532 <!-- I'm sure theres a better way of applying this attribute conditionally --> 4533 4534 <input type="radio" checked="" id="sample-14_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 4535 <label class="nav-radio-label hover:cursor-pointer" for="sample-14_looped_loopless">Loopless</label> 4536</div> 4537 4538 </fieldset> 4539 4540 <!-- Latin Dropdown: Variable + all 84 styles --> 4541 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 4542 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 4543 <option value="variable" selected="selected">Variable</option> 4544 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 4545 Compressed Ultra Light 4546 </option> 4547 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 4548 Compressed Thin 4549 </option> 4550 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 4551 Compressed Light 4552 </option> 4553 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 4554 Compressed Regular 4555 </option> 4556 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 4557 Compressed Medium
4558 </option> 4559 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 4560 Compressed Bold 4561 </option> 4562 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 4563 Compressed Black 4564 </option> 4565 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 4566 Condensed Ultra Light 4567 </option> 4568 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 4569 Condensed Thin 4570 </option> 4571 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 4572 Condensed Light 4573 </option> 4574 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 4575 Condensed Regular 4576 </option> 4577 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 4578 Condensed Medium 4579 </option> 4580 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 4581 Condensed Bold 4582 </option> 4583 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 4584 Condensed Black 4585 </option> 4586 <option value="standard ultra light" data-wght="100" data-wdth="100"> 4587 Standard Ultra Light 4588 </option> 4589 <option value="standard thin" data-wght="200" data-wdth="100"> 4590 Standard Thin 4591 </option> 4592 <option value="standard light" data-wght="300" data-wdth="100"> 4593 Standard Light 4594 </option> 4595 <option value="standard regular" data-wght="400" data-wdth="100"> 4596 Standard Regular 4597 </option> 4598 <option value="standard medium" data-wght="500" data-wdth="100"> 4599 Standard Medium 4600 </option> 4601 <option value="standard bold" data-wght="700" data-wdth="100"> 4602 Standard Bold 4603 </option> 4604 <option value="standard black" data-wght="900" data-wdth="100"> 4605 Standard Black 4606 </option> 4607 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 4608 Extended Ultra Light 4609 </option> 4610 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 4611 Extended Thin 4612 </option> 4613 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 4614 Extended Light 4615 </option> 4616 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 4617 Extended Regular 4618 </option> 4619 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 4620 Extended Medium 4621 </option> 4622 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 4623 Extended Bold 4624 </option> 4625 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 4626 Extended Black 4627 </option> 4628 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 4629 Expanded Ultra Light 4630 </option> 4631 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 4632 Expanded Thin 4633 </option> 4634 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 4635 Expanded Light 4636 </option> 4637 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 4638 Expanded Regular 4639 </option> 4640 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 4641 Expanded Medium 4642 </option> 4643 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 4644 Expanded Bold 4645 </option> 4646 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 4647 Expanded Black 4648 </option> 4649 </select> 4650 </div> 4651 4652 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 4653 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 4654 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 4655 <option value="variable" selected="selected">Variable</option> 4656 <option value="looped ultra light" data-wght="100">Ultra Light</option> 4657 <option value="looped thin" data-wght="200">Thin</option> 4658 <option value="looped light" data-wght="300">Light</option> 4659 <option value="looped regular" data-wght="400">Regular</option> 4660 <option value="looped medium" data-wght="500">Medium</option> 4661 <option value="looped bold" data-wght="700">Bold</option> 4662 <option value="looped black" data-wght="900">Black</option> 4663 </select> 4664 </div> 4665 4666 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 4667 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 4668 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 4669 <option value="variable" selected="selected">Variable</option> 4670 <option value="ultra light" data-wght="100">Ultra Light</option> 4671 <option value="thin" data-wght="200">Thin</option> 4672 <option value="light" data-wght="300">Light</option> 4673 <option value="regular" data-wght="400">Regular</option> 4674 <option value="medium" data-wght="500">Medium</option> 4675 <option value="bold" data-wght="700">Bold</option> 4676 <option value="black" data-wght="900">Black</option> 4677 </select> 4678 </div> 4679 4680 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 4681 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 4682 <option value="variable" selected="selected">Variable</option> 4683 <option value="ultra light" data-wght="100">Ultra Light</option> 4684 <option value="thin" data-wght="200">Thin</option> 4685 <option value="light" data-wght="300">Light</option> 4686 <option value="regular" data-wght="400">Regular</option> 4687 <option value="medium" data-wght="500">Medium</option> 4688 <option value="bold" data-wght="700">Bold</option> 4689 <option value="black" data-wght="900">Black</option> 4690 </select> 4691 </div> 4692 4693 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 4694 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 4695 <option value="variable" selected="selected">Variable</option> 4696 <option value="ultra light" data-wght="100">Ultra Light</option> 4697 <option value="thin" data-wght="200">Thin</option> 4698 <option value="light" data-wght="300">Light</option> 4699 <option value="regular" data-wght="400">Regular</option> 4700 <option value="medium" data-wght="500">Medium</option> 4701 <option value="bold" data-wght="700">Bold</option> 4702 <option value="black" data-wght="900">Black</option> 4703 </select> 4704 </div> 4705 4706 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 4707 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 4708 <option value="variable" selected="selected">Variable</option> 4709 <option value="ultra light" data-wght="100">Ultra Light</option> 4710 <option value="thin" data-wght="200">Thin</option> 4711 <option value="light" data-wght="300">Light</option> 4712 <option value="regular" data-wght="400">Regular</option> 4713 <option value="medium" data-wght="500">Medium</option> 4714 <option value="bold" data-wght="700">Bold</option> 4715 <option value="black" data-wght="900">Black</option> 4716 </select> 4717 </div> 4718 4719 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 4720 <!-- Thai Slider: Weight (100â900) --> 4721 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
4722 <div data-component="tt__control-area"> 4723 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 4724 <div class="flex flex-row justify-between"> 4725 <div class="">Width</div> 4726 <div data-component="tt__wdth-value"></div> 4727 </div> 4728 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 4729 </div> 4730 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 4731 <div class="flex flex-row justify-between"> 4732 <div class="">Weight</div> 4733 <div data-component="tt__wght-value"></div> 4734 </div> 4735 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="900" class="typetester-slider w-full" id="typetesterWghtRange"> 4736 </div> 4737 </div> 4738</form> 4739 4740 <!-- Main Content Area --> 4741 <div class="md:ml-[48px] flex w-full justify-center align-middle overflow-x-clip"> 4742 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="ar" data-size="m" dir="rtl"></div> 4743 </div> 4744</section> 4745 4746 4747 <!-- Typetester Sample --> 4748<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 4749 <!-- Partial Width Content Area With Section Nav --> 4750 <!-- Section Nav Area --> 4751<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="arabic"> 4752 <!-- Select Script--> 4753 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 4754 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 4755 4756 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 4757 Latin 4758 </option> 4759 4760 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 4761 Cyrillic 4762 </option> 4763 4764 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 4765 Greek 4766 </option> 4767 4768 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 4769 Vietnamese 4770 </option> 4771 4772 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar" selected="selected"> 4773 Arabic 4774 </option> 4775 4776 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 4777 Devanagari 4778 </option> 4779 4780 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 4781 Hebrew 4782 </option> 4783 4784 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 4785 Korean 4786 </option> 4787 4788 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 4789 Thai 4790 </option> 4791 </select> 4792 </div> 4793 4794 <!-- Latin: Proportional / Mono Option --> 4795 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 4796 <div class="text-blue hover:text-red pt-1 w-[120px]"> 4797 <!-- I'm sure theres a better way of applying this attribute conditionally --> 4798 4799 <input type="radio" checked="" id="sample-15_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 4800 <label class="nav-radio-label hover:cursor-pointer" for="sample-15_prop-mono_proportional">Proportional</label> 4801</div> 4802 4803 <div class="text-blue hover:text-red pt-1 w-[120px]"> 4804 <!-- I'm sure theres a better way of applying this attribute conditionally --> 4805 4806 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 4807 <input type="radio" id="sample-15_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 4808 <label class="nav-radio-label hover:cursor-pointer" for="sample-15_prop-mono_mono">Monospaced</label> 4809</div> 4810 4811 </fieldset> 4812 4813 <!-- Latin: Upright / Italic Option --> 4814 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 4815 <div class="text-blue hover:text-red pt-1 w-[120px]"> 4816 <!-- I'm sure theres a better way of applying this attribute conditionally --> 4817 4818 <input type="radio" checked="" id="sample-15_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 4819 <label class="nav-radio-label hover:cursor-pointer" for="sample-15_upright-ital_upright">Upright</label> 4820</div> 4821 4822 <div class="text-blue hover:text-red pt-1 w-[120px]"> 4823 <!-- I'm sure theres a better way of applying this attribute conditionally --> 4824 4825 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 4826 <input type="radio" id="sample-15_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 4827 <label class="nav-radio-label hover:cursor-pointer" for="sample-15_upright-ital_italic">Italic</label> 4828</div> 4829 4830 </fieldset> 4831 4832 <!-- Latin: Default / Alternatives Option --> 4833 <!-- Currently Disabled, Too Many Options Syndrome --> 4834 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 4835 <include src="source/html-includes/radio-button.html"> 4836 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 4837 "default", "label": "Default", "checked": true, "namePrefix": "sample-15" } 4838 </include> 4839 <include src="source/html-includes/radio-button.html"> 4840 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 4841 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 4842 "sample-15" } 4843 </include> 4844 </fieldset> --> 4845 4846 <!-- Thai: Looped / Loopless Option --> 4847 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 4848 <div class="text-blue hover:text-red pt-1 w-[120px]"> 4849 <!-- I'm sure theres a better way of applying this attribute conditionally --> 4850 4851 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 4852 <input type="radio" id="sample-15_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 4853 <label class="nav-radio-label hover:cursor-pointer" for="sample-15_looped_looped">Looped</label> 4854</div> 4855 4856 <div class="text-blue hover:text-red pt-1 w-[120px]"> 4857 <!-- I'm sure theres a better way of applying this attribute conditionally --> 4858 4859 <input type="radio" checked="" id="sample-15_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 4860 <label class="nav-radio-label hover:cursor-pointer" for="sample-15_looped_loopless">Loopless</label> 4861</div> 4862 4863 </fieldset> 4864 4865 <!-- Latin Dropdown: Variable + all 84 styles --> 4866 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 4867 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 4868 <option value="variable" selected="selected">Variable</option> 4869 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 4870 Compressed Ultra Light 4871 </option> 4872 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 4873 Compressed Thin 4874 </option> 4875 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 4876 Compressed Light 4877 </option> 4878 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 4879 Compressed Regular 4880 </option> 4881 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 4882 Compressed Medium
4883 </option> 4884 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 4885 Compressed Bold 4886 </option> 4887 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 4888 Compressed Black 4889 </option> 4890 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 4891 Condensed Ultra Light 4892 </option> 4893 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 4894 Condensed Thin 4895 </option> 4896 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 4897 Condensed Light 4898 </option> 4899 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 4900 Condensed Regular 4901 </option> 4902 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 4903 Condensed Medium 4904 </option> 4905 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 4906 Condensed Bold 4907 </option> 4908 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 4909 Condensed Black 4910 </option> 4911 <option value="standard ultra light" data-wght="100" data-wdth="100"> 4912 Standard Ultra Light 4913 </option> 4914 <option value="standard thin" data-wght="200" data-wdth="100"> 4915 Standard Thin 4916 </option> 4917 <option value="standard light" data-wght="300" data-wdth="100"> 4918 Standard Light 4919 </option> 4920 <option value="standard regular" data-wght="400" data-wdth="100"> 4921 Standard Regular 4922 </option> 4923 <option value="standard medium" data-wght="500" data-wdth="100"> 4924 Standard Medium 4925 </option> 4926 <option value="standard bold" data-wght="700" data-wdth="100"> 4927 Standard Bold 4928 </option> 4929 <option value="standard black" data-wght="900" data-wdth="100"> 4930 Standard Black 4931 </option> 4932 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 4933 Extended Ultra Light 4934 </option> 4935 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 4936 Extended Thin 4937 </option> 4938 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 4939 Extended Light 4940 </option> 4941 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 4942 Extended Regular 4943 </option> 4944 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 4945 Extended Medium 4946 </option> 4947 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 4948 Extended Bold 4949 </option> 4950 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 4951 Extended Black 4952 </option> 4953 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 4954 Expanded Ultra Light 4955 </option> 4956 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 4957 Expanded Thin 4958 </option> 4959 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 4960 Expanded Light 4961 </option> 4962 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 4963 Expanded Regular 4964 </option> 4965 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 4966 Expanded Medium 4967 </option> 4968 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 4969 Expanded Bold 4970 </option> 4971 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 4972 Expanded Black 4973 </option> 4974 </select> 4975 </div> 4976 4977 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 4978 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 4979 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 4980 <option value="variable" selected="selected">Variable</option> 4981 <option value="looped ultra light" data-wght="100">Ultra Light</option> 4982 <option value="looped thin" data-wght="200">Thin</option> 4983 <option value="looped light" data-wght="300">Light</option> 4984 <option value="looped regular" data-wght="400">Regular</option> 4985 <option value="looped medium" data-wght="500">Medium</option> 4986 <option value="looped bold" data-wght="700">Bold</option> 4987 <option value="looped black" data-wght="900">Black</option> 4988 </select> 4989 </div> 4990 4991 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 4992 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 4993 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 4994 <option value="variable" selected="selected">Variable</option> 4995 <option value="ultra light" data-wght="100">Ultra Light</option> 4996 <option value="thin" data-wght="200">Thin</option> 4997 <option value="light" data-wght="300">Light</option> 4998 <option value="regular" data-wght="400">Regular</option> 4999 <option value="medium" data-wght="500">Medium</option> 5000 <option value="bold" data-wght="700">Bold</option> 5001 <option value="black" data-wght="900">Black</option> 5002 </select> 5003 </div> 5004 5005 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 5006 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 5007 <option value="variable" selected="selected">Variable</option> 5008 <option value="ultra light" data-wght="100">Ultra Light</option> 5009 <option value="thin" data-wght="200">Thin</option> 5010 <option value="light" data-wght="300">Light</option> 5011 <option value="regular" data-wght="400">Regular</option> 5012 <option value="medium" data-wght="500">Medium</option> 5013 <option value="bold" data-wght="700">Bold</option> 5014 <option value="black" data-wght="900">Black</option> 5015 </select> 5016 </div> 5017 5018 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 5019 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 5020 <option value="variable" selected="selected">Variable</option> 5021 <option value="ultra light" data-wght="100">Ultra Light</option> 5022 <option value="thin" data-wght="200">Thin</option> 5023 <option value="light" data-wght="300">Light</option> 5024 <option value="regular" data-wght="400">Regular</option> 5025 <option value="medium" data-wght="500">Medium</option> 5026 <option value="bold" data-wght="700">Bold</option> 5027 <option value="black" data-wght="900">Black</option> 5028 </select> 5029 </div> 5030 5031 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 5032 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 5033 <option value="variable" selected="selected">Variable</option> 5034 <option value="ultra light" data-wght="100">Ultra Light</option> 5035 <option value="thin" data-wght="200">Thin</option> 5036 <option value="light" data-wght="300">Light</option> 5037 <option value="regular" data-wght="400">Regular</option> 5038 <option value="medium" data-wght="500">Medium</option> 5039 <option value="bold" data-wght="700">Bold</option> 5040 <option value="black" data-wght="900">Black</option> 5041 </select> 5042 </div> 5043 5044 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 5045 <!-- Thai Slider: Weight (100â900) --> 5046 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
5047 <div data-component="tt__control-area"> 5048 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 5049 <div class="flex flex-row justify-between"> 5050 <div class="">Width</div> 5051 <div data-component="tt__wdth-value"></div> 5052 </div> 5053 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 5054 </div> 5055 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 5056 <div class="flex flex-row justify-between"> 5057 <div class="">Weight</div> 5058 <div data-component="tt__wght-value"></div> 5059 </div> 5060 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="400" class="typetester-slider w-full" id="typetesterWghtRange"> 5061 </div> 5062 </div> 5063</form> 5064 5065 <!-- Main Content Area --> 5066 <div class="md:ml-[48px] flex w-full justify-center align-middle overflow-x-clip"> 5067 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="ar" data-size="s" dir="rtl"></div> 5068 </div> 5069</section> 5070 5071 5072 <!-- Typetester Sample --> 5073<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 5074 <!-- Partial Width Content Area With Section Nav --> 5075 <!-- Section Nav Area --> 5076<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="devanagari"> 5077 <!-- Select Script--> 5078 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 5079 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 5080 5081 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 5082 Latin 5083 </option> 5084 5085 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 5086 Cyrillic 5087 </option> 5088 5089 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 5090 Greek 5091 </option> 5092 5093 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 5094 Vietnamese 5095 </option> 5096 5097 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 5098 Arabic 5099 </option> 5100 5101 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi" selected="selected"> 5102 Devaganari 5103 </option> 5104 5105 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 5106 Hebrew 5107 </option> 5108 5109 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 5110 Korean 5111 </option> 5112 5113 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 5114 Thai 5115 </option> 5116 </select> 5117 </div> 5118 5119 <!-- Latin: Proportional / Mono Option --> 5120 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 5121 <div class="text-blue hover:text-red pt-1 w-[120px]"> 5122 <!-- I'm sure theres a better way of applying this attribute conditionally --> 5123 5124 <input type="radio" checked="" id="sample-16_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 5125 <label class="nav-radio-label hover:cursor-pointer" for="sample-16_prop-mono_proportional">Proportional</label> 5126</div> 5127 5128 <div class="text-blue hover:text-red pt-1 w-[120px]"> 5129 <!-- I'm sure theres a better way of applying this attribute conditionally --> 5130 5131 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 5132 <input type="radio" id="sample-16_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 5133 <label class="nav-radio-label hover:cursor-pointer" for="sample-16_prop-mono_mono">Monospaced</label> 5134</div> 5135 5136 </fieldset> 5137 5138 <!-- Latin: Upright / Italic Option --> 5139 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 5140 <div class="text-blue hover:text-red pt-1 w-[120px]"> 5141 <!-- I'm sure theres a better way of applying this attribute conditionally --> 5142 5143 <input type="radio" checked="" id="sample-16_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 5144 <label class="nav-radio-label hover:cursor-pointer" for="sample-16_upright-ital_upright">Upright</label> 5145</div> 5146 5147 <div class="text-blue hover:text-red pt-1 w-[120px]"> 5148 <!-- I'm sure theres a better way of applying this attribute conditionally --> 5149 5150 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 5151 <input type="radio" id="sample-16_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 5152 <label class="nav-radio-label hover:cursor-pointer" for="sample-16_upright-ital_italic">Italic</label> 5153</div> 5154 5155 </fieldset> 5156 5157 <!-- Latin: Default / Alternatives Option --> 5158 <!-- Currently Disabled, Too Many Options Syndrome --> 5159 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 5160 <include src="source/html-includes/radio-button.html"> 5161 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 5162 "default", "label": "Default", "checked": true, "namePrefix": "sample-16" } 5163 </include> 5164 <include src="source/html-includes/radio-button.html"> 5165 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 5166 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 5167 "sample-16" } 5168 </include> 5169 </fieldset> --> 5170 5171 <!-- Thai: Looped / Loopless Option --> 5172 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 5173 <div class="text-blue hover:text-red pt-1 w-[120px]"> 5174 <!-- I'm sure theres a better way of applying this attribute conditionally --> 5175 5176 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 5177 <input type="radio" id="sample-16_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 5178 <label class="nav-radio-label hover:cursor-pointer" for="sample-16_looped_looped">Looped</label> 5179</div> 5180 5181 <div class="text-blue hover:text-red pt-1 w-[120px]"> 5182 <!-- I'm sure theres a better way of applying this attribute conditionally --> 5183 5184 <input type="radio" checked="" id="sample-16_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 5185 <label class="nav-radio-label hover:cursor-pointer" for="sample-16_looped_loopless">Loopless</label> 5186</div> 5187 5188 </fieldset> 5189 5190 <!-- Latin Dropdown: Variable + all 84 styles --> 5191 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 5192 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 5193 <option value="variable" selected="selected">Variable</option> 5194 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 5195 Compressed Ultra Light 5196 </option> 5197 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 5198 Compressed Thin 5199 </option> 5200 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 5201 Compressed Light 5202 </option> 5203 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 5204 Compressed Regular 5205 </option> 5206 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 5207 Compressed Medium
5208 </option> 5209 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 5210 Compressed Bold 5211 </option> 5212 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 5213 Compressed Black 5214 </option> 5215 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 5216 Condensed Ultra Light 5217 </option> 5218 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 5219 Condensed Thin 5220 </option> 5221 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 5222 Condensed Light 5223 </option> 5224 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 5225 Condensed Regular 5226 </option> 5227 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 5228 Condensed Medium 5229 </option> 5230 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 5231 Condensed Bold 5232 </option> 5233 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 5234 Condensed Black 5235 </option> 5236 <option value="standard ultra light" data-wght="100" data-wdth="100"> 5237 Standard Ultra Light 5238 </option> 5239 <option value="standard thin" data-wght="200" data-wdth="100"> 5240 Standard Thin 5241 </option> 5242 <option value="standard light" data-wght="300" data-wdth="100"> 5243 Standard Light 5244 </option> 5245 <option value="standard regular" data-wght="400" data-wdth="100"> 5246 Standard Regular 5247 </option> 5248 <option value="standard medium" data-wght="500" data-wdth="100"> 5249 Standard Medium 5250 </option> 5251 <option value="standard bold" data-wght="700" data-wdth="100"> 5252 Standard Bold 5253 </option> 5254 <option value="standard black" data-wght="900" data-wdth="100"> 5255 Standard Black 5256 </option> 5257 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 5258 Extended Ultra Light 5259 </option> 5260 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 5261 Extended Thin 5262 </option> 5263 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 5264 Extended Light 5265 </option> 5266 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 5267 Extended Regular 5268 </option> 5269 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 5270 Extended Medium 5271 </option> 5272 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 5273 Extended Bold 5274 </option> 5275 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 5276 Extended Black 5277 </option> 5278 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 5279 Expanded Ultra Light 5280 </option> 5281 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 5282 Expanded Thin 5283 </option> 5284 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 5285 Expanded Light 5286 </option> 5287 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 5288 Expanded Regular 5289 </option> 5290 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 5291 Expanded Medium 5292 </option> 5293 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 5294 Expanded Bold 5295 </option> 5296 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 5297 Expanded Black 5298 </option> 5299 </select> 5300 </div> 5301 5302 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 5303 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 5304 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 5305 <option value="variable" selected="selected">Variable</option> 5306 <option value="looped ultra light" data-wght="100">Ultra Light</option> 5307 <option value="looped thin" data-wght="200">Thin</option> 5308 <option value="looped light" data-wght="300">Light</option> 5309 <option value="looped regular" data-wght="400">Regular</option> 5310 <option value="looped medium" data-wght="500">Medium</option> 5311 <option value="looped bold" data-wght="700">Bold</option> 5312 <option value="looped black" data-wght="900">Black</option> 5313 </select> 5314 </div> 5315 5316 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 5317 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 5318 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 5319 <option value="variable" selected="selected">Variable</option> 5320 <option value="ultra light" data-wght="100">Ultra Light</option> 5321 <option value="thin" data-wght="200">Thin</option> 5322 <option value="light" data-wght="300">Light</option> 5323 <option value="regular" data-wght="400">Regular</option> 5324 <option value="medium" data-wght="500">Medium</option> 5325 <option value="bold" data-wght="700">Bold</option> 5326 <option value="black" data-wght="900">Black</option> 5327 </select> 5328 </div> 5329 5330 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 5331 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 5332 <option value="variable" selected="selected">Variable</option> 5333 <option value="ultra light" data-wght="100">Ultra Light</option> 5334 <option value="thin" data-wght="200">Thin</option> 5335 <option value="light" data-wght="300">Light</option> 5336 <option value="regular" data-wght="400">Regular</option> 5337 <option value="medium" data-wght="500">Medium</option> 5338 <option value="bold" data-wght="700">Bold</option> 5339 <option value="black" data-wght="900">Black</option> 5340 </select> 5341 </div> 5342 5343 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 5344 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 5345 <option value="variable" selected="selected">Variable</option> 5346 <option value="ultra light" data-wght="100">Ultra Light</option> 5347 <option value="thin" data-wght="200">Thin</option> 5348 <option value="light" data-wght="300">Light</option> 5349 <option value="regular" data-wght="400">Regular</option> 5350 <option value="medium" data-wght="500">Medium</option> 5351 <option value="bold" data-wght="700">Bold</option> 5352 <option value="black" data-wght="900">Black</option> 5353 </select> 5354 </div> 5355 5356 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 5357 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 5358 <option value="variable" selected="selected">Variable</option> 5359 <option value="ultra light" data-wght="100">Ultra Light</option> 5360 <option value="thin" data-wght="200">Thin</option> 5361 <option value="light" data-wght="300">Light</option> 5362 <option value="regular" data-wght="400">Regular</option> 5363 <option value="medium" data-wght="500">Medium</option> 5364 <option value="bold" data-wght="700">Bold</option> 5365 <option value="black" data-wght="900">Black</option> 5366 </select> 5367 </div> 5368 5369 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 5370 <!-- Thai Slider: Weight (100â900) --> 5371 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
5372 <div data-component="tt__control-area"> 5373 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 5374 <div class="flex flex-row justify-between"> 5375 <div class="">Width</div> 5376 <div data-component="tt__wdth-value"></div> 5377 </div> 5378 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 5379 </div> 5380 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 5381 <div class="flex flex-row justify-between"> 5382 <div class="">Weight</div> 5383 <div data-component="tt__wght-value"></div> 5384 </div> 5385 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="500" class="typetester-slider w-full" id="typetesterWghtRange"> 5386 </div> 5387 </div> 5388</form> 5389 5390 <!-- Main Content Area --> 5391 <div class="md:ml-[48px] flex w-full justify-center align-middle"> 5392 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="hi" data-size="l"></div> 5393 </div> 5394</section> 5395 5396 5397 <!-- Typetester Sample --> 5398<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 5399 <!-- Partial Width Content Area With Section Nav --> 5400 <!-- Section Nav Area --> 5401<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="devanagari"> 5402 <!-- Select Script--> 5403 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 5404 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 5405 5406 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 5407 Latin 5408 </option> 5409 5410 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 5411 Cyrillic 5412 </option> 5413 5414 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 5415 Greek 5416 </option> 5417 5418 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 5419 Vietnamese 5420 </option> 5421 5422 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 5423 Arabic 5424 </option> 5425 5426 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi" selected="selected"> 5427 Devaganari 5428 </option> 5429 5430 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 5431 Hebrew 5432 </option> 5433 5434 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 5435 Korean 5436 </option> 5437 5438 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 5439 Thai 5440 </option> 5441 </select> 5442 </div> 5443 5444 <!-- Latin: Proportional / Mono Option --> 5445 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 5446 <div class="text-blue hover:text-red pt-1 w-[120px]"> 5447 <!-- I'm sure theres a better way of applying this attribute conditionally --> 5448 5449 <input type="radio" checked="" id="sample-17_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 5450 <label class="nav-radio-label hover:cursor-pointer" for="sample-17_prop-mono_proportional">Proportional</label> 5451</div> 5452 5453 <div class="text-blue hover:text-red pt-1 w-[120px]"> 5454 <!-- I'm sure theres a better way of applying this attribute conditionally --> 5455 5456 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 5457 <input type="radio" id="sample-17_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 5458 <label class="nav-radio-label hover:cursor-pointer" for="sample-17_prop-mono_mono">Monospaced</label> 5459</div> 5460 5461 </fieldset> 5462 5463 <!-- Latin: Upright / Italic Option --> 5464 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 5465 <div class="text-blue hover:text-red pt-1 w-[120px]"> 5466 <!-- I'm sure theres a better way of applying this attribute conditionally --> 5467 5468 <input type="radio" checked="" id="sample-17_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 5469 <label class="nav-radio-label hover:cursor-pointer" for="sample-17_upright-ital_upright">Upright</label> 5470</div> 5471 5472 <div class="text-blue hover:text-red pt-1 w-[120px]"> 5473 <!-- I'm sure theres a better way of applying this attribute conditionally --> 5474 5475 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 5476 <input type="radio" id="sample-17_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 5477 <label class="nav-radio-label hover:cursor-pointer" for="sample-17_upright-ital_italic">Italic</label> 5478</div> 5479 5480 </fieldset> 5481 5482 <!-- Latin: Default / Alternatives Option --> 5483 <!-- Currently Disabled, Too Many Options Syndrome --> 5484 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 5485 <include src="source/html-includes/radio-button.html"> 5486 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 5487 "default", "label": "Default", "checked": true, "namePrefix": "sample-17" } 5488 </include> 5489 <include src="source/html-includes/radio-button.html"> 5490 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 5491 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 5492 "sample-17" } 5493 </include> 5494 </fieldset> --> 5495 5496 <!-- Thai: Looped / Loopless Option --> 5497 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 5498 <div class="text-blue hover:text-red pt-1 w-[120px]"> 5499 <!-- I'm sure theres a better way of applying this attribute conditionally --> 5500 5501 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 5502 <input type="radio" id="sample-17_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 5503 <label class="nav-radio-label hover:cursor-pointer" for="sample-17_looped_looped">Looped</label> 5504</div> 5505 5506 <div class="text-blue hover:text-red pt-1 w-[120px]"> 5507 <!-- I'm sure theres a better way of applying this attribute conditionally --> 5508 5509 <input type="radio" checked="" id="sample-17_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 5510 <label class="nav-radio-label hover:cursor-pointer" for="sample-17_looped_loopless">Loopless</label> 5511</div> 5512 5513 </fieldset> 5514 5515 <!-- Latin Dropdown: Variable + all 84 styles --> 5516 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 5517 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 5518 <option value="variable" selected="selected">Variable</option> 5519 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 5520 Compressed Ultra Light 5521 </option> 5522 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 5523 Compressed Thin 5524 </option> 5525 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 5526 Compressed Light 5527 </option> 5528 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 5529 Compressed Regular 5530 </option> 5531 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 5532 Compressed Medium
5533 </option> 5534 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 5535 Compressed Bold 5536 </option> 5537 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 5538 Compressed Black 5539 </option> 5540 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 5541 Condensed Ultra Light 5542 </option> 5543 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 5544 Condensed Thin 5545 </option> 5546 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 5547 Condensed Light 5548 </option> 5549 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 5550 Condensed Regular 5551 </option> 5552 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 5553 Condensed Medium 5554 </option> 5555 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 5556 Condensed Bold 5557 </option> 5558 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 5559 Condensed Black 5560 </option> 5561 <option value="standard ultra light" data-wght="100" data-wdth="100"> 5562 Standard Ultra Light 5563 </option> 5564 <option value="standard thin" data-wght="200" data-wdth="100"> 5565 Standard Thin 5566 </option> 5567 <option value="standard light" data-wght="300" data-wdth="100"> 5568 Standard Light 5569 </option> 5570 <option value="standard regular" data-wght="400" data-wdth="100"> 5571 Standard Regular 5572 </option> 5573 <option value="standard medium" data-wght="500" data-wdth="100"> 5574 Standard Medium 5575 </option> 5576 <option value="standard bold" data-wght="700" data-wdth="100"> 5577 Standard Bold 5578 </option> 5579 <option value="standard black" data-wght="900" data-wdth="100"> 5580 Standard Black 5581 </option> 5582 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 5583 Extended Ultra Light 5584 </option> 5585 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 5586 Extended Thin 5587 </option> 5588 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 5589 Extended Light 5590 </option> 5591 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 5592 Extended Regular 5593 </option> 5594 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 5595 Extended Medium 5596 </option> 5597 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 5598 Extended Bold 5599 </option> 5600 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 5601 Extended Black 5602 </option> 5603 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 5604 Expanded Ultra Light 5605 </option> 5606 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 5607 Expanded Thin 5608 </option> 5609 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 5610 Expanded Light 5611 </option> 5612 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 5613 Expanded Regular 5614 </option> 5615 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 5616 Expanded Medium 5617 </option> 5618 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 5619 Expanded Bold 5620 </option> 5621 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 5622 Expanded Black 5623 </option> 5624 </select> 5625 </div> 5626 5627 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 5628 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 5629 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 5630 <option value="variable" selected="selected">Variable</option> 5631 <option value="looped ultra light" data-wght="100">Ultra Light</option> 5632 <option value="looped thin" data-wght="200">Thin</option> 5633 <option value="looped light" data-wght="300">Light</option> 5634 <option value="looped regular" data-wght="400">Regular</option> 5635 <option value="looped medium" data-wght="500">Medium</option> 5636 <option value="looped bold" data-wght="700">Bold</option> 5637 <option value="looped black" data-wght="900">Black</option> 5638 </select> 5639 </div> 5640 5641 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 5642 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 5643 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 5644 <option value="variable" selected="selected">Variable</option> 5645 <option value="ultra light" data-wght="100">Ultra Light</option> 5646 <option value="thin" data-wght="200">Thin</option> 5647 <option value="light" data-wght="300">Light</option> 5648 <option value="regular" data-wght="400">Regular</option> 5649 <option value="medium" data-wght="500">Medium</option> 5650 <option value="bold" data-wght="700">Bold</option> 5651 <option value="black" data-wght="900">Black</option> 5652 </select> 5653 </div> 5654 5655 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 5656 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 5657 <option value="variable" selected="selected">Variable</option> 5658 <option value="ultra light" data-wght="100">Ultra Light</option> 5659 <option value="thin" data-wght="200">Thin</option> 5660 <option value="light" data-wght="300">Light</option> 5661 <option value="regular" data-wght="400">Regular</option> 5662 <option value="medium" data-wght="500">Medium</option> 5663 <option value="bold" data-wght="700">Bold</option> 5664 <option value="black" data-wght="900">Black</option> 5665 </select> 5666 </div> 5667 5668 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 5669 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 5670 <option value="variable" selected="selected">Variable</option> 5671 <option value="ultra light" data-wght="100">Ultra Light</option> 5672 <option value="thin" data-wght="200">Thin</option> 5673 <option value="light" data-wght="300">Light</option> 5674 <option value="regular" data-wght="400">Regular</option> 5675 <option value="medium" data-wght="500">Medium</option> 5676 <option value="bold" data-wght="700">Bold</option> 5677 <option value="black" data-wght="900">Black</option> 5678 </select> 5679 </div> 5680 5681 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 5682 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 5683 <option value="variable" selected="selected">Variable</option> 5684 <option value="ultra light" data-wght="100">Ultra Light</option> 5685 <option value="thin" data-wght="200">Thin</option> 5686 <option value="light" data-wght="300">Light</option> 5687 <option value="regular" data-wght="400">Regular</option> 5688 <option value="medium" data-wght="500">Medium</option> 5689 <option value="bold" data-wght="700">Bold</option> 5690 <option value="black" data-wght="900">Black</option> 5691 </select> 5692 </div> 5693 5694 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 5695 <!-- Thai Slider: Weight (100â900) --> 5696 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
5697 <div data-component="tt__control-area"> 5698 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 5699 <div class="flex flex-row justify-between"> 5700 <div class="">Width</div> 5701 <div data-component="tt__wdth-value"></div> 5702 </div> 5703 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 5704 </div> 5705 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 5706 <div class="flex flex-row justify-between"> 5707 <div class="">Weight</div> 5708 <div data-component="tt__wght-value"></div> 5709 </div> 5710 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="900" class="typetester-slider w-full" id="typetesterWghtRange"> 5711 </div> 5712 </div> 5713</form> 5714 5715 <!-- Main Content Area --> 5716 <div class="md:ml-[48px] flex w-full justify-center align-middle"> 5717 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="hi" data-size="m"></div> 5718 </div> 5719</section> 5720 5721 5722 <!-- Typetester Sample --> 5723<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 5724 <!-- Partial Width Content Area With Section Nav --> 5725 <!-- Section Nav Area --> 5726<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="devanagari"> 5727 <!-- Select Script--> 5728 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 5729 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 5730 5731 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 5732 Latin 5733 </option> 5734 5735 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 5736 Cyrillic 5737 </option> 5738 5739 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 5740 Greek 5741 </option> 5742 5743 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 5744 Vietnamese 5745 </option> 5746 5747 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 5748 Arabic 5749 </option> 5750 5751 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi" selected="selected"> 5752 Devaganari 5753 </option> 5754 5755 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 5756 Hebrew 5757 </option> 5758 5759 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 5760 Korean 5761 </option> 5762 5763 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 5764 Thai 5765 </option> 5766 </select> 5767 </div> 5768 5769 <!-- Latin: Proportional / Mono Option --> 5770 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 5771 <div class="text-blue hover:text-red pt-1 w-[120px]"> 5772 <!-- I'm sure theres a better way of applying this attribute conditionally --> 5773 5774 <input type="radio" checked="" id="sample-18_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 5775 <label class="nav-radio-label hover:cursor-pointer" for="sample-18_prop-mono_proportional">Proportional</label> 5776</div> 5777 5778 <div class="text-blue hover:text-red pt-1 w-[120px]"> 5779 <!-- I'm sure theres a better way of applying this attribute conditionally --> 5780 5781 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 5782 <input type="radio" id="sample-18_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 5783 <label class="nav-radio-label hover:cursor-pointer" for="sample-18_prop-mono_mono">Monospaced</label> 5784</div> 5785 5786 </fieldset> 5787 5788 <!-- Latin: Upright / Italic Option --> 5789 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 5790 <div class="text-blue hover:text-red pt-1 w-[120px]"> 5791 <!-- I'm sure theres a better way of applying this attribute conditionally --> 5792 5793 <input type="radio" checked="" id="sample-18_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 5794 <label class="nav-radio-label hover:cursor-pointer" for="sample-18_upright-ital_upright">Upright</label> 5795</div> 5796 5797 <div class="text-blue hover:text-red pt-1 w-[120px]"> 5798 <!-- I'm sure theres a better way of applying this attribute conditionally --> 5799 5800 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 5801 <input type="radio" id="sample-18_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 5802 <label class="nav-radio-label hover:cursor-pointer" for="sample-18_upright-ital_italic">Italic</label> 5803</div> 5804 5805 </fieldset> 5806 5807 <!-- Latin: Default / Alternatives Option --> 5808 <!-- Currently Disabled, Too Many Options Syndrome --> 5809 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 5810 <include src="source/html-includes/radio-button.html"> 5811 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 5812 "default", "label": "Default", "checked": true, "namePrefix": "sample-18" } 5813 </include> 5814 <include src="source/html-includes/radio-button.html"> 5815 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 5816 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 5817 "sample-18" } 5818 </include> 5819 </fieldset> --> 5820 5821 <!-- Thai: Looped / Loopless Option --> 5822 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 5823 <div class="text-blue hover:text-red pt-1 w-[120px]"> 5824 <!-- I'm sure theres a better way of applying this attribute conditionally --> 5825 5826 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 5827 <input type="radio" id="sample-18_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 5828 <label class="nav-radio-label hover:cursor-pointer" for="sample-18_looped_looped">Looped</label> 5829</div> 5830 5831 <div class="text-blue hover:text-red pt-1 w-[120px]"> 5832 <!-- I'm sure theres a better way of applying this attribute conditionally --> 5833 5834 <input type="radio" checked="" id="sample-18_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 5835 <label class="nav-radio-label hover:cursor-pointer" for="sample-18_looped_loopless">Loopless</label> 5836</div> 5837 5838 </fieldset> 5839 5840 <!-- Latin Dropdown: Variable + all 84 styles --> 5841 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 5842 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 5843 <option value="variable" selected="selected">Variable</option> 5844 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 5845 Compressed Ultra Light 5846 </option> 5847 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 5848 Compressed Thin 5849 </option> 5850 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 5851 Compressed Light 5852 </option> 5853 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 5854 Compressed Regular 5855 </option> 5856 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 5857 Compressed Medium
5858 </option> 5859 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 5860 Compressed Bold 5861 </option> 5862 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 5863 Compressed Black 5864 </option> 5865 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 5866 Condensed Ultra Light 5867 </option> 5868 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 5869 Condensed Thin 5870 </option> 5871 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 5872 Condensed Light 5873 </option> 5874 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 5875 Condensed Regular 5876 </option> 5877 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 5878 Condensed Medium 5879 </option> 5880 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 5881 Condensed Bold 5882 </option> 5883 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 5884 Condensed Black 5885 </option> 5886 <option value="standard ultra light" data-wght="100" data-wdth="100"> 5887 Standard Ultra Light 5888 </option> 5889 <option value="standard thin" data-wght="200" data-wdth="100"> 5890 Standard Thin 5891 </option> 5892 <option value="standard light" data-wght="300" data-wdth="100"> 5893 Standard Light 5894 </option> 5895 <option value="standard regular" data-wght="400" data-wdth="100"> 5896 Standard Regular 5897 </option> 5898 <option value="standard medium" data-wght="500" data-wdth="100"> 5899 Standard Medium 5900 </option> 5901 <option value="standard bold" data-wght="700" data-wdth="100"> 5902 Standard Bold 5903 </option> 5904 <option value="standard black" data-wght="900" data-wdth="100"> 5905 Standard Black 5906 </option> 5907 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 5908 Extended Ultra Light 5909 </option> 5910 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 5911 Extended Thin 5912 </option> 5913 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 5914 Extended Light 5915 </option> 5916 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 5917 Extended Regular 5918 </option> 5919 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 5920 Extended Medium 5921 </option> 5922 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 5923 Extended Bold 5924 </option> 5925 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 5926 Extended Black 5927 </option> 5928 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 5929 Expanded Ultra Light 5930 </option> 5931 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 5932 Expanded Thin 5933 </option> 5934 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 5935 Expanded Light 5936 </option> 5937 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 5938 Expanded Regular 5939 </option> 5940 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 5941 Expanded Medium 5942 </option> 5943 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 5944 Expanded Bold 5945 </option> 5946 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 5947 Expanded Black 5948 </option> 5949 </select> 5950 </div> 5951 5952 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 5953 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 5954 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 5955 <option value="variable" selected="selected">Variable</option> 5956 <option value="looped ultra light" data-wght="100">Ultra Light</option> 5957 <option value="looped thin" data-wght="200">Thin</option> 5958 <option value="looped light" data-wght="300">Light</option> 5959 <option value="looped regular" data-wght="400">Regular</option> 5960 <option value="looped medium" data-wght="500">Medium</option> 5961 <option value="looped bold" data-wght="700">Bold</option> 5962 <option value="looped black" data-wght="900">Black</option> 5963 </select> 5964 </div> 5965 5966 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 5967 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 5968 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 5969 <option value="variable" selected="selected">Variable</option> 5970 <option value="ultra light" data-wght="100">Ultra Light</option> 5971 <option value="thin" data-wght="200">Thin</option> 5972 <option value="light" data-wght="300">Light</option> 5973 <option value="regular" data-wght="400">Regular</option> 5974 <option value="medium" data-wght="500">Medium</option> 5975 <option value="bold" data-wght="700">Bold</option> 5976 <option value="black" data-wght="900">Black</option> 5977 </select> 5978 </div> 5979 5980 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 5981 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 5982 <option value="variable" selected="selected">Variable</option> 5983 <option value="ultra light" data-wght="100">Ultra Light</option> 5984 <option value="thin" data-wght="200">Thin</option> 5985 <option value="light" data-wght="300">Light</option> 5986 <option value="regular" data-wght="400">Regular</option> 5987 <option value="medium" data-wght="500">Medium</option> 5988 <option value="bold" data-wght="700">Bold</option> 5989 <option value="black" data-wght="900">Black</option> 5990 </select> 5991 </div> 5992 5993 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 5994 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 5995 <option value="variable" selected="selected">Variable</option> 5996 <option value="ultra light" data-wght="100">Ultra Light</option> 5997 <option value="thin" data-wght="200">Thin</option> 5998 <option value="light" data-wght="300">Light</option> 5999 <option value="regular" data-wght="400">Regular</option> 6000 <option value="medium" data-wght="500">Medium</option> 6001 <option value="bold" data-wght="700">Bold</option> 6002 <option value="black" data-wght="900">Black</option> 6003 </select> 6004 </div> 6005 6006 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 6007 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 6008 <option value="variable" selected="selected">Variable</option> 6009 <option value="ultra light" data-wght="100">Ultra Light</option> 6010 <option value="thin" data-wght="200">Thin</option> 6011 <option value="light" data-wght="300">Light</option> 6012 <option value="regular" data-wght="400">Regular</option> 6013 <option value="medium" data-wght="500">Medium</option> 6014 <option value="bold" data-wght="700">Bold</option> 6015 <option value="black" data-wght="900">Black</option> 6016 </select> 6017 </div> 6018 6019 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 6020 <!-- Thai Slider: Weight (100â900) --> 6021 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
6022 <div data-component="tt__control-area"> 6023 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 6024 <div class="flex flex-row justify-between"> 6025 <div class="">Width</div> 6026 <div data-component="tt__wdth-value"></div> 6027 </div> 6028 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 6029 </div> 6030 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 6031 <div class="flex flex-row justify-between"> 6032 <div class="">Weight</div> 6033 <div data-component="tt__wght-value"></div> 6034 </div> 6035 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="400" class="typetester-slider w-full" id="typetesterWghtRange"> 6036 </div> 6037 </div> 6038</form> 6039 6040 <!-- Main Content Area --> 6041 <div class="md:ml-[48px] flex w-full justify-center align-middle"> 6042 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="hi" data-size="s"></div> 6043 </div> 6044</section> 6045 6046 6047 <!-- Typetester Sample --> 6048<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 6049 <!-- Partial Width Content Area With Section Nav --> 6050 <!-- Section Nav Area --> 6051<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="hebrew"> 6052 <!-- Select Script--> 6053 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 6054 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 6055 6056 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 6057 Latin 6058 </option> 6059 6060 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 6061 Cyrillic 6062 </option> 6063 6064 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 6065 Greek 6066 </option> 6067 6068 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 6069 Vietnamese 6070 </option> 6071 6072 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 6073 Arabic 6074 </option> 6075 6076 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 6077 Devanagari 6078 </option> 6079 6080 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he" selected="selected"> 6081 Hebrew 6082 </option> 6083 6084 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 6085 Korean 6086 </option> 6087 6088 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 6089 Thai 6090 </option> 6091 </select> 6092 </div> 6093 6094 <!-- Latin: Proportional / Mono Option --> 6095 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 6096 <div class="text-blue hover:text-red pt-1 w-[120px]"> 6097 <!-- I'm sure theres a better way of applying this attribute conditionally --> 6098 6099 <input type="radio" checked="" id="sample-19_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 6100 <label class="nav-radio-label hover:cursor-pointer" for="sample-19_prop-mono_proportional">Proportional</label> 6101</div> 6102 6103 <div class="text-blue hover:text-red pt-1 w-[120px]"> 6104 <!-- I'm sure theres a better way of applying this attribute conditionally --> 6105 6106 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 6107 <input type="radio" id="sample-19_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 6108 <label class="nav-radio-label hover:cursor-pointer" for="sample-19_prop-mono_mono">Monospaced</label> 6109</div> 6110 6111 </fieldset> 6112 6113 <!-- Latin: Upright / Italic Option --> 6114 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 6115 <div class="text-blue hover:text-red pt-1 w-[120px]"> 6116 <!-- I'm sure theres a better way of applying this attribute conditionally --> 6117 6118 <input type="radio" checked="" id="sample-19_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 6119 <label class="nav-radio-label hover:cursor-pointer" for="sample-19_upright-ital_upright">Upright</label> 6120</div> 6121 6122 <div class="text-blue hover:text-red pt-1 w-[120px]"> 6123 <!-- I'm sure theres a better way of applying this attribute conditionally --> 6124 6125 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 6126 <input type="radio" id="sample-19_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 6127 <label class="nav-radio-label hover:cursor-pointer" for="sample-19_upright-ital_italic">Italic</label> 6128</div> 6129 6130 </fieldset> 6131 6132 <!-- Latin: Default / Alternatives Option --> 6133 <!-- Currently Disabled, Too Many Options Syndrome --> 6134 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 6135 <include src="source/html-includes/radio-button.html"> 6136 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 6137 "default", "label": "Default", "checked": true, "namePrefix": "sample-19" } 6138 </include> 6139 <include src="source/html-includes/radio-button.html"> 6140 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 6141 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 6142 "sample-19" } 6143 </include> 6144 </fieldset> --> 6145 6146 <!-- Thai: Looped / Loopless Option --> 6147 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 6148 <div class="text-blue hover:text-red pt-1 w-[120px]"> 6149 <!-- I'm sure theres a better way of applying this attribute conditionally --> 6150 6151 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 6152 <input type="radio" id="sample-19_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 6153 <label class="nav-radio-label hover:cursor-pointer" for="sample-19_looped_looped">Looped</label> 6154</div> 6155 6156 <div class="text-blue hover:text-red pt-1 w-[120px]"> 6157 <!-- I'm sure theres a better way of applying this attribute conditionally --> 6158 6159 <input type="radio" checked="" id="sample-19_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 6160 <label class="nav-radio-label hover:cursor-pointer" for="sample-19_looped_loopless">Loopless</label> 6161</div> 6162 6163 </fieldset> 6164 6165 <!-- Latin Dropdown: Variable + all 84 styles --> 6166 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 6167 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 6168 <option value="variable" selected="selected">Variable</option> 6169 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 6170 Compressed Ultra Light 6171 </option> 6172 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 6173 Compressed Thin 6174 </option> 6175 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 6176 Compressed Light 6177 </option> 6178 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 6179 Compressed Regular 6180 </option> 6181 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 6182 Compressed Medium
6183 </option> 6184 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 6185 Compressed Bold 6186 </option> 6187 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 6188 Compressed Black 6189 </option> 6190 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 6191 Condensed Ultra Light 6192 </option> 6193 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 6194 Condensed Thin 6195 </option> 6196 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 6197 Condensed Light 6198 </option> 6199 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 6200 Condensed Regular 6201 </option> 6202 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 6203 Condensed Medium 6204 </option> 6205 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 6206 Condensed Bold 6207 </option> 6208 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 6209 Condensed Black 6210 </option> 6211 <option value="standard ultra light" data-wght="100" data-wdth="100"> 6212 Standard Ultra Light 6213 </option> 6214 <option value="standard thin" data-wght="200" data-wdth="100"> 6215 Standard Thin 6216 </option> 6217 <option value="standard light" data-wght="300" data-wdth="100"> 6218 Standard Light 6219 </option> 6220 <option value="standard regular" data-wght="400" data-wdth="100"> 6221 Standard Regular 6222 </option> 6223 <option value="standard medium" data-wght="500" data-wdth="100"> 6224 Standard Medium 6225 </option> 6226 <option value="standard bold" data-wght="700" data-wdth="100"> 6227 Standard Bold 6228 </option> 6229 <option value="standard black" data-wght="900" data-wdth="100"> 6230 Standard Black 6231 </option> 6232 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 6233 Extended Ultra Light 6234 </option> 6235 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 6236 Extended Thin 6237 </option> 6238 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 6239 Extended Light 6240 </option> 6241 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 6242 Extended Regular 6243 </option> 6244 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 6245 Extended Medium 6246 </option> 6247 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 6248 Extended Bold 6249 </option> 6250 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 6251 Extended Black 6252 </option> 6253 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 6254 Expanded Ultra Light 6255 </option> 6256 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 6257 Expanded Thin 6258 </option> 6259 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 6260 Expanded Light 6261 </option> 6262 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 6263 Expanded Regular 6264 </option> 6265 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 6266 Expanded Medium 6267 </option> 6268 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 6269 Expanded Bold 6270 </option> 6271 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 6272 Expanded Black 6273 </option> 6274 </select> 6275 </div> 6276 6277 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 6278 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 6279 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 6280 <option value="variable" selected="selected">Variable</option> 6281 <option value="looped ultra light" data-wght="100">Ultra Light</option> 6282 <option value="looped thin" data-wght="200">Thin</option> 6283 <option value="looped light" data-wght="300">Light</option> 6284 <option value="looped regular" data-wght="400">Regular</option> 6285 <option value="looped medium" data-wght="500">Medium</option> 6286 <option value="looped bold" data-wght="700">Bold</option> 6287 <option value="looped black" data-wght="900">Black</option> 6288 </select> 6289 </div> 6290 6291 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 6292 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 6293 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 6294 <option value="variable" selected="selected">Variable</option> 6295 <option value="ultra light" data-wght="100">Ultra Light</option> 6296 <option value="thin" data-wght="200">Thin</option> 6297 <option value="light" data-wght="300">Light</option> 6298 <option value="regular" data-wght="400">Regular</option> 6299 <option value="medium" data-wght="500">Medium</option> 6300 <option value="bold" data-wght="700">Bold</option> 6301 <option value="black" data-wght="900">Black</option> 6302 </select> 6303 </div> 6304 6305 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 6306 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 6307 <option value="variable" selected="selected">Variable</option> 6308 <option value="ultra light" data-wght="100">Ultra Light</option> 6309 <option value="thin" data-wght="200">Thin</option> 6310 <option value="light" data-wght="300">Light</option> 6311 <option value="regular" data-wght="400">Regular</option> 6312 <option value="medium" data-wght="500">Medium</option> 6313 <option value="bold" data-wght="700">Bold</option> 6314 <option value="black" data-wght="900">Black</option> 6315 </select> 6316 </div> 6317 6318 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 6319 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 6320 <option value="variable" selected="selected">Variable</option> 6321 <option value="ultra light" data-wght="100">Ultra Light</option> 6322 <option value="thin" data-wght="200">Thin</option> 6323 <option value="light" data-wght="300">Light</option> 6324 <option value="regular" data-wght="400">Regular</option> 6325 <option value="medium" data-wght="500">Medium</option> 6326 <option value="bold" data-wght="700">Bold</option> 6327 <option value="black" data-wght="900">Black</option> 6328 </select> 6329 </div> 6330 6331 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 6332 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 6333 <option value="variable" selected="selected">Variable</option> 6334 <option value="ultra light" data-wght="100">Ultra Light</option> 6335 <option value="thin" data-wght="200">Thin</option> 6336 <option value="light" data-wght="300">Light</option> 6337 <option value="regular" data-wght="400">Regular</option> 6338 <option value="medium" data-wght="500">Medium</option> 6339 <option value="bold" data-wght="700">Bold</option> 6340 <option value="black" data-wght="900">Black</option> 6341 </select> 6342 </div> 6343 6344 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 6345 <!-- Thai Slider: Weight (100â900) --> 6346 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
6347 <div data-component="tt__control-area"> 6348 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 6349 <div class="flex flex-row justify-between"> 6350 <div class="">Width</div> 6351 <div data-component="tt__wdth-value"></div> 6352 </div> 6353 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 6354 </div> 6355 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 6356 <div class="flex flex-row justify-between"> 6357 <div class="">Weight</div> 6358 <div data-component="tt__wght-value"></div> 6359 </div> 6360 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="900" class="typetester-slider w-full" id="typetesterWghtRange"> 6361 </div> 6362 </div> 6363</form> 6364 6365 <!-- Main Content Area --> 6366 <div class="md:ml-[48px] flex w-full justify-center align-middle overflow-x-clip"> 6367 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="he" data-size="l" dir="rtl"></div> 6368 </div> 6369</section> 6370 6371 6372 <!-- Typetester Sample --> 6373<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 6374 <!-- Partial Width Content Area With Section Nav --> 6375 <!-- Section Nav Area --> 6376<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="hebrew"> 6377 <!-- Select Script--> 6378 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 6379 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 6380 6381 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 6382 Latin 6383 </option> 6384 6385 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 6386 Cyrillic 6387 </option> 6388 6389 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 6390 Greek 6391 </option> 6392 6393 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 6394 Vietnamese 6395 </option> 6396 6397 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 6398 Arabic 6399 </option> 6400 6401 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 6402 Devanagari 6403 </option> 6404 6405 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he" selected="selected"> 6406 Hebrew 6407 </option> 6408 6409 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 6410 Korean 6411 </option> 6412 6413 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 6414 Thai 6415 </option> 6416 </select> 6417 </div> 6418 6419 <!-- Latin: Proportional / Mono Option --> 6420 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 6421 <div class="text-blue hover:text-red pt-1 w-[120px]"> 6422 <!-- I'm sure theres a better way of applying this attribute conditionally --> 6423 6424 <input type="radio" checked="" id="sample-20_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 6425 <label class="nav-radio-label hover:cursor-pointer" for="sample-20_prop-mono_proportional">Proportional</label> 6426</div> 6427 6428 <div class="text-blue hover:text-red pt-1 w-[120px]"> 6429 <!-- I'm sure theres a better way of applying this attribute conditionally --> 6430 6431 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 6432 <input type="radio" id="sample-20_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 6433 <label class="nav-radio-label hover:cursor-pointer" for="sample-20_prop-mono_mono">Monospaced</label> 6434</div> 6435 6436 </fieldset> 6437 6438 <!-- Latin: Upright / Italic Option --> 6439 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 6440 <div class="text-blue hover:text-red pt-1 w-[120px]"> 6441 <!-- I'm sure theres a better way of applying this attribute conditionally --> 6442 6443 <input type="radio" checked="" id="sample-20_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 6444 <label class="nav-radio-label hover:cursor-pointer" for="sample-20_upright-ital_upright">Upright</label> 6445</div> 6446 6447 <div class="text-blue hover:text-red pt-1 w-[120px]"> 6448 <!-- I'm sure theres a better way of applying this attribute conditionally --> 6449 6450 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 6451 <input type="radio" id="sample-20_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 6452 <label class="nav-radio-label hover:cursor-pointer" for="sample-20_upright-ital_italic">Italic</label> 6453</div> 6454 6455 </fieldset> 6456 6457 <!-- Latin: Default / Alternatives Option --> 6458 <!-- Currently Disabled, Too Many Options Syndrome --> 6459 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 6460 <include src="source/html-includes/radio-button.html"> 6461 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 6462 "default", "label": "Default", "checked": true, "namePrefix": "sample-20" } 6463 </include> 6464 <include src="source/html-includes/radio-button.html"> 6465 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 6466 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 6467 "sample-20" } 6468 </include> 6469 </fieldset> --> 6470 6471 <!-- Thai: Looped / Loopless Option --> 6472 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 6473 <div class="text-blue hover:text-red pt-1 w-[120px]"> 6474 <!-- I'm sure theres a better way of applying this attribute conditionally --> 6475 6476 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 6477 <input type="radio" id="sample-20_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 6478 <label class="nav-radio-label hover:cursor-pointer" for="sample-20_looped_looped">Looped</label> 6479</div> 6480 6481 <div class="text-blue hover:text-red pt-1 w-[120px]"> 6482 <!-- I'm sure theres a better way of applying this attribute conditionally --> 6483 6484 <input type="radio" checked="" id="sample-20_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 6485 <label class="nav-radio-label hover:cursor-pointer" for="sample-20_looped_loopless">Loopless</label> 6486</div> 6487 6488 </fieldset> 6489 6490 <!-- Latin Dropdown: Variable + all 84 styles --> 6491 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 6492 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 6493 <option value="variable" selected="selected">Variable</option> 6494 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 6495 Compressed Ultra Light 6496 </option> 6497 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 6498 Compressed Thin 6499 </option> 6500 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 6501 Compressed Light 6502 </option> 6503 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 6504 Compressed Regular 6505 </option> 6506 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 6507 Compressed Medium
6508 </option> 6509 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 6510 Compressed Bold 6511 </option> 6512 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 6513 Compressed Black 6514 </option> 6515 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 6516 Condensed Ultra Light 6517 </option> 6518 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 6519 Condensed Thin 6520 </option> 6521 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 6522 Condensed Light 6523 </option> 6524 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 6525 Condensed Regular 6526 </option> 6527 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 6528 Condensed Medium 6529 </option> 6530 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 6531 Condensed Bold 6532 </option> 6533 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 6534 Condensed Black 6535 </option> 6536 <option value="standard ultra light" data-wght="100" data-wdth="100"> 6537 Standard Ultra Light 6538 </option> 6539 <option value="standard thin" data-wght="200" data-wdth="100"> 6540 Standard Thin 6541 </option> 6542 <option value="standard light" data-wght="300" data-wdth="100"> 6543 Standard Light 6544 </option> 6545 <option value="standard regular" data-wght="400" data-wdth="100"> 6546 Standard Regular 6547 </option> 6548 <option value="standard medium" data-wght="500" data-wdth="100"> 6549 Standard Medium 6550 </option> 6551 <option value="standard bold" data-wght="700" data-wdth="100"> 6552 Standard Bold 6553 </option> 6554 <option value="standard black" data-wght="900" data-wdth="100"> 6555 Standard Black 6556 </option> 6557 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 6558 Extended Ultra Light 6559 </option> 6560 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 6561 Extended Thin 6562 </option> 6563 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 6564 Extended Light 6565 </option> 6566 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 6567 Extended Regular 6568 </option> 6569 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 6570 Extended Medium 6571 </option> 6572 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 6573 Extended Bold 6574 </option> 6575 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 6576 Extended Black 6577 </option> 6578 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 6579 Expanded Ultra Light 6580 </option> 6581 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 6582 Expanded Thin 6583 </option> 6584 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 6585 Expanded Light 6586 </option> 6587 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 6588 Expanded Regular 6589 </option> 6590 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 6591 Expanded Medium 6592 </option> 6593 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 6594 Expanded Bold 6595 </option> 6596 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 6597 Expanded Black 6598 </option> 6599 </select> 6600 </div> 6601 6602 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 6603 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 6604 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 6605 <option value="variable" selected="selected">Variable</option> 6606 <option value="looped ultra light" data-wght="100">Ultra Light</option> 6607 <option value="looped thin" data-wght="200">Thin</option> 6608 <option value="looped light" data-wght="300">Light</option> 6609 <option value="looped regular" data-wght="400">Regular</option> 6610 <option value="looped medium" data-wght="500">Medium</option> 6611 <option value="looped bold" data-wght="700">Bold</option> 6612 <option value="looped black" data-wght="900">Black</option> 6613 </select> 6614 </div> 6615 6616 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 6617 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 6618 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 6619 <option value="variable" selected="selected">Variable</option> 6620 <option value="ultra light" data-wght="100">Ultra Light</option> 6621 <option value="thin" data-wght="200">Thin</option> 6622 <option value="light" data-wght="300">Light</option> 6623 <option value="regular" data-wght="400">Regular</option> 6624 <option value="medium" data-wght="500">Medium</option> 6625 <option value="bold" data-wght="700">Bold</option> 6626 <option value="black" data-wght="900">Black</option> 6627 </select> 6628 </div> 6629 6630 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 6631 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 6632 <option value="variable" selected="selected">Variable</option> 6633 <option value="ultra light" data-wght="100">Ultra Light</option> 6634 <option value="thin" data-wght="200">Thin</option> 6635 <option value="light" data-wght="300">Light</option> 6636 <option value="regular" data-wght="400">Regular</option> 6637 <option value="medium" data-wght="500">Medium</option> 6638 <option value="bold" data-wght="700">Bold</option> 6639 <option value="black" data-wght="900">Black</option> 6640 </select> 6641 </div> 6642 6643 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 6644 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 6645 <option value="variable" selected="selected">Variable</option> 6646 <option value="ultra light" data-wght="100">Ultra Light</option> 6647 <option value="thin" data-wght="200">Thin</option> 6648 <option value="light" data-wght="300">Light</option> 6649 <option value="regular" data-wght="400">Regular</option> 6650 <option value="medium" data-wght="500">Medium</option> 6651 <option value="bold" data-wght="700">Bold</option> 6652 <option value="black" data-wght="900">Black</option> 6653 </select> 6654 </div> 6655 6656 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 6657 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 6658 <option value="variable" selected="selected">Variable</option> 6659 <option value="ultra light" data-wght="100">Ultra Light</option> 6660 <option value="thin" data-wght="200">Thin</option> 6661 <option value="light" data-wght="300">Light</option> 6662 <option value="regular" data-wght="400">Regular</option> 6663 <option value="medium" data-wght="500">Medium</option> 6664 <option value="bold" data-wght="700">Bold</option> 6665 <option value="black" data-wght="900">Black</option> 6666 </select> 6667 </div> 6668 6669 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 6670 <!-- Thai Slider: Weight (100â900) --> 6671 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
6672 <div data-component="tt__control-area"> 6673 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 6674 <div class="flex flex-row justify-between"> 6675 <div class="">Width</div> 6676 <div data-component="tt__wdth-value"></div> 6677 </div> 6678 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 6679 </div> 6680 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 6681 <div class="flex flex-row justify-between"> 6682 <div class="">Weight</div> 6683 <div data-component="tt__wght-value"></div> 6684 </div> 6685 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="500" class="typetester-slider w-full" id="typetesterWghtRange"> 6686 </div> 6687 </div> 6688</form> 6689 6690 <!-- Main Content Area --> 6691 <div class="md:ml-[48px] flex w-full justify-center align-middle overflow-x-clip"> 6692 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="he" data-size="m" dir="rtl"></div> 6693 </div> 6694</section> 6695 6696 6697 <!-- Typetester Sample --> 6698<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 6699 <!-- Partial Width Content Area With Section Nav --> 6700 <!-- Section Nav Area --> 6701<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="hebrew"> 6702 <!-- Select Script--> 6703 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 6704 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 6705 6706 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 6707 Latin 6708 </option> 6709 6710 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 6711 Cyrillic 6712 </option> 6713 6714 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 6715 Greek 6716 </option> 6717 6718 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 6719 Vietnamese 6720 </option> 6721 6722 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 6723 Arabic 6724 </option> 6725 6726 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 6727 Devanagari 6728 </option> 6729 6730 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he" selected="selected"> 6731 Hebrew 6732 </option> 6733 6734 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 6735 Korean 6736 </option> 6737 6738 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 6739 Thai 6740 </option> 6741 </select> 6742 </div> 6743 6744 <!-- Latin: Proportional / Mono Option --> 6745 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 6746 <div class="text-blue hover:text-red pt-1 w-[120px]"> 6747 <!-- I'm sure theres a better way of applying this attribute conditionally --> 6748 6749 <input type="radio" checked="" id="sample-21_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 6750 <label class="nav-radio-label hover:cursor-pointer" for="sample-21_prop-mono_proportional">Proportional</label> 6751</div> 6752 6753 <div class="text-blue hover:text-red pt-1 w-[120px]"> 6754 <!-- I'm sure theres a better way of applying this attribute conditionally --> 6755 6756 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 6757 <input type="radio" id="sample-21_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 6758 <label class="nav-radio-label hover:cursor-pointer" for="sample-21_prop-mono_mono">Monospaced</label> 6759</div> 6760 6761 </fieldset> 6762 6763 <!-- Latin: Upright / Italic Option --> 6764 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 6765 <div class="text-blue hover:text-red pt-1 w-[120px]"> 6766 <!-- I'm sure theres a better way of applying this attribute conditionally --> 6767 6768 <input type="radio" checked="" id="sample-21_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 6769 <label class="nav-radio-label hover:cursor-pointer" for="sample-21_upright-ital_upright">Upright</label> 6770</div> 6771 6772 <div class="text-blue hover:text-red pt-1 w-[120px]"> 6773 <!-- I'm sure theres a better way of applying this attribute conditionally --> 6774 6775 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 6776 <input type="radio" id="sample-21_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 6777 <label class="nav-radio-label hover:cursor-pointer" for="sample-21_upright-ital_italic">Italic</label> 6778</div> 6779 6780 </fieldset> 6781 6782 <!-- Latin: Default / Alternatives Option --> 6783 <!-- Currently Disabled, Too Many Options Syndrome --> 6784 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 6785 <include src="source/html-includes/radio-button.html"> 6786 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 6787 "default", "label": "Default", "checked": true, "namePrefix": "sample-21" } 6788 </include> 6789 <include src="source/html-includes/radio-button.html"> 6790 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 6791 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 6792 "sample-21" } 6793 </include> 6794 </fieldset> --> 6795 6796 <!-- Thai: Looped / Loopless Option --> 6797 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 6798 <div class="text-blue hover:text-red pt-1 w-[120px]"> 6799 <!-- I'm sure theres a better way of applying this attribute conditionally --> 6800 6801 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 6802 <input type="radio" id="sample-21_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 6803 <label class="nav-radio-label hover:cursor-pointer" for="sample-21_looped_looped">Looped</label> 6804</div> 6805 6806 <div class="text-blue hover:text-red pt-1 w-[120px]"> 6807 <!-- I'm sure theres a better way of applying this attribute conditionally --> 6808 6809 <input type="radio" checked="" id="sample-21_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 6810 <label class="nav-radio-label hover:cursor-pointer" for="sample-21_looped_loopless">Loopless</label> 6811</div> 6812 6813 </fieldset> 6814 6815 <!-- Latin Dropdown: Variable + all 84 styles --> 6816 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 6817 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 6818 <option value="variable" selected="selected">Variable</option> 6819 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 6820 Compressed Ultra Light 6821 </option> 6822 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 6823 Compressed Thin 6824 </option> 6825 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 6826 Compressed Light 6827 </option> 6828 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 6829 Compressed Regular 6830 </option> 6831 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 6832 Compressed Medium
6833 </option> 6834 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 6835 Compressed Bold 6836 </option> 6837 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 6838 Compressed Black 6839 </option> 6840 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 6841 Condensed Ultra Light 6842 </option> 6843 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 6844 Condensed Thin 6845 </option> 6846 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 6847 Condensed Light 6848 </option> 6849 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 6850 Condensed Regular 6851 </option> 6852 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 6853 Condensed Medium 6854 </option> 6855 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 6856 Condensed Bold 6857 </option> 6858 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 6859 Condensed Black 6860 </option> 6861 <option value="standard ultra light" data-wght="100" data-wdth="100"> 6862 Standard Ultra Light 6863 </option> 6864 <option value="standard thin" data-wght="200" data-wdth="100"> 6865 Standard Thin 6866 </option> 6867 <option value="standard light" data-wght="300" data-wdth="100"> 6868 Standard Light 6869 </option> 6870 <option value="standard regular" data-wght="400" data-wdth="100"> 6871 Standard Regular 6872 </option> 6873 <option value="standard medium" data-wght="500" data-wdth="100"> 6874 Standard Medium 6875 </option> 6876 <option value="standard bold" data-wght="700" data-wdth="100"> 6877 Standard Bold 6878 </option> 6879 <option value="standard black" data-wght="900" data-wdth="100"> 6880 Standard Black 6881 </option> 6882 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 6883 Extended Ultra Light 6884 </option> 6885 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 6886 Extended Thin 6887 </option> 6888 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 6889 Extended Light 6890 </option> 6891 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 6892 Extended Regular 6893 </option> 6894 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 6895 Extended Medium 6896 </option> 6897 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 6898 Extended Bold 6899 </option> 6900 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 6901 Extended Black 6902 </option> 6903 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 6904 Expanded Ultra Light 6905 </option> 6906 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 6907 Expanded Thin 6908 </option> 6909 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 6910 Expanded Light 6911 </option> 6912 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 6913 Expanded Regular 6914 </option> 6915 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 6916 Expanded Medium 6917 </option> 6918 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 6919 Expanded Bold 6920 </option> 6921 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 6922 Expanded Black 6923 </option> 6924 </select> 6925 </div> 6926 6927 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 6928 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 6929 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 6930 <option value="variable" selected="selected">Variable</option> 6931 <option value="looped ultra light" data-wght="100">Ultra Light</option> 6932 <option value="looped thin" data-wght="200">Thin</option> 6933 <option value="looped light" data-wght="300">Light</option> 6934 <option value="looped regular" data-wght="400">Regular</option> 6935 <option value="looped medium" data-wght="500">Medium</option> 6936 <option value="looped bold" data-wght="700">Bold</option> 6937 <option value="looped black" data-wght="900">Black</option> 6938 </select> 6939 </div> 6940 6941 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 6942 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 6943 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 6944 <option value="variable" selected="selected">Variable</option> 6945 <option value="ultra light" data-wght="100">Ultra Light</option> 6946 <option value="thin" data-wght="200">Thin</option> 6947 <option value="light" data-wght="300">Light</option> 6948 <option value="regular" data-wght="400">Regular</option> 6949 <option value="medium" data-wght="500">Medium</option> 6950 <option value="bold" data-wght="700">Bold</option> 6951 <option value="black" data-wght="900">Black</option> 6952 </select> 6953 </div> 6954 6955 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 6956 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 6957 <option value="variable" selected="selected">Variable</option> 6958 <option value="ultra light" data-wght="100">Ultra Light</option> 6959 <option value="thin" data-wght="200">Thin</option> 6960 <option value="light" data-wght="300">Light</option> 6961 <option value="regular" data-wght="400">Regular</option> 6962 <option value="medium" data-wght="500">Medium</option> 6963 <option value="bold" data-wght="700">Bold</option> 6964 <option value="black" data-wght="900">Black</option> 6965 </select> 6966 </div> 6967 6968 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 6969 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 6970 <option value="variable" selected="selected">Variable</option> 6971 <option value="ultra light" data-wght="100">Ultra Light</option> 6972 <option value="thin" data-wght="200">Thin</option> 6973 <option value="light" data-wght="300">Light</option> 6974 <option value="regular" data-wght="400">Regular</option> 6975 <option value="medium" data-wght="500">Medium</option> 6976 <option value="bold" data-wght="700">Bold</option> 6977 <option value="black" data-wght="900">Black</option> 6978 </select> 6979 </div> 6980 6981 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 6982 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 6983 <option value="variable" selected="selected">Variable</option> 6984 <option value="ultra light" data-wght="100">Ultra Light</option> 6985 <option value="thin" data-wght="200">Thin</option> 6986 <option value="light" data-wght="300">Light</option> 6987 <option value="regular" data-wght="400">Regular</option> 6988 <option value="medium" data-wght="500">Medium</option> 6989 <option value="bold" data-wght="700">Bold</option> 6990 <option value="black" data-wght="900">Black</option> 6991 </select> 6992 </div> 6993 6994 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 6995 <!-- Thai Slider: Weight (100â900) --> 6996 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
6997 <div data-component="tt__control-area"> 6998 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 6999 <div class="flex flex-row justify-between"> 7000 <div class="">Width</div> 7001 <div data-component="tt__wdth-value"></div> 7002 </div> 7003 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 7004 </div> 7005 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 7006 <div class="flex flex-row justify-between"> 7007 <div class="">Weight</div> 7008 <div data-component="tt__wght-value"></div> 7009 </div> 7010 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="400" class="typetester-slider w-full" id="typetesterWghtRange"> 7011 </div> 7012 </div> 7013</form> 7014 7015 <!-- Main Content Area --> 7016 <div class="md:ml-[48px] flex w-full justify-center align-middle overflow-x-clip"> 7017 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="he" data-size="s" dir="rtl"></div> 7018 </div> 7019</section> 7020 7021 7022 <!-- Typetester Sample --> 7023<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 7024 <!-- Partial Width Content Area With Section Nav --> 7025 <!-- Section Nav Area --> 7026<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="korean"> 7027 <!-- Select Script--> 7028 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 7029 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 7030 7031 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 7032 Latin 7033 </option> 7034 7035 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 7036 Cyrillic 7037 </option> 7038 7039 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 7040 Greek 7041 </option> 7042 7043 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 7044 Vietnamese 7045 </option> 7046 7047 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 7048 Arabic 7049 </option> 7050 7051 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 7052 Devanagari 7053 </option> 7054 7055 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 7056 Hebrew 7057 </option> 7058 7059 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko" selected="selected"> 7060 Korean 7061 </option> 7062 7063 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 7064 Thai 7065 </option> 7066 </select> 7067 </div> 7068 7069 <!-- Latin: Proportional / Mono Option --> 7070 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 7071 <div class="text-blue hover:text-red pt-1 w-[120px]"> 7072 <!-- I'm sure theres a better way of applying this attribute conditionally --> 7073 7074 <input type="radio" checked="" id="sample-22_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 7075 <label class="nav-radio-label hover:cursor-pointer" for="sample-22_prop-mono_proportional">Proportional</label> 7076</div> 7077 7078 <div class="text-blue hover:text-red pt-1 w-[120px]"> 7079 <!-- I'm sure theres a better way of applying this attribute conditionally --> 7080 7081 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 7082 <input type="radio" id="sample-22_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 7083 <label class="nav-radio-label hover:cursor-pointer" for="sample-22_prop-mono_mono">Monospaced</label> 7084</div> 7085 7086 </fieldset> 7087 7088 <!-- Latin: Upright / Italic Option --> 7089 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 7090 <div class="text-blue hover:text-red pt-1 w-[120px]"> 7091 <!-- I'm sure theres a better way of applying this attribute conditionally --> 7092 7093 <input type="radio" checked="" id="sample-22_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 7094 <label class="nav-radio-label hover:cursor-pointer" for="sample-22_upright-ital_upright">Upright</label> 7095</div> 7096 7097 <div class="text-blue hover:text-red pt-1 w-[120px]"> 7098 <!-- I'm sure theres a better way of applying this attribute conditionally --> 7099 7100 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 7101 <input type="radio" id="sample-22_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 7102 <label class="nav-radio-label hover:cursor-pointer" for="sample-22_upright-ital_italic">Italic</label> 7103</div> 7104 7105 </fieldset> 7106 7107 <!-- Latin: Default / Alternatives Option --> 7108 <!-- Currently Disabled, Too Many Options Syndrome --> 7109 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 7110 <include src="source/html-includes/radio-button.html"> 7111 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 7112 "default", "label": "Default", "checked": true, "namePrefix": "sample-22" } 7113 </include> 7114 <include src="source/html-includes/radio-button.html"> 7115 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 7116 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 7117 "sample-22" } 7118 </include> 7119 </fieldset> --> 7120 7121 <!-- Thai: Looped / Loopless Option --> 7122 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 7123 <div class="text-blue hover:text-red pt-1 w-[120px]"> 7124 <!-- I'm sure theres a better way of applying this attribute conditionally --> 7125 7126 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 7127 <input type="radio" id="sample-22_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 7128 <label class="nav-radio-label hover:cursor-pointer" for="sample-22_looped_looped">Looped</label> 7129</div> 7130 7131 <div class="text-blue hover:text-red pt-1 w-[120px]"> 7132 <!-- I'm sure theres a better way of applying this attribute conditionally --> 7133 7134 <input type="radio" checked="" id="sample-22_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 7135 <label class="nav-radio-label hover:cursor-pointer" for="sample-22_looped_loopless">Loopless</label> 7136</div> 7137 7138 </fieldset> 7139 7140 <!-- Latin Dropdown: Variable + all 84 styles --> 7141 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 7142 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 7143 <option value="variable" selected="selected">Variable</option> 7144 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 7145 Compressed Ultra Light 7146 </option> 7147 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 7148 Compressed Thin 7149 </option> 7150 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 7151 Compressed Light 7152 </option> 7153 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 7154 Compressed Regular 7155 </option> 7156 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 7157 Compressed Medium
7158 </option> 7159 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 7160 Compressed Bold 7161 </option> 7162 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 7163 Compressed Black 7164 </option> 7165 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 7166 Condensed Ultra Light 7167 </option> 7168 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 7169 Condensed Thin 7170 </option> 7171 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 7172 Condensed Light 7173 </option> 7174 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 7175 Condensed Regular 7176 </option> 7177 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 7178 Condensed Medium 7179 </option> 7180 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 7181 Condensed Bold 7182 </option> 7183 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 7184 Condensed Black 7185 </option> 7186 <option value="standard ultra light" data-wght="100" data-wdth="100"> 7187 Standard Ultra Light 7188 </option> 7189 <option value="standard thin" data-wght="200" data-wdth="100"> 7190 Standard Thin 7191 </option> 7192 <option value="standard light" data-wght="300" data-wdth="100"> 7193 Standard Light 7194 </option> 7195 <option value="standard regular" data-wght="400" data-wdth="100"> 7196 Standard Regular 7197 </option> 7198 <option value="standard medium" data-wght="500" data-wdth="100"> 7199 Standard Medium 7200 </option> 7201 <option value="standard bold" data-wght="700" data-wdth="100"> 7202 Standard Bold 7203 </option> 7204 <option value="standard black" data-wght="900" data-wdth="100"> 7205 Standard Black 7206 </option> 7207 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 7208 Extended Ultra Light 7209 </option> 7210 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 7211 Extended Thin 7212 </option> 7213 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 7214 Extended Light 7215 </option> 7216 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 7217 Extended Regular 7218 </option> 7219 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 7220 Extended Medium 7221 </option> 7222 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 7223 Extended Bold 7224 </option> 7225 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 7226 Extended Black 7227 </option> 7228 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 7229 Expanded Ultra Light 7230 </option> 7231 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 7232 Expanded Thin 7233 </option> 7234 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 7235 Expanded Light 7236 </option> 7237 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 7238 Expanded Regular 7239 </option> 7240 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 7241 Expanded Medium 7242 </option> 7243 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 7244 Expanded Bold 7245 </option> 7246 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 7247 Expanded Black 7248 </option> 7249 </select> 7250 </div> 7251 7252 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 7253 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 7254 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 7255 <option value="variable" selected="selected">Variable</option> 7256 <option value="looped ultra light" data-wght="100">Ultra Light</option> 7257 <option value="looped thin" data-wght="200">Thin</option> 7258 <option value="looped light" data-wght="300">Light</option> 7259 <option value="looped regular" data-wght="400">Regular</option> 7260 <option value="looped medium" data-wght="500">Medium</option> 7261 <option value="looped bold" data-wght="700">Bold</option> 7262 <option value="looped black" data-wght="900">Black</option> 7263 </select> 7264 </div> 7265 7266 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 7267 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 7268 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 7269 <option value="variable" selected="selected">Variable</option> 7270 <option value="ultra light" data-wght="100">Ultra Light</option> 7271 <option value="thin" data-wght="200">Thin</option> 7272 <option value="light" data-wght="300">Light</option> 7273 <option value="regular" data-wght="400">Regular</option> 7274 <option value="medium" data-wght="500">Medium</option> 7275 <option value="bold" data-wght="700">Bold</option> 7276 <option value="black" data-wght="900">Black</option> 7277 </select> 7278 </div> 7279 7280 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 7281 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 7282 <option value="variable" selected="selected">Variable</option> 7283 <option value="ultra light" data-wght="100">Ultra Light</option> 7284 <option value="thin" data-wght="200">Thin</option> 7285 <option value="light" data-wght="300">Light</option> 7286 <option value="regular" data-wght="400">Regular</option> 7287 <option value="medium" data-wght="500">Medium</option> 7288 <option value="bold" data-wght="700">Bold</option> 7289 <option value="black" data-wght="900">Black</option> 7290 </select> 7291 </div> 7292 7293 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 7294 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 7295 <option value="variable" selected="selected">Variable</option> 7296 <option value="ultra light" data-wght="100">Ultra Light</option> 7297 <option value="thin" data-wght="200">Thin</option> 7298 <option value="light" data-wght="300">Light</option> 7299 <option value="regular" data-wght="400">Regular</option> 7300 <option value="medium" data-wght="500">Medium</option> 7301 <option value="bold" data-wght="700">Bold</option> 7302 <option value="black" data-wght="900">Black</option> 7303 </select> 7304 </div> 7305 7306 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 7307 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 7308 <option value="variable" selected="selected">Variable</option> 7309 <option value="ultra light" data-wght="100">Ultra Light</option> 7310 <option value="thin" data-wght="200">Thin</option> 7311 <option value="light" data-wght="300">Light</option> 7312 <option value="regular" data-wght="400">Regular</option> 7313 <option value="medium" data-wght="500">Medium</option> 7314 <option value="bold" data-wght="700">Bold</option> 7315 <option value="black" data-wght="900">Black</option> 7316 </select> 7317 </div> 7318 7319 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 7320 <!-- Thai Slider: Weight (100â900) --> 7321 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
7322 <div data-component="tt__control-area"> 7323 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 7324 <div class="flex flex-row justify-between"> 7325 <div class="">Width</div> 7326 <div data-component="tt__wdth-value"></div> 7327 </div> 7328 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 7329 </div> 7330 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 7331 <div class="flex flex-row justify-between"> 7332 <div class="">Weight</div> 7333 <div data-component="tt__wght-value"></div> 7334 </div> 7335 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="900" class="typetester-slider w-full" id="typetesterWghtRange"> 7336 </div> 7337 </div> 7338</form> 7339 7340 <!-- Main Content Area --> 7341 <div class="md:ml-[48px] flex w-full justify-center align-middle overflow-x-clip"> 7342 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="ko" data-size="l"></div> 7343 </div> 7344</section> 7345 7346 7347 <!-- Typetester Sample --> 7348<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 7349 <!-- Partial Width Content Area With Section Nav --> 7350 <!-- Section Nav Area --> 7351<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="korean"> 7352 <!-- Select Script--> 7353 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 7354 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 7355 7356 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 7357 Latin 7358 </option> 7359 7360 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 7361 Cyrillic 7362 </option> 7363 7364 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 7365 Greek 7366 </option> 7367 7368 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 7369 Vietnamese 7370 </option> 7371 7372 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 7373 Arabic 7374 </option> 7375 7376 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 7377 Devanagari 7378 </option> 7379 7380 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 7381 Hebrew 7382 </option> 7383 7384 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko" selected="selected"> 7385 Korean 7386 </option> 7387 7388 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 7389 Thai 7390 </option> 7391 </select> 7392 </div> 7393 7394 <!-- Latin: Proportional / Mono Option --> 7395 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 7396 <div class="text-blue hover:text-red pt-1 w-[120px]"> 7397 <!-- I'm sure theres a better way of applying this attribute conditionally --> 7398 7399 <input type="radio" checked="" id="sample-23_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 7400 <label class="nav-radio-label hover:cursor-pointer" for="sample-23_prop-mono_proportional">Proportional</label> 7401</div> 7402 7403 <div class="text-blue hover:text-red pt-1 w-[120px]"> 7404 <!-- I'm sure theres a better way of applying this attribute conditionally --> 7405 7406 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 7407 <input type="radio" id="sample-23_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 7408 <label class="nav-radio-label hover:cursor-pointer" for="sample-23_prop-mono_mono">Monospaced</label> 7409</div> 7410 7411 </fieldset> 7412 7413 <!-- Latin: Upright / Italic Option --> 7414 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 7415 <div class="text-blue hover:text-red pt-1 w-[120px]"> 7416 <!-- I'm sure theres a better way of applying this attribute conditionally --> 7417 7418 <input type="radio" checked="" id="sample-23_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 7419 <label class="nav-radio-label hover:cursor-pointer" for="sample-23_upright-ital_upright">Upright</label> 7420</div> 7421 7422 <div class="text-blue hover:text-red pt-1 w-[120px]"> 7423 <!-- I'm sure theres a better way of applying this attribute conditionally --> 7424 7425 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 7426 <input type="radio" id="sample-23_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 7427 <label class="nav-radio-label hover:cursor-pointer" for="sample-23_upright-ital_italic">Italic</label> 7428</div> 7429 7430 </fieldset> 7431 7432 <!-- Latin: Default / Alternatives Option --> 7433 <!-- Currently Disabled, Too Many Options Syndrome --> 7434 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 7435 <include src="source/html-includes/radio-button.html"> 7436 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 7437 "default", "label": "Default", "checked": true, "namePrefix": "sample-23" } 7438 </include> 7439 <include src="source/html-includes/radio-button.html"> 7440 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 7441 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 7442 "sample-23" } 7443 </include> 7444 </fieldset> --> 7445 7446 <!-- Thai: Looped / Loopless Option --> 7447 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 7448 <div class="text-blue hover:text-red pt-1 w-[120px]"> 7449 <!-- I'm sure theres a better way of applying this attribute conditionally --> 7450 7451 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 7452 <input type="radio" id="sample-23_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 7453 <label class="nav-radio-label hover:cursor-pointer" for="sample-23_looped_looped">Looped</label> 7454</div> 7455 7456 <div class="text-blue hover:text-red pt-1 w-[120px]"> 7457 <!-- I'm sure theres a better way of applying this attribute conditionally --> 7458 7459 <input type="radio" checked="" id="sample-23_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 7460 <label class="nav-radio-label hover:cursor-pointer" for="sample-23_looped_loopless">Loopless</label> 7461</div> 7462 7463 </fieldset> 7464 7465 <!-- Latin Dropdown: Variable + all 84 styles --> 7466 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 7467 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 7468 <option value="variable" selected="selected">Variable</option> 7469 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 7470 Compressed Ultra Light 7471 </option> 7472 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 7473 Compressed Thin 7474 </option> 7475 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 7476 Compressed Light 7477 </option> 7478 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 7479 Compressed Regular 7480 </option> 7481 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 7482 Compressed Medium
7483 </option> 7484 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 7485 Compressed Bold 7486 </option> 7487 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 7488 Compressed Black 7489 </option> 7490 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 7491 Condensed Ultra Light 7492 </option> 7493 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 7494 Condensed Thin 7495 </option> 7496 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 7497 Condensed Light 7498 </option> 7499 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 7500 Condensed Regular 7501 </option> 7502 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 7503 Condensed Medium 7504 </option> 7505 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 7506 Condensed Bold 7507 </option> 7508 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 7509 Condensed Black 7510 </option> 7511 <option value="standard ultra light" data-wght="100" data-wdth="100"> 7512 Standard Ultra Light 7513 </option> 7514 <option value="standard thin" data-wght="200" data-wdth="100"> 7515 Standard Thin 7516 </option> 7517 <option value="standard light" data-wght="300" data-wdth="100"> 7518 Standard Light 7519 </option> 7520 <option value="standard regular" data-wght="400" data-wdth="100"> 7521 Standard Regular 7522 </option> 7523 <option value="standard medium" data-wght="500" data-wdth="100"> 7524 Standard Medium 7525 </option> 7526 <option value="standard bold" data-wght="700" data-wdth="100"> 7527 Standard Bold 7528 </option> 7529 <option value="standard black" data-wght="900" data-wdth="100"> 7530 Standard Black 7531 </option> 7532 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 7533 Extended Ultra Light 7534 </option> 7535 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 7536 Extended Thin 7537 </option> 7538 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 7539 Extended Light 7540 </option> 7541 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 7542 Extended Regular 7543 </option> 7544 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 7545 Extended Medium 7546 </option> 7547 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 7548 Extended Bold 7549 </option> 7550 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 7551 Extended Black 7552 </option> 7553 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 7554 Expanded Ultra Light 7555 </option> 7556 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 7557 Expanded Thin 7558 </option> 7559 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 7560 Expanded Light 7561 </option> 7562 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 7563 Expanded Regular 7564 </option> 7565 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 7566 Expanded Medium 7567 </option> 7568 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 7569 Expanded Bold 7570 </option> 7571 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 7572 Expanded Black 7573 </option> 7574 </select> 7575 </div> 7576 7577 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 7578 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 7579 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 7580 <option value="variable" selected="selected">Variable</option> 7581 <option value="looped ultra light" data-wght="100">Ultra Light</option> 7582 <option value="looped thin" data-wght="200">Thin</option> 7583 <option value="looped light" data-wght="300">Light</option> 7584 <option value="looped regular" data-wght="400">Regular</option> 7585 <option value="looped medium" data-wght="500">Medium</option> 7586 <option value="looped bold" data-wght="700">Bold</option> 7587 <option value="looped black" data-wght="900">Black</option> 7588 </select> 7589 </div> 7590 7591 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 7592 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 7593 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 7594 <option value="variable" selected="selected">Variable</option> 7595 <option value="ultra light" data-wght="100">Ultra Light</option> 7596 <option value="thin" data-wght="200">Thin</option> 7597 <option value="light" data-wght="300">Light</option> 7598 <option value="regular" data-wght="400">Regular</option> 7599 <option value="medium" data-wght="500">Medium</option> 7600 <option value="bold" data-wght="700">Bold</option> 7601 <option value="black" data-wght="900">Black</option> 7602 </select> 7603 </div> 7604 7605 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 7606 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 7607 <option value="variable" selected="selected">Variable</option> 7608 <option value="ultra light" data-wght="100">Ultra Light</option> 7609 <option value="thin" data-wght="200">Thin</option> 7610 <option value="light" data-wght="300">Light</option> 7611 <option value="regular" data-wght="400">Regular</option> 7612 <option value="medium" data-wght="500">Medium</option> 7613 <option value="bold" data-wght="700">Bold</option> 7614 <option value="black" data-wght="900">Black</option> 7615 </select> 7616 </div> 7617 7618 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 7619 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 7620 <option value="variable" selected="selected">Variable</option> 7621 <option value="ultra light" data-wght="100">Ultra Light</option> 7622 <option value="thin" data-wght="200">Thin</option> 7623 <option value="light" data-wght="300">Light</option> 7624 <option value="regular" data-wght="400">Regular</option> 7625 <option value="medium" data-wght="500">Medium</option> 7626 <option value="bold" data-wght="700">Bold</option> 7627 <option value="black" data-wght="900">Black</option> 7628 </select> 7629 </div> 7630 7631 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 7632 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 7633 <option value="variable" selected="selected">Variable</option> 7634 <option value="ultra light" data-wght="100">Ultra Light</option> 7635 <option value="thin" data-wght="200">Thin</option> 7636 <option value="light" data-wght="300">Light</option> 7637 <option value="regular" data-wght="400">Regular</option> 7638 <option value="medium" data-wght="500">Medium</option> 7639 <option value="bold" data-wght="700">Bold</option> 7640 <option value="black" data-wght="900">Black</option> 7641 </select> 7642 </div> 7643 7644 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 7645 <!-- Thai Slider: Weight (100â900) --> 7646 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
7647 <div data-component="tt__control-area"> 7648 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 7649 <div class="flex flex-row justify-between"> 7650 <div class="">Width</div> 7651 <div data-component="tt__wdth-value"></div> 7652 </div> 7653 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 7654 </div> 7655 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 7656 <div class="flex flex-row justify-between"> 7657 <div class="">Weight</div> 7658 <div data-component="tt__wght-value"></div> 7659 </div> 7660 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="700" class="typetester-slider w-full" id="typetesterWghtRange"> 7661 </div> 7662 </div> 7663</form> 7664 7665 <!-- Main Content Area --> 7666 <div class="md:ml-[48px] flex w-full justify-center align-middle overflow-x-clip"> 7667 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="ko" data-size="m"></div> 7668 </div> 7669</section> 7670 7671 7672 <!-- Typetester Sample --> 7673<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 7674 <!-- Partial Width Content Area With Section Nav --> 7675 <!-- Section Nav Area --> 7676<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="korean"> 7677 <!-- Select Script--> 7678 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 7679 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 7680 7681 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 7682 Latin 7683 </option> 7684 7685 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 7686 Cyrillic 7687 </option> 7688 7689 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 7690 Greek 7691 </option> 7692 7693 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 7694 Vietnamese 7695 </option> 7696 7697 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 7698 Arabic 7699 </option> 7700 7701 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 7702 Devanagari 7703 </option> 7704 7705 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 7706 Hebrew 7707 </option> 7708 7709 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko" selected="selected"> 7710 Korean 7711 </option> 7712 7713 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th"> 7714 Thai 7715 </option> 7716 </select> 7717 </div> 7718 7719 <!-- Latin: Proportional / Mono Option --> 7720 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 7721 <div class="text-blue hover:text-red pt-1 w-[120px]"> 7722 <!-- I'm sure theres a better way of applying this attribute conditionally --> 7723 7724 <input type="radio" checked="" id="sample-24_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 7725 <label class="nav-radio-label hover:cursor-pointer" for="sample-24_prop-mono_proportional">Proportional</label> 7726</div> 7727 7728 <div class="text-blue hover:text-red pt-1 w-[120px]"> 7729 <!-- I'm sure theres a better way of applying this attribute conditionally --> 7730 7731 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 7732 <input type="radio" id="sample-24_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 7733 <label class="nav-radio-label hover:cursor-pointer" for="sample-24_prop-mono_mono">Monospaced</label> 7734</div> 7735 7736 </fieldset> 7737 7738 <!-- Latin: Upright / Italic Option --> 7739 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 7740 <div class="text-blue hover:text-red pt-1 w-[120px]"> 7741 <!-- I'm sure theres a better way of applying this attribute conditionally --> 7742 7743 <input type="radio" checked="" id="sample-24_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 7744 <label class="nav-radio-label hover:cursor-pointer" for="sample-24_upright-ital_upright">Upright</label> 7745</div> 7746 7747 <div class="text-blue hover:text-red pt-1 w-[120px]"> 7748 <!-- I'm sure theres a better way of applying this attribute conditionally --> 7749 7750 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 7751 <input type="radio" id="sample-24_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 7752 <label class="nav-radio-label hover:cursor-pointer" for="sample-24_upright-ital_italic">Italic</label> 7753</div> 7754 7755 </fieldset> 7756 7757 <!-- Latin: Default / Alternatives Option --> 7758 <!-- Currently Disabled, Too Many Options Syndrome --> 7759 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 7760 <include src="source/html-includes/radio-button.html"> 7761 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 7762 "default", "label": "Default", "checked": true, "namePrefix": "sample-24" } 7763 </include> 7764 <include src="source/html-includes/radio-button.html"> 7765 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 7766 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 7767 "sample-24" } 7768 </include> 7769 </fieldset> --> 7770 7771 <!-- Thai: Looped / Loopless Option --> 7772 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 7773 <div class="text-blue hover:text-red pt-1 w-[120px]"> 7774 <!-- I'm sure theres a better way of applying this attribute conditionally --> 7775 7776 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 7777 <input type="radio" id="sample-24_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 7778 <label class="nav-radio-label hover:cursor-pointer" for="sample-24_looped_looped">Looped</label> 7779</div> 7780 7781 <div class="text-blue hover:text-red pt-1 w-[120px]"> 7782 <!-- I'm sure theres a better way of applying this attribute conditionally --> 7783 7784 <input type="radio" checked="" id="sample-24_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 7785 <label class="nav-radio-label hover:cursor-pointer" for="sample-24_looped_loopless">Loopless</label> 7786</div> 7787 7788 </fieldset> 7789 7790 <!-- Latin Dropdown: Variable + all 84 styles --> 7791 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 7792 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 7793 <option value="variable" selected="selected">Variable</option> 7794 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 7795 Compressed Ultra Light 7796 </option> 7797 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 7798 Compressed Thin 7799 </option> 7800 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 7801 Compressed Light 7802 </option> 7803 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 7804 Compressed Regular 7805 </option> 7806 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 7807 Compressed Medium
7808 </option> 7809 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 7810 Compressed Bold 7811 </option> 7812 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 7813 Compressed Black 7814 </option> 7815 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 7816 Condensed Ultra Light 7817 </option> 7818 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 7819 Condensed Thin 7820 </option> 7821 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 7822 Condensed Light 7823 </option> 7824 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 7825 Condensed Regular 7826 </option> 7827 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 7828 Condensed Medium 7829 </option> 7830 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 7831 Condensed Bold 7832 </option> 7833 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 7834 Condensed Black 7835 </option> 7836 <option value="standard ultra light" data-wght="100" data-wdth="100"> 7837 Standard Ultra Light 7838 </option> 7839 <option value="standard thin" data-wght="200" data-wdth="100"> 7840 Standard Thin 7841 </option> 7842 <option value="standard light" data-wght="300" data-wdth="100"> 7843 Standard Light 7844 </option> 7845 <option value="standard regular" data-wght="400" data-wdth="100"> 7846 Standard Regular 7847 </option> 7848 <option value="standard medium" data-wght="500" data-wdth="100"> 7849 Standard Medium 7850 </option> 7851 <option value="standard bold" data-wght="700" data-wdth="100"> 7852 Standard Bold 7853 </option> 7854 <option value="standard black" data-wght="900" data-wdth="100"> 7855 Standard Black 7856 </option> 7857 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 7858 Extended Ultra Light 7859 </option> 7860 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 7861 Extended Thin 7862 </option> 7863 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 7864 Extended Light 7865 </option> 7866 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 7867 Extended Regular 7868 </option> 7869 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 7870 Extended Medium 7871 </option> 7872 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 7873 Extended Bold 7874 </option> 7875 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 7876 Extended Black 7877 </option> 7878 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 7879 Expanded Ultra Light 7880 </option> 7881 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 7882 Expanded Thin 7883 </option> 7884 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 7885 Expanded Light 7886 </option> 7887 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 7888 Expanded Regular 7889 </option> 7890 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 7891 Expanded Medium 7892 </option> 7893 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 7894 Expanded Bold 7895 </option> 7896 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 7897 Expanded Black 7898 </option> 7899 </select> 7900 </div> 7901 7902 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 7903 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 7904 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 7905 <option value="variable" selected="selected">Variable</option> 7906 <option value="looped ultra light" data-wght="100">Ultra Light</option> 7907 <option value="looped thin" data-wght="200">Thin</option> 7908 <option value="looped light" data-wght="300">Light</option> 7909 <option value="looped regular" data-wght="400">Regular</option> 7910 <option value="looped medium" data-wght="500">Medium</option> 7911 <option value="looped bold" data-wght="700">Bold</option> 7912 <option value="looped black" data-wght="900">Black</option> 7913 </select> 7914 </div> 7915 7916 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 7917 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 7918 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 7919 <option value="variable" selected="selected">Variable</option> 7920 <option value="ultra light" data-wght="100">Ultra Light</option> 7921 <option value="thin" data-wght="200">Thin</option> 7922 <option value="light" data-wght="300">Light</option> 7923 <option value="regular" data-wght="400">Regular</option> 7924 <option value="medium" data-wght="500">Medium</option> 7925 <option value="bold" data-wght="700">Bold</option> 7926 <option value="black" data-wght="900">Black</option> 7927 </select> 7928 </div> 7929 7930 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 7931 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 7932 <option value="variable" selected="selected">Variable</option> 7933 <option value="ultra light" data-wght="100">Ultra Light</option> 7934 <option value="thin" data-wght="200">Thin</option> 7935 <option value="light" data-wght="300">Light</option> 7936 <option value="regular" data-wght="400">Regular</option> 7937 <option value="medium" data-wght="500">Medium</option> 7938 <option value="bold" data-wght="700">Bold</option> 7939 <option value="black" data-wght="900">Black</option> 7940 </select> 7941 </div> 7942 7943 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 7944 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 7945 <option value="variable" selected="selected">Variable</option> 7946 <option value="ultra light" data-wght="100">Ultra Light</option> 7947 <option value="thin" data-wght="200">Thin</option> 7948 <option value="light" data-wght="300">Light</option> 7949 <option value="regular" data-wght="400">Regular</option> 7950 <option value="medium" data-wght="500">Medium</option> 7951 <option value="bold" data-wght="700">Bold</option> 7952 <option value="black" data-wght="900">Black</option> 7953 </select> 7954 </div> 7955 7956 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 7957 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 7958 <option value="variable" selected="selected">Variable</option> 7959 <option value="ultra light" data-wght="100">Ultra Light</option> 7960 <option value="thin" data-wght="200">Thin</option> 7961 <option value="light" data-wght="300">Light</option> 7962 <option value="regular" data-wght="400">Regular</option> 7963 <option value="medium" data-wght="500">Medium</option> 7964 <option value="bold" data-wght="700">Bold</option> 7965 <option value="black" data-wght="900">Black</option> 7966 </select> 7967 </div> 7968 7969 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 7970 <!-- Thai Slider: Weight (100â900) --> 7971 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
7972 <div data-component="tt__control-area"> 7973 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 7974 <div class="flex flex-row justify-between"> 7975 <div class="">Width</div> 7976 <div data-component="tt__wdth-value"></div> 7977 </div> 7978 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 7979 </div> 7980 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 7981 <div class="flex flex-row justify-between"> 7982 <div class="">Weight</div> 7983 <div data-component="tt__wght-value"></div> 7984 </div> 7985 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="400" class="typetester-slider w-full" id="typetesterWghtRange"> 7986 </div> 7987 </div> 7988</form> 7989 7990 <!-- Main Content Area --> 7991 <div class="md:ml-[48px] flex w-full justify-center align-middle overflow-x-clip"> 7992 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="ko" data-size="s"></div> 7993 </div> 7994</section> 7995 7996 7997 <!-- Typetester Sample --> 7998<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 7999 <!-- Partial Width Content Area With Section Nav --> 8000 <!-- Section Nav Area --> 8001<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="thai"> 8002 <!-- Select Script--> 8003 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 8004 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 8005 8006 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 8007 Latin 8008 </option> 8009 8010 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 8011 Cyrillic 8012 </option> 8013 8014 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 8015 Greek 8016 </option> 8017 8018 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 8019 Vietnamese 8020 </option> 8021 8022 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 8023 Arabic 8024 </option> 8025 8026 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 8027 Devanagari 8028 </option> 8029 8030 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 8031 Hebrew 8032 </option> 8033 8034 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 8035 Korean 8036 </option> 8037 8038 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th" selected="selected"> 8039 Thai 8040 </option> 8041 </select> 8042 </div> 8043 8044 <!-- Latin: Proportional / Mono Option --> 8045 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 8046 <div class="text-blue hover:text-red pt-1 w-[120px]"> 8047 <!-- I'm sure theres a better way of applying this attribute conditionally --> 8048 8049 <input type="radio" checked="" id="sample-25_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 8050 <label class="nav-radio-label hover:cursor-pointer" for="sample-25_prop-mono_proportional">Proportional</label> 8051</div> 8052 8053 <div class="text-blue hover:text-red pt-1 w-[120px]"> 8054 <!-- I'm sure theres a better way of applying this attribute conditionally --> 8055 8056 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 8057 <input type="radio" id="sample-25_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 8058 <label class="nav-radio-label hover:cursor-pointer" for="sample-25_prop-mono_mono">Monospaced</label> 8059</div> 8060 8061 </fieldset> 8062 8063 <!-- Latin: Upright / Italic Option --> 8064 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 8065 <div class="text-blue hover:text-red pt-1 w-[120px]"> 8066 <!-- I'm sure theres a better way of applying this attribute conditionally --> 8067 8068 <input type="radio" checked="" id="sample-25_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 8069 <label class="nav-radio-label hover:cursor-pointer" for="sample-25_upright-ital_upright">Upright</label> 8070</div> 8071 8072 <div class="text-blue hover:text-red pt-1 w-[120px]"> 8073 <!-- I'm sure theres a better way of applying this attribute conditionally --> 8074 8075 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 8076 <input type="radio" id="sample-25_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 8077 <label class="nav-radio-label hover:cursor-pointer" for="sample-25_upright-ital_italic">Italic</label> 8078</div> 8079 8080 </fieldset> 8081 8082 <!-- Latin: Default / Alternatives Option --> 8083 <!-- Currently Disabled, Too Many Options Syndrome --> 8084 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 8085 <include src="source/html-includes/radio-button.html"> 8086 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 8087 "default", "label": "Default", "checked": true, "namePrefix": "sample-25" } 8088 </include> 8089 <include src="source/html-includes/radio-button.html"> 8090 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 8091 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 8092 "sample-25" } 8093 </include> 8094 </fieldset> --> 8095 8096 <!-- Thai: Looped / Loopless Option --> 8097 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 8098 <div class="text-blue hover:text-red pt-1 w-[120px]"> 8099 <!-- I'm sure theres a better way of applying this attribute conditionally --> 8100 8101 <input type="radio" checked="" id="sample-25_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 8102 <label class="nav-radio-label hover:cursor-pointer" for="sample-25_looped_looped">Looped</label> 8103</div> 8104 8105 <div class="text-blue hover:text-red pt-1 w-[120px]"> 8106 <!-- I'm sure theres a better way of applying this attribute conditionally --> 8107 8108 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 8109 <input type="radio" id="sample-25_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 8110 <label class="nav-radio-label hover:cursor-pointer" for="sample-25_looped_loopless">Loopless</label> 8111</div> 8112 8113 </fieldset> 8114 8115 <!-- Latin Dropdown: Variable + all 84 styles --> 8116 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 8117 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 8118 <option value="variable" selected="selected">Variable</option> 8119 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 8120 Compressed Ultra Light 8121 </option> 8122 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 8123 Compressed Thin 8124 </option> 8125 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 8126 Compressed Light 8127 </option> 8128 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 8129 Compressed Regular 8130 </option> 8131 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 8132 Compressed Medium
8133 </option> 8134 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 8135 Compressed Bold 8136 </option> 8137 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 8138 Compressed Black 8139 </option> 8140 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 8141 Condensed Ultra Light 8142 </option> 8143 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 8144 Condensed Thin 8145 </option> 8146 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 8147 Condensed Light 8148 </option> 8149 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 8150 Condensed Regular 8151 </option> 8152 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 8153 Condensed Medium 8154 </option> 8155 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 8156 Condensed Bold 8157 </option> 8158 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 8159 Condensed Black 8160 </option> 8161 <option value="standard ultra light" data-wght="100" data-wdth="100"> 8162 Standard Ultra Light 8163 </option> 8164 <option value="standard thin" data-wght="200" data-wdth="100"> 8165 Standard Thin 8166 </option> 8167 <option value="standard light" data-wght="300" data-wdth="100"> 8168 Standard Light 8169 </option> 8170 <option value="standard regular" data-wght="400" data-wdth="100"> 8171 Standard Regular 8172 </option> 8173 <option value="standard medium" data-wght="500" data-wdth="100"> 8174 Standard Medium 8175 </option> 8176 <option value="standard bold" data-wght="700" data-wdth="100"> 8177 Standard Bold 8178 </option> 8179 <option value="standard black" data-wght="900" data-wdth="100"> 8180 Standard Black 8181 </option> 8182 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 8183 Extended Ultra Light 8184 </option> 8185 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 8186 Extended Thin 8187 </option> 8188 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 8189 Extended Light 8190 </option> 8191 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 8192 Extended Regular 8193 </option> 8194 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 8195 Extended Medium 8196 </option> 8197 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 8198 Extended Bold 8199 </option> 8200 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 8201 Extended Black 8202 </option> 8203 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 8204 Expanded Ultra Light 8205 </option> 8206 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 8207 Expanded Thin 8208 </option> 8209 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 8210 Expanded Light 8211 </option> 8212 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 8213 Expanded Regular 8214 </option> 8215 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 8216 Expanded Medium 8217 </option> 8218 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 8219 Expanded Bold 8220 </option> 8221 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 8222 Expanded Black 8223 </option> 8224 </select> 8225 </div> 8226 8227 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 8228 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 8229 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 8230 <option value="variable" selected="selected">Variable</option> 8231 <option value="looped ultra light" data-wght="100">Ultra Light</option> 8232 <option value="looped thin" data-wght="200">Thin</option> 8233 <option value="looped light" data-wght="300">Light</option> 8234 <option value="looped regular" data-wght="400">Regular</option> 8235 <option value="looped medium" data-wght="500">Medium</option> 8236 <option value="looped bold" data-wght="700">Bold</option> 8237 <option value="looped black" data-wght="900">Black</option> 8238 </select> 8239 </div> 8240 8241 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 8242 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 8243 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 8244 <option value="variable" selected="selected">Variable</option> 8245 <option value="ultra light" data-wght="100">Ultra Light</option> 8246 <option value="thin" data-wght="200">Thin</option> 8247 <option value="light" data-wght="300">Light</option> 8248 <option value="regular" data-wght="400">Regular</option> 8249 <option value="medium" data-wght="500">Medium</option> 8250 <option value="bold" data-wght="700">Bold</option> 8251 <option value="black" data-wght="900">Black</option> 8252 </select> 8253 </div> 8254 8255 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 8256 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 8257 <option value="variable" selected="selected">Variable</option> 8258 <option value="ultra light" data-wght="100">Ultra Light</option> 8259 <option value="thin" data-wght="200">Thin</option> 8260 <option value="light" data-wght="300">Light</option> 8261 <option value="regular" data-wght="400">Regular</option> 8262 <option value="medium" data-wght="500">Medium</option> 8263 <option value="bold" data-wght="700">Bold</option> 8264 <option value="black" data-wght="900">Black</option> 8265 </select> 8266 </div> 8267 8268 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 8269 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 8270 <option value="variable" selected="selected">Variable</option> 8271 <option value="ultra light" data-wght="100">Ultra Light</option> 8272 <option value="thin" data-wght="200">Thin</option> 8273 <option value="light" data-wght="300">Light</option> 8274 <option value="regular" data-wght="400">Regular</option> 8275 <option value="medium" data-wght="500">Medium</option> 8276 <option value="bold" data-wght="700">Bold</option> 8277 <option value="black" data-wght="900">Black</option> 8278 </select> 8279 </div> 8280 8281 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 8282 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 8283 <option value="variable" selected="selected">Variable</option> 8284 <option value="ultra light" data-wght="100">Ultra Light</option> 8285 <option value="thin" data-wght="200">Thin</option> 8286 <option value="light" data-wght="300">Light</option> 8287 <option value="regular" data-wght="400">Regular</option> 8288 <option value="medium" data-wght="500">Medium</option> 8289 <option value="bold" data-wght="700">Bold</option> 8290 <option value="black" data-wght="900">Black</option> 8291 </select> 8292 </div> 8293 8294 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 8295 <!-- Thai Slider: Weight (100â900) --> 8296 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
8297 <div data-component="tt__control-area"> 8298 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 8299 <div class="flex flex-row justify-between"> 8300 <div class="">Width</div> 8301 <div data-component="tt__wdth-value"></div> 8302 </div> 8303 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 8304 </div> 8305 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 8306 <div class="flex flex-row justify-between"> 8307 <div class="">Weight</div> 8308 <div data-component="tt__wght-value"></div> 8309 </div> 8310 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="900" class="typetester-slider w-full" id="typetesterWghtRange"> 8311 </div> 8312 </div> 8313</form> 8314 8315 <!-- Main Content Area --> 8316 <div class="md:ml-[48px] flex w-full justify-center align-middle"> 8317 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="th" data-size="l"></div> 8318 </div> 8319</section> 8320 8321 8322 <!-- Typetester Sample --> 8323<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 8324 <!-- Partial Width Content Area With Section Nav --> 8325 <!-- Section Nav Area --> 8326<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="thai"> 8327 <!-- Select Script--> 8328 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 8329 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 8330 8331 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 8332 Latin 8333 </option> 8334 8335 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 8336 Cyrillic 8337 </option> 8338 8339 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 8340 Greek 8341 </option> 8342 8343 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 8344 Vietnamese 8345 </option> 8346 8347 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 8348 Arabic 8349 </option> 8350 8351 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 8352 Devanagari 8353 </option> 8354 8355 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 8356 Hebrew 8357 </option> 8358 8359 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 8360 Korean 8361 </option> 8362 8363 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th" selected="selected"> 8364 Thai 8365 </option> 8366 </select> 8367 </div> 8368 8369 <!-- Latin: Proportional / Mono Option --> 8370 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 8371 <div class="text-blue hover:text-red pt-1 w-[120px]"> 8372 <!-- I'm sure theres a better way of applying this attribute conditionally --> 8373 8374 <input type="radio" checked="" id="sample-26_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 8375 <label class="nav-radio-label hover:cursor-pointer" for="sample-26_prop-mono_proportional">Proportional</label> 8376</div> 8377 8378 <div class="text-blue hover:text-red pt-1 w-[120px]"> 8379 <!-- I'm sure theres a better way of applying this attribute conditionally --> 8380 8381 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 8382 <input type="radio" id="sample-26_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 8383 <label class="nav-radio-label hover:cursor-pointer" for="sample-26_prop-mono_mono">Monospaced</label> 8384</div> 8385 8386 </fieldset> 8387 8388 <!-- Latin: Upright / Italic Option --> 8389 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 8390 <div class="text-blue hover:text-red pt-1 w-[120px]"> 8391 <!-- I'm sure theres a better way of applying this attribute conditionally --> 8392 8393 <input type="radio" checked="" id="sample-26_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 8394 <label class="nav-radio-label hover:cursor-pointer" for="sample-26_upright-ital_upright">Upright</label> 8395</div> 8396 8397 <div class="text-blue hover:text-red pt-1 w-[120px]"> 8398 <!-- I'm sure theres a better way of applying this attribute conditionally --> 8399 8400 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 8401 <input type="radio" id="sample-26_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 8402 <label class="nav-radio-label hover:cursor-pointer" for="sample-26_upright-ital_italic">Italic</label> 8403</div> 8404 8405 </fieldset> 8406 8407 <!-- Latin: Default / Alternatives Option --> 8408 <!-- Currently Disabled, Too Many Options Syndrome --> 8409 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 8410 <include src="source/html-includes/radio-button.html"> 8411 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 8412 "default", "label": "Default", "checked": true, "namePrefix": "sample-26" } 8413 </include> 8414 <include src="source/html-includes/radio-button.html"> 8415 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 8416 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 8417 "sample-26" } 8418 </include> 8419 </fieldset> --> 8420 8421 <!-- Thai: Looped / Loopless Option --> 8422 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 8423 <div class="text-blue hover:text-red pt-1 w-[120px]"> 8424 <!-- I'm sure theres a better way of applying this attribute conditionally --> 8425 8426 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 8427 <input type="radio" id="sample-26_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 8428 <label class="nav-radio-label hover:cursor-pointer" for="sample-26_looped_looped">Looped</label> 8429</div> 8430 8431 <div class="text-blue hover:text-red pt-1 w-[120px]"> 8432 <!-- I'm sure theres a better way of applying this attribute conditionally --> 8433 8434 <input type="radio" checked="" id="sample-26_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 8435 <label class="nav-radio-label hover:cursor-pointer" for="sample-26_looped_loopless">Loopless</label> 8436</div> 8437 8438 </fieldset> 8439 8440 <!-- Latin Dropdown: Variable + all 84 styles --> 8441 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 8442 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 8443 <option value="variable" selected="selected">Variable</option> 8444 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 8445 Compressed Ultra Light 8446 </option> 8447 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 8448 Compressed Thin 8449 </option> 8450 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 8451 Compressed Light 8452 </option> 8453 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 8454 Compressed Regular 8455 </option> 8456 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 8457 Compressed Medium
8458 </option> 8459 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 8460 Compressed Bold 8461 </option> 8462 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 8463 Compressed Black 8464 </option> 8465 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 8466 Condensed Ultra Light 8467 </option> 8468 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 8469 Condensed Thin 8470 </option> 8471 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 8472 Condensed Light 8473 </option> 8474 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 8475 Condensed Regular 8476 </option> 8477 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 8478 Condensed Medium 8479 </option> 8480 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 8481 Condensed Bold 8482 </option> 8483 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 8484 Condensed Black 8485 </option> 8486 <option value="standard ultra light" data-wght="100" data-wdth="100"> 8487 Standard Ultra Light 8488 </option> 8489 <option value="standard thin" data-wght="200" data-wdth="100"> 8490 Standard Thin 8491 </option> 8492 <option value="standard light" data-wght="300" data-wdth="100"> 8493 Standard Light 8494 </option> 8495 <option value="standard regular" data-wght="400" data-wdth="100"> 8496 Standard Regular 8497 </option> 8498 <option value="standard medium" data-wght="500" data-wdth="100"> 8499 Standard Medium 8500 </option> 8501 <option value="standard bold" data-wght="700" data-wdth="100"> 8502 Standard Bold 8503 </option> 8504 <option value="standard black" data-wght="900" data-wdth="100"> 8505 Standard Black 8506 </option> 8507 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 8508 Extended Ultra Light 8509 </option> 8510 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 8511 Extended Thin 8512 </option> 8513 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 8514 Extended Light 8515 </option> 8516 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 8517 Extended Regular 8518 </option> 8519 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 8520 Extended Medium 8521 </option> 8522 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 8523 Extended Bold 8524 </option> 8525 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 8526 Extended Black 8527 </option> 8528 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 8529 Expanded Ultra Light 8530 </option> 8531 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 8532 Expanded Thin 8533 </option> 8534 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 8535 Expanded Light 8536 </option> 8537 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 8538 Expanded Regular 8539 </option> 8540 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 8541 Expanded Medium 8542 </option> 8543 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 8544 Expanded Bold 8545 </option> 8546 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 8547 Expanded Black 8548 </option> 8549 </select> 8550 </div> 8551 8552 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 8553 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 8554 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 8555 <option value="variable" selected="selected">Variable</option> 8556 <option value="looped ultra light" data-wght="100">Ultra Light</option> 8557 <option value="looped thin" data-wght="200">Thin</option> 8558 <option value="looped light" data-wght="300">Light</option> 8559 <option value="looped regular" data-wght="400">Regular</option> 8560 <option value="looped medium" data-wght="500">Medium</option> 8561 <option value="looped bold" data-wght="700">Bold</option> 8562 <option value="looped black" data-wght="900">Black</option> 8563 </select> 8564 </div> 8565 8566 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 8567 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 8568 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 8569 <option value="variable" selected="selected">Variable</option> 8570 <option value="ultra light" data-wght="100">Ultra Light</option> 8571 <option value="thin" data-wght="200">Thin</option> 8572 <option value="light" data-wght="300">Light</option> 8573 <option value="regular" data-wght="400">Regular</option> 8574 <option value="medium" data-wght="500">Medium</option> 8575 <option value="bold" data-wght="700">Bold</option> 8576 <option value="black" data-wght="900">Black</option> 8577 </select> 8578 </div> 8579 8580 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 8581 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 8582 <option value="variable" selected="selected">Variable</option> 8583 <option value="ultra light" data-wght="100">Ultra Light</option> 8584 <option value="thin" data-wght="200">Thin</option> 8585 <option value="light" data-wght="300">Light</option> 8586 <option value="regular" data-wght="400">Regular</option> 8587 <option value="medium" data-wght="500">Medium</option> 8588 <option value="bold" data-wght="700">Bold</option> 8589 <option value="black" data-wght="900">Black</option> 8590 </select> 8591 </div> 8592 8593 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 8594 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 8595 <option value="variable" selected="selected">Variable</option> 8596 <option value="ultra light" data-wght="100">Ultra Light</option> 8597 <option value="thin" data-wght="200">Thin</option> 8598 <option value="light" data-wght="300">Light</option> 8599 <option value="regular" data-wght="400">Regular</option> 8600 <option value="medium" data-wght="500">Medium</option> 8601 <option value="bold" data-wght="700">Bold</option> 8602 <option value="black" data-wght="900">Black</option> 8603 </select> 8604 </div> 8605 8606 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 8607 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 8608 <option value="variable" selected="selected">Variable</option> 8609 <option value="ultra light" data-wght="100">Ultra Light</option> 8610 <option value="thin" data-wght="200">Thin</option> 8611 <option value="light" data-wght="300">Light</option> 8612 <option value="regular" data-wght="400">Regular</option> 8613 <option value="medium" data-wght="500">Medium</option> 8614 <option value="bold" data-wght="700">Bold</option> 8615 <option value="black" data-wght="900">Black</option> 8616 </select> 8617 </div> 8618 8619 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 8620 <!-- Thai Slider: Weight (100â900) --> 8621 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
8622 <div data-component="tt__control-area"> 8623 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 8624 <div class="flex flex-row justify-between"> 8625 <div class="">Width</div> 8626 <div data-component="tt__wdth-value"></div> 8627 </div> 8628 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 8629 </div> 8630 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 8631 <div class="flex flex-row justify-between"> 8632 <div class="">Weight</div> 8633 <div data-component="tt__wght-value"></div> 8634 </div> 8635 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="900" class="typetester-slider w-full" id="typetesterWghtRange"> 8636 </div> 8637 </div> 8638</form> 8639 8640 <!-- Main Content Area --> 8641 <div class="md:ml-[48px] flex w-full justify-center align-middle"> 8642 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="th" data-size="l"></div> 8643 </div> 8644</section> 8645 8646 8647 <!-- Typetester Sample --> 8648<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 8649 <!-- Partial Width Content Area With Section Nav --> 8650 <!-- Section Nav Area --> 8651<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="thai"> 8652 <!-- Select Script--> 8653 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 8654 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 8655 8656 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 8657 Latin 8658 </option> 8659 8660 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 8661 Cyrillic 8662 </option> 8663 8664 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 8665 Greek 8666 </option> 8667 8668 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 8669 Vietnamese 8670 </option> 8671 8672 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 8673 Arabic 8674 </option> 8675 8676 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 8677 Devanagari 8678 </option> 8679 8680 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 8681 Hebrew 8682 </option> 8683 8684 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 8685 Korean 8686 </option> 8687 8688 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th" selected="selected"> 8689 Thai 8690 </option> 8691 </select> 8692 </div> 8693 8694 <!-- Latin: Proportional / Mono Option --> 8695 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 8696 <div class="text-blue hover:text-red pt-1 w-[120px]"> 8697 <!-- I'm sure theres a better way of applying this attribute conditionally --> 8698 8699 <input type="radio" checked="" id="sample-27_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 8700 <label class="nav-radio-label hover:cursor-pointer" for="sample-27_prop-mono_proportional">Proportional</label> 8701</div> 8702 8703 <div class="text-blue hover:text-red pt-1 w-[120px]"> 8704 <!-- I'm sure theres a better way of applying this attribute conditionally --> 8705 8706 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 8707 <input type="radio" id="sample-27_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 8708 <label class="nav-radio-label hover:cursor-pointer" for="sample-27_prop-mono_mono">Monospaced</label> 8709</div> 8710 8711 </fieldset> 8712 8713 <!-- Latin: Upright / Italic Option --> 8714 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 8715 <div class="text-blue hover:text-red pt-1 w-[120px]"> 8716 <!-- I'm sure theres a better way of applying this attribute conditionally --> 8717 8718 <input type="radio" checked="" id="sample-27_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 8719 <label class="nav-radio-label hover:cursor-pointer" for="sample-27_upright-ital_upright">Upright</label> 8720</div> 8721 8722 <div class="text-blue hover:text-red pt-1 w-[120px]"> 8723 <!-- I'm sure theres a better way of applying this attribute conditionally --> 8724 8725 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 8726 <input type="radio" id="sample-27_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 8727 <label class="nav-radio-label hover:cursor-pointer" for="sample-27_upright-ital_italic">Italic</label> 8728</div> 8729 8730 </fieldset> 8731 8732 <!-- Latin: Default / Alternatives Option --> 8733 <!-- Currently Disabled, Too Many Options Syndrome --> 8734 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 8735 <include src="source/html-includes/radio-button.html"> 8736 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 8737 "default", "label": "Default", "checked": true, "namePrefix": "sample-27" } 8738 </include> 8739 <include src="source/html-includes/radio-button.html"> 8740 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 8741 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 8742 "sample-27" } 8743 </include> 8744 </fieldset> --> 8745 8746 <!-- Thai: Looped / Loopless Option --> 8747 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 8748 <div class="text-blue hover:text-red pt-1 w-[120px]"> 8749 <!-- I'm sure theres a better way of applying this attribute conditionally --> 8750 8751 <input type="radio" checked="" id="sample-27_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 8752 <label class="nav-radio-label hover:cursor-pointer" for="sample-27_looped_looped">Looped</label> 8753</div> 8754 8755 <div class="text-blue hover:text-red pt-1 w-[120px]"> 8756 <!-- I'm sure theres a better way of applying this attribute conditionally --> 8757 8758 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 8759 <input type="radio" id="sample-27_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 8760 <label class="nav-radio-label hover:cursor-pointer" for="sample-27_looped_loopless">Loopless</label> 8761</div> 8762 8763 </fieldset> 8764 8765 <!-- Latin Dropdown: Variable + all 84 styles --> 8766 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 8767 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 8768 <option value="variable" selected="selected">Variable</option> 8769 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 8770 Compressed Ultra Light 8771 </option> 8772 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 8773 Compressed Thin 8774 </option> 8775 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 8776 Compressed Light 8777 </option> 8778 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 8779 Compressed Regular 8780 </option> 8781 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 8782 Compressed Medium
8783 </option> 8784 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 8785 Compressed Bold 8786 </option> 8787 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 8788 Compressed Black 8789 </option> 8790 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 8791 Condensed Ultra Light 8792 </option> 8793 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 8794 Condensed Thin 8795 </option> 8796 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 8797 Condensed Light 8798 </option> 8799 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 8800 Condensed Regular 8801 </option> 8802 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 8803 Condensed Medium 8804 </option> 8805 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 8806 Condensed Bold 8807 </option> 8808 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 8809 Condensed Black 8810 </option> 8811 <option value="standard ultra light" data-wght="100" data-wdth="100"> 8812 Standard Ultra Light 8813 </option> 8814 <option value="standard thin" data-wght="200" data-wdth="100"> 8815 Standard Thin 8816 </option> 8817 <option value="standard light" data-wght="300" data-wdth="100"> 8818 Standard Light 8819 </option> 8820 <option value="standard regular" data-wght="400" data-wdth="100"> 8821 Standard Regular 8822 </option> 8823 <option value="standard medium" data-wght="500" data-wdth="100"> 8824 Standard Medium 8825 </option> 8826 <option value="standard bold" data-wght="700" data-wdth="100"> 8827 Standard Bold 8828 </option> 8829 <option value="standard black" data-wght="900" data-wdth="100"> 8830 Standard Black 8831 </option> 8832 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 8833 Extended Ultra Light 8834 </option> 8835 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 8836 Extended Thin 8837 </option> 8838 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 8839 Extended Light 8840 </option> 8841 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 8842 Extended Regular 8843 </option> 8844 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 8845 Extended Medium 8846 </option> 8847 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 8848 Extended Bold 8849 </option> 8850 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 8851 Extended Black 8852 </option> 8853 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 8854 Expanded Ultra Light 8855 </option> 8856 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 8857 Expanded Thin 8858 </option> 8859 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 8860 Expanded Light 8861 </option> 8862 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 8863 Expanded Regular 8864 </option> 8865 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 8866 Expanded Medium 8867 </option> 8868 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 8869 Expanded Bold 8870 </option> 8871 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 8872 Expanded Black 8873 </option> 8874 </select> 8875 </div> 8876 8877 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 8878 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 8879 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 8880 <option value="variable" selected="selected">Variable</option> 8881 <option value="looped ultra light" data-wght="100">Ultra Light</option> 8882 <option value="looped thin" data-wght="200">Thin</option> 8883 <option value="looped light" data-wght="300">Light</option> 8884 <option value="looped regular" data-wght="400">Regular</option> 8885 <option value="looped medium" data-wght="500">Medium</option> 8886 <option value="looped bold" data-wght="700">Bold</option> 8887 <option value="looped black" data-wght="900">Black</option> 8888 </select> 8889 </div> 8890 8891 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 8892 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 8893 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 8894 <option value="variable" selected="selected">Variable</option> 8895 <option value="ultra light" data-wght="100">Ultra Light</option> 8896 <option value="thin" data-wght="200">Thin</option> 8897 <option value="light" data-wght="300">Light</option> 8898 <option value="regular" data-wght="400">Regular</option> 8899 <option value="medium" data-wght="500">Medium</option> 8900 <option value="bold" data-wght="700">Bold</option> 8901 <option value="black" data-wght="900">Black</option> 8902 </select> 8903 </div> 8904 8905 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 8906 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 8907 <option value="variable" selected="selected">Variable</option> 8908 <option value="ultra light" data-wght="100">Ultra Light</option> 8909 <option value="thin" data-wght="200">Thin</option> 8910 <option value="light" data-wght="300">Light</option> 8911 <option value="regular" data-wght="400">Regular</option> 8912 <option value="medium" data-wght="500">Medium</option> 8913 <option value="bold" data-wght="700">Bold</option> 8914 <option value="black" data-wght="900">Black</option> 8915 </select> 8916 </div> 8917 8918 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 8919 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 8920 <option value="variable" selected="selected">Variable</option> 8921 <option value="ultra light" data-wght="100">Ultra Light</option> 8922 <option value="thin" data-wght="200">Thin</option> 8923 <option value="light" data-wght="300">Light</option> 8924 <option value="regular" data-wght="400">Regular</option> 8925 <option value="medium" data-wght="500">Medium</option> 8926 <option value="bold" data-wght="700">Bold</option> 8927 <option value="black" data-wght="900">Black</option> 8928 </select> 8929 </div> 8930 8931 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 8932 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 8933 <option value="variable" selected="selected">Variable</option> 8934 <option value="ultra light" data-wght="100">Ultra Light</option> 8935 <option value="thin" data-wght="200">Thin</option> 8936 <option value="light" data-wght="300">Light</option> 8937 <option value="regular" data-wght="400">Regular</option> 8938 <option value="medium" data-wght="500">Medium</option> 8939 <option value="bold" data-wght="700">Bold</option> 8940 <option value="black" data-wght="900">Black</option> 8941 </select> 8942 </div> 8943 8944 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 8945 <!-- Thai Slider: Weight (100â900) --> 8946 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
8947 <div data-component="tt__control-area"> 8948 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 8949 <div class="flex flex-row justify-between"> 8950 <div class="">Width</div> 8951 <div data-component="tt__wdth-value"></div> 8952 </div> 8953 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 8954 </div> 8955 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 8956 <div class="flex flex-row justify-between"> 8957 <div class="">Weight</div> 8958 <div data-component="tt__wght-value"></div> 8959 </div> 8960 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="200" class="typetester-slider w-full" id="typetesterWghtRange"> 8961 </div> 8962 </div> 8963</form> 8964 8965 <!-- Main Content Area --> 8966 <div class="md:ml-[48px] flex w-full justify-center align-middle"> 8967 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="th" data-size="m"></div> 8968 </div> 8969</section> 8970 8971 8972 <!-- Typetester Sample --> 8973<section class="flex flex-col md:flex-row px-4 w-full" data-component="tt__sample"> 8974 <!-- Partial Width Content Area With Section Nav --> 8975 <!-- Section Nav Area --> 8976<form class="flex flex-row md:flex-col h-min md:self-center md:ml-4 w-full md:w-[120px] text-xs opacity-100 group-hover:opacity-100 transition-opacity" data-component="tt__sample-options" data-script="thai"> 8977 <!-- Select Script--> 8978 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container"> 8979 <select name="script-selector" id="script-selector" class="tt-select" data-component="tt__sample-options__script"> 8980 8981 <option value="latin" data-script="latin" data-direction="ltr" data-lang="en"> 8982 Latin 8983 </option> 8984 8985 <option value="cyrillic" data-script="cyrillic" data-direction="ltr" data-lang="uk"> 8986 Cyrillic 8987 </option> 8988 8989 <option value="greek" data-script="greek" data-direction="ltr" data-lang="el"> 8990 Greek 8991 </option> 8992 8993 <option value="vietnamese" data-script="vietnamese" data-direction="ltr" data-lang="vi"> 8994 Vietnamese 8995 </option> 8996 8997 <option value="arabic" data-script="arabic" data-direction="rtl" data-lang="ar"> 8998 Arabic 8999 </option> 9000 9001 <option value="devanagari" data-script="devanagari" data-direction="ltr" data-lang="hi"> 9002 Devanagari 9003 </option> 9004 9005 <option value="hebrew" data-script="hebrew" data-direction="rtl" data-lang="he"> 9006 Hebrew 9007 </option> 9008 9009 <option value="korean" data-script="korean" data-direction="ltr" data-lang="ko"> 9010 Korean 9011 </option> 9012 9013 <option value="thai" data-script="thai" data-direction="ltr" data-lang="th" selected="selected"> 9014 Thai 9015 </option> 9016 </select> 9017 </div> 9018 9019 <!-- Latin: Proportional / Mono Option --> 9020 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese" data-component="typetester-sample-options__monospaced"> 9021 <div class="text-blue hover:text-red pt-1 w-[120px]"> 9022 <!-- I'm sure theres a better way of applying this attribute conditionally --> 9023 9024 <input type="radio" checked="" id="sample-28_prop-mono_proportional" name="prop-mono" value="proportional" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 9025 <label class="nav-radio-label hover:cursor-pointer" for="sample-28_prop-mono_proportional">Proportional</label> 9026</div> 9027 9028 <div class="text-blue hover:text-red pt-1 w-[120px]"> 9029 <!-- I'm sure theres a better way of applying this attribute conditionally --> 9030 9031 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 9032 <input type="radio" id="sample-28_prop-mono_mono" name="prop-mono" value="mono" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 9033 <label class="nav-radio-label hover:cursor-pointer" for="sample-28_prop-mono_mono">Monospaced</label> 9034</div> 9035 9036 </fieldset> 9037 9038 <!-- Latin: Upright / Italic Option --> 9039 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 9040 <div class="text-blue hover:text-red pt-1 w-[120px]"> 9041 <!-- I'm sure theres a better way of applying this attribute conditionally --> 9042 9043 <input type="radio" checked="" id="sample-28_upright-ital_upright" name="upright-ital" value="upright" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 9044 <label class="nav-radio-label hover:cursor-pointer" for="sample-28_upright-ital_upright">Upright</label> 9045</div> 9046 9047 <div class="text-blue hover:text-red pt-1 w-[120px]"> 9048 <!-- I'm sure theres a better way of applying this attribute conditionally --> 9049 9050 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 9051 <input type="radio" id="sample-28_upright-ital_italic" name="upright-ital" value="italic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 9052 <label class="nav-radio-label hover:cursor-pointer" for="sample-28_upright-ital_italic">Italic</label> 9053</div> 9054 9055 </fieldset> 9056 9057 <!-- Latin: Default / Alternatives Option --> 9058 <!-- Currently Disabled, Too Many Options Syndrome --> 9059 <!-- <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="latin"> 9060 <include src="source/html-includes/radio-button.html"> 9061 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 9062 "default", "label": "Default", "checked": true, "namePrefix": "sample-28" } 9063 </include> 9064 <include src="source/html-includes/radio-button.html"> 9065 { "color": "blue", "hoverColor": "red", "name": "alternatives", "value": 9066 "alternatives", "label": "Alternatives", "checked": false, "namePrefix": 9067 "sample-28" } 9068 </include> 9069 </fieldset> --> 9070 9071 <!-- Thai: Looped / Loopless Option --> 9072 <fieldset class="flex flex-col items-start mb-2 md:mb-5" data-show-in-script="thai"> 9073 <div class="text-blue hover:text-red pt-1 w-[120px]"> 9074 <!-- I'm sure theres a better way of applying this attribute conditionally --> 9075 9076 <input type="radio" checked="" id="sample-28_looped_looped" name="looped" value="looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue checked:hover:border-blue checked:hover:bg-red hover:cursor-pointer"> 9077 <label class="nav-radio-label hover:cursor-pointer" for="sample-28_looped_looped">Looped</label> 9078</div> 9079 9080 <div class="text-blue hover:text-red pt-1 w-[120px]"> 9081 <!-- I'm sure theres a better way of applying this attribute conditionally --> 9082 9083 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 9084 <input type="radio" id="sample-28_looped_loopless" name="looped" value="loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-blue hover:border-red checked:bg-blue hover:checked:border-blue hover:checked:bg-red hover:cursor-pointer"> 9085 <label class="nav-radio-label hover:cursor-pointer" for="sample-28_looped_loopless">Loopless</label> 9086</div> 9087 9088 </fieldset> 9089 9090 <!-- Latin Dropdown: Variable + all 84 styles --> 9091 <div class="flex flex-col mb-2 md:mb-5 tt-select-nav-container" data-show-in-script="latin,cyrillic,greek,vietnamese"> 9092 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="tt-select"> 9093 <option value="variable" selected="selected">Variable</option> 9094 <option value="compressed ultra light" data-wght="100" data-wdth="50" data-disabled-in-mono="true"> 9095 Compressed Ultra Light 9096 </option> 9097 <option value="compressed thin" data-wght="200" data-wdth="50" data-disabled-in-mono="true"> 9098 Compressed Thin 9099 </option> 9100 <option value="compressed light" data-wght="300" data-wdth="50" data-disabled-in-mono="true"> 9101 Compressed Light 9102 </option> 9103 <option value="compressed regular" data-wght="400" data-wdth="50" data-disabled-in-mono="true"> 9104 Compressed Regular 9105 </option> 9106 <option value="compressed medium" data-wght="500" data-wdth="50" data-disabled-in-mono="true"> 9107 Compressed Medium
9108 </option> 9109 <option value="compressed bold" data-wght="700" data-wdth="50" data-disabled-in-mono="true"> 9110 Compressed Bold 9111 </option> 9112 <option value="compressed black" data-wght="900" data-wdth="50" data-disabled-in-mono="true"> 9113 Compressed Black 9114 </option> 9115 <option value="condensed ultra light" data-wght="100" data-wdth="75" data-disabled-in-mono="true"> 9116 Condensed Ultra Light 9117 </option> 9118 <option value="condensed thin" data-wght="200" data-wdth="75" data-disabled-in-mono="true"> 9119 Condensed Thin 9120 </option> 9121 <option value="condensed light" data-wght="300" data-wdth="75" data-disabled-in-mono="true"> 9122 Condensed Light 9123 </option> 9124 <option value="condensed regular" data-wght="400" data-wdth="75" data-disabled-in-mono="true"> 9125 Condensed Regular 9126 </option> 9127 <option value="condensed medium" data-wght="500" data-wdth="75" data-disabled-in-mono="true"> 9128 Condensed Medium 9129 </option> 9130 <option value="condensed bold" data-wght="700" data-wdth="75" data-disabled-in-mono="true"> 9131 Condensed Bold 9132 </option> 9133 <option value="condensed black" data-wght="900" data-wdth="75" data-disabled-in-mono="true"> 9134 Condensed Black 9135 </option> 9136 <option value="standard ultra light" data-wght="100" data-wdth="100"> 9137 Standard Ultra Light 9138 </option> 9139 <option value="standard thin" data-wght="200" data-wdth="100"> 9140 Standard Thin 9141 </option> 9142 <option value="standard light" data-wght="300" data-wdth="100"> 9143 Standard Light 9144 </option> 9145 <option value="standard regular" data-wght="400" data-wdth="100"> 9146 Standard Regular 9147 </option> 9148 <option value="standard medium" data-wght="500" data-wdth="100"> 9149 Standard Medium 9150 </option> 9151 <option value="standard bold" data-wght="700" data-wdth="100"> 9152 Standard Bold 9153 </option> 9154 <option value="standard black" data-wght="900" data-wdth="100"> 9155 Standard Black 9156 </option> 9157 <option value="extended ultra light" data-wght="100" data-wdth="125" data-disabled-in-mono="true"> 9158 Extended Ultra Light 9159 </option> 9160 <option value="extended thin" data-wght="200" data-wdth="125" data-disabled-in-mono="true"> 9161 Extended Thin 9162 </option> 9163 <option value="extended light" data-wght="300" data-wdth="125" data-disabled-in-mono="true"> 9164 Extended Light 9165 </option> 9166 <option value="extended regular" data-wght="400" data-wdth="125" data-disabled-in-mono="true"> 9167 Extended Regular 9168 </option> 9169 <option value="extended medium" data-wght="1250" data-wdth="125" data-disabled-in-mono="true"> 9170 Extended Medium 9171 </option> 9172 <option value="extended bold" data-wght="700" data-wdth="125" data-disabled-in-mono="true"> 9173 Extended Bold 9174 </option> 9175 <option value="extended black" data-wght="900" data-wdth="125" data-disabled-in-mono="true"> 9176 Extended Black 9177 </option> 9178 <option value="expanded ultra light" data-wght="100" data-wdth="150" data-disabled-in-mono="true"> 9179 Expanded Ultra Light 9180 </option> 9181 <option value="expanded thin" data-wght="200" data-wdth="150" data-disabled-in-mono="true"> 9182 Expanded Thin 9183 </option> 9184 <option value="expanded light" data-wght="300" data-wdth="150" data-disabled-in-mono="true"> 9185 Expanded Light 9186 </option> 9187 <option value="expanded regular" data-wght="400" data-wdth="150" data-disabled-in-mono="true"> 9188 Expanded Regular 9189 </option> 9190 <option value="expanded medium" data-wght="500" data-wdth="150" data-disabled-in-mono="true"> 9191 Expanded Medium 9192 </option> 9193 <option value="expanded bold" data-wght="700" data-wdth="150" data-disabled-in-mono="true"> 9194 Expanded Bold 9195 </option> 9196 <option value="expanded black" data-wght="900" data-wdth="150" data-disabled-in-mono="true"> 9197 Expanded Black 9198 </option> 9199 </select> 9200 </div> 9201 9202 <!-- Thai Dropdown: Variable + all 14 styles (7 Looped, 7 Loopless) --> 9203 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="thai"> 9204 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 9205 <option value="variable" selected="selected">Variable</option> 9206 <option value="looped ultra light" data-wght="100">Ultra Light</option> 9207 <option value="looped thin" data-wght="200">Thin</option> 9208 <option value="looped light" data-wght="300">Light</option> 9209 <option value="looped regular" data-wght="400">Regular</option> 9210 <option value="looped medium" data-wght="500">Medium</option> 9211 <option value="looped bold" data-wght="700">Bold</option> 9212 <option value="looped black" data-wght="900">Black</option> 9213 </select> 9214 </div> 9215 9216 <!-- Arabic / Devanagari / Hebrew / Korean Dropdown: Variable + all 7 styles --> 9217 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="arabic"> 9218 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 9219 <option value="variable" selected="selected">Variable</option> 9220 <option value="ultra light" data-wght="100">Ultra Light</option> 9221 <option value="thin" data-wght="200">Thin</option> 9222 <option value="light" data-wght="300">Light</option> 9223 <option value="regular" data-wght="400">Regular</option> 9224 <option value="medium" data-wght="500">Medium</option> 9225 <option value="bold" data-wght="700">Bold</option> 9226 <option value="black" data-wght="900">Black</option> 9227 </select> 9228 </div> 9229 9230 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="devanagari"> 9231 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 9232 <option value="variable" selected="selected">Variable</option> 9233 <option value="ultra light" data-wght="100">Ultra Light</option> 9234 <option value="thin" data-wght="200">Thin</option> 9235 <option value="light" data-wght="300">Light</option> 9236 <option value="regular" data-wght="400">Regular</option> 9237 <option value="medium" data-wght="500">Medium</option> 9238 <option value="bold" data-wght="700">Bold</option> 9239 <option value="black" data-wght="900">Black</option> 9240 </select> 9241 </div> 9242 9243 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="hebrew"> 9244 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 9245 <option value="variable" selected="selected">Variable</option> 9246 <option value="ultra light" data-wght="100">Ultra Light</option> 9247 <option value="thin" data-wght="200">Thin</option> 9248 <option value="light" data-wght="300">Light</option> 9249 <option value="regular" data-wght="400">Regular</option> 9250 <option value="medium" data-wght="500">Medium</option> 9251 <option value="bold" data-wght="700">Bold</option> 9252 <option value="black" data-wght="900">Black</option> 9253 </select> 9254 </div> 9255 9256 <div class="flex flex-col mb-2 md:mb-5" data-show-in-script="korean"> 9257 <select name="instance-selector" id="instance-selector" data-component="tt__sample-options__styles" class="hover:cursor-pointer"> 9258 <option value="variable" selected="selected">Variable</option> 9259 <option value="ultra light" data-wght="100">Ultra Light</option> 9260 <option value="thin" data-wght="200">Thin</option> 9261 <option value="light" data-wght="300">Light</option> 9262 <option value="regular" data-wght="400">Regular</option> 9263 <option value="medium" data-wght="500">Medium</option> 9264 <option value="bold" data-wght="700">Bold</option> 9265 <option value="black" data-wght="900">Black</option> 9266 </select> 9267 </div> 9268 9269 <!-- Latin Slider: Width (50â200), Weight (100â900) --> 9270 <!-- Thai Slider: Weight (100â900) --> 9271 <!-- Arabic / Devanagari / Hebrew / Korean Slider: Weight (100â900) -->
9272 <div data-component="tt__control-area"> 9273 <div data-component="tt__wdth-slider-wrapper" class="wdth-slider tt-element-container mb-2 md:mb-5" data-show-in-script="latin,cyrillic,greek,vietnamese"> 9274 <div class="flex flex-row justify-between"> 9275 <div class="">Width</div> 9276 <div data-component="tt__wdth-value"></div> 9277 </div> 9278 <input data-component="tt__wdth-slider" type="range" min="50" max="150" value="100" class="typetester-slider w-full" id="typetesterWdthRange"> 9279 </div> 9280 <div class="tt-element-container" data-show-in-script="latin,cyrillic,greek,vietnamese,arabic,devanagari,hebrew,thai,korean"> 9281 <div class="flex flex-row justify-between"> 9282 <div class="">Weight</div> 9283 <div data-component="tt__wght-value"></div> 9284 </div> 9285 <input data-component="tt__wght-slider" type="range" min="100" max="900" value="400" class="typetester-slider w-full" id="typetesterWghtRange"> 9286 </div> 9287 </div> 9288</form> 9289 9290 <!-- Main Content Area --> 9291 <div class="md:ml-[48px] flex w-full justify-center align-middle"> 9292 <div data-component="tt__sample-text" class="w-full self-center tt-sample text-red outline-none transition-all" contenteditable="true" spellcheck="false" lang="th" data-size="s"></div> 9293 </div> 9294</section> 9295 9296 </div> 9297</div> 9298 9299 9300 <!--INTRO SECTION--> 9301 <section data-nav-section="concept" data-nav-colour-switcher-colour="blue" data-nav-colour-switcher-colour-hover="red" class="bg-white text-blue"> 9302 <div class="flex overflow-hidden"> 9303 <!-- Full Width Content Area --> 9304 <!-- data-end-scroll-offset="0.5" --> 9305 <div data-component="section-scene" data-autoplay-until="0.752" data-start-scroll-offset="0.5" data-src="/models/candy/candy-v015/candy-v015.gltf" data-src-mobile="/models/candy/candy-mobile-v005/candy-mobile-v005.gltf" class="flex self-center w-full h-[100vh] md:h-[90vh]"></div> 9306 </div> 9307 9308 <!-- Class deleted from below div md:-mt-[4vh] --> 9309 <div class="md:ml-[132px] px-4 mb-9 flex"> 9310 <!-- Partial Width Content Area --> 9311 <div class="md:ml-[170px] md:mr-4 grid-setup"> 9312 <h2 class="col-span-full text-2xl md:text-3xl pb-5 md:pb-4"> 9313 GT America Intl 9314 </h2> 9315 <p class="col-span-4 md:col-span-10 text-md md:text-xl"> 9316 GT America connects two centuries of typographic genres, combining 19th 9317 century American Gothic and 20th century European Grotesk styles. The 9318 result is one cohesive typeface family unified under the best design 9319 features from both traditions. Originally released in 2016, this update 9320 implements the typographic system in variable font format as well as 9321 five new scripts. Exclusively available at Grilli Type. 9322 </p> 9323 </div> 9324 </div> 9325 9326 <!-- Family Overview Section --> 9327<div class="md:ml-[132px] md:px-4 mb-5 md:mb-11 flex flex-col md:flex-row"> 9328 <div class="flex flex-row"> 9329 <!-- Partial Width Content Area With Section Nav --> 9330 <!-- Section Nav Area --> 9331 <div class="hidden md:block ml-4 md:w-[120px] text-xs sticky self-start" data-component="sticky-subnav"> 9332 <div class="flex flex-col justify-center md:h-full"> 9333 <h3 class="text-lg">Style Overview</h3> 9334 <div class="flex flex-col items-start pt-5">6 Widths</div> 9335 <div class="flex flex-col items-start pt-2">7 Weights</div> 9336 <div class="flex flex-col items-start pt-2">84 Styles</div> 9337 <div class="flex flex-col items-start pt-2">Upright + Italic</div> 9338 </div> 9339 </div> 9340 </div> 9341 <!-- Main Content Area --> 9342 <div class="md:ml-[42px] md:mr-4 w-full text-xs"> 9343 <!-- MOBILE VIEWPORTS: FAMILY OVERVIEW TABLE --> 9344 <div class="md:hidden col-span-4"> 9345 <!-- <include src="source/html-includes/mobile-tilt-notice.html"></include> --> 9346 <table class="family-overview-table-mobile mb-8" data-component="family-overview-table" data-has-row-header="false"> 9347 <tbody> 9348 <tr class="font-std-regular border-b"> 9349 <th class="w-[50px] text-left">Comp.</th> 9350 <th class="h-[50px] text-left">Cond.</th> 9351 <th class="text-left">Stan.</th> 9352 <th class="text-left">Exte.</th> 9353 <th class="text-left">Expa.</th> 9354 <th class="text-left">Mono</th> 9355 </tr> 9356 9357 <tr class="ov-ultralight"> 9358 <td>A<span class="">a</span></td> 9359 <td>B<span class="">b</span></td> 9360 <td>C<span class="">c</span></td> 9361 <td>D<span class="">d</span></td> 9362 <td>E<span class="">e</span></td> 9363 <td>F<span class="">f</span></td> 9364 </tr> 9365 <tr class="ov-thin"> 9366 <td>G<span class="">g</span></td> 9367 <td>H<span class="">h</span></td> 9368 <td>I<span class="">i</span></td> 9369 <td>J<span class="">j</span></td> 9370 <td>K<span class="">k</span></td> 9371 <td>L<span class="">l</span></td> 9372 </tr> 9373 <tr class="ov-light"> 9374 <td>M<span class="">m</span></td> 9375 <td>N<span class="">n</span></td> 9376 <td>O<span class="">o</span></td> 9377 <td>P<span class="">p</span></td> 9378 <td>Q<span class="">q</span></td> 9379 <td>R<span class="">r</span></td> 9380 </tr> 9381 <tr class="ov-regular"> 9382 <td>S<span class="">s</span></td> 9383 <td>T<span class="">t</span></td> 9384 <td>U<span class="">u</span></td> 9385 <td>V<span class="">v</span></td> 9386 <td>W<span class="">w</span></td> 9387 <td>X<span class="">x</span></td> 9388 </tr> 9389 <tr class="ov-medium"> 9390 <td>Y<span class="">y</span></td> 9391 <td>Z<span class="">z</span></td> 9392 <td>A<span class="">a</span></td> 9393 <td>B<span class="">b</span></td> 9394 <td>C<span class="">c</span></td> 9395 <td>D<span class="">d</span></td> 9396 </tr> 9397 <tr class="ov-bold"> 9398 <td>E<span class="">e</span></td> 9399 <td>F<span class="">f</span></td> 9400 <td>G<span class="">g</span></td> 9401 <td>H<span class="">h</span></td> 9402 <td>I<span class="">i</span></td> 9403 <td>J<span class="">j</span></td> 9404 </tr> 9405 <tr class="ov-black"> 9406 <td>K<span class="">k</span></td> 9407 <td>L<span class="">l</span></td> 9408 <td>M<span class="">m</span></td> 9409 <td>N<span class="">n</span></td> 9410 <td>O<span class="">o</span></td> 9411 <td>P<span class="">p</span></td> 9412 </tr> 9413 </tbody> 9414 </table> 9415 </div> 9416 9417 <!-- MD+ VIEWPORTS: FAMILY OVERVIEW TABLE --> 9418 <div class="hidden md:block col-span-12"> 9419 <table class="family-overview-table-desktop" data-component="family-overview-table"> 9420 <tbody> 9421 <tr class="font-std-regular"> 9422 <th class="w-[30px] border-l-0 border-t-0"></th> 9423 <th class="h-[30px]">Compressed</th> 9424 <th class="">Condensed</th> 9425 <th class="">Standard</th> 9426 <th class="">Extended</th> 9427 <th class="">Expanded</th> 9428 <th class="">Mono</th> 9429 </tr> 9430 9431 <tr class="ov-ultralight"> 9432 <th><div class="font-std-regular">Ultra Light</div></th> 9433 <td class="" style="transition: font-variation-settings .1s ease-in-out"> 9434 A<span class="hidden md:inline">a</span> 9435 </td> 9436 <td class="" style="transition: font-variation-settings .1s ease-in-out"> 9437 B<span class="hidden md:inline">b</span> 9438 </td> 9439 <td class="" style="transition: font-variation-settings .1s ease-in-out"> 9440 C<span class="hidden md:inline">c</span> 9441 </td> 9442 <td class="" style="transition: font-variation-settings .1s ease-in-out"> 9443 D<span class="hidden md:inline">d</span> 9444 </td> 9445 <td class="" style="transition: font-variation-settings .1s ease-in-out"> 9446 E<span class="hidden md:inline">e</span> 9447 </td> 9448 <td class="" style="transition: font-variation-settings .1s ease-in-out"> 9449 F<span class="hidden md:inline">f</span> 9450 </td> 9451 </tr> 9452 <tr class="ov-thin"> 9453 <th><div class="font-std-regular">Thin</div></th> 9454 <td style="transition: font-variation-settings .1s ease-in-out"> 9455 G<span class="hidden md:inline">g</span> 9456 </td> 9457 <td style="transition: font-variation-settings .1s ease-in-out"> 9458 H<span class="hidden md:inline">h</span> 9459 </td> 9460 <td style="transition: font-variation-settings .1s ease-in-out"> 9461 I<span class="hidden md:inline">i</span> 9462 </td> 9463 <td style="transition: font-variation-settings .1s ease-in-out"> 9464 J<span class="hidden md:inline">j</span> 9465 </td> 9466 <td style="transition: font-variation-settings .1s ease-in-out"> 9467 K<span class="hidden md:inline">k</span> 9468 </td> 9469 <td style="transition: font-variation-settings .1s ease-in-out"> 9470 L<span class="hidden md:inline">l</span> 9471 </td> 9472 </tr> 9473 <tr class="ov-light"> 9474 <th><div class="font-std-regular">Light</div></th> 9475 <td style="transition: font-variation-settings .1s ease-in-out"> 9476 M<span class="hidden md:inline">m</span> 9477 </td> 9478 <td style="transition: font-variation-settings .1s ease-in-out"> 9479 N<span class="hidden md:inline">n</span> 9480 </td> 9481 <td style="transition: font-variation-settings .1s ease-in-out"> 9482 O<span class="hidden md:inline">o</span> 9483 </td> 9484 <td style="transition: font-variation-settings .1s ease-in-out"> 9485 P<span class="hidden md:inline">p</span> 9486 </td> 9487 <td style="transition: font-variation-settings .1s ease-in-out"> 9488 Q<span class="hidden md:inline">
9488q</span> 9489 </td> 9490 <td style="transition: font-variation-settings .1s ease-in-out"> 9491 R<span class="hidden md:inline">r</span> 9492 </td> 9493 </tr> 9494 <tr class="ov-regular"> 9495 <th><div class="font-std-regular">Regular</div></th> 9496 <td style="transition: font-variation-settings .1s ease-in-out"> 9497 S<span class="hidden md:inline">s</span> 9498 </td> 9499 <td style="transition: font-variation-settings .1s ease-in-out"> 9500 T<span class="hidden md:inline">t</span> 9501 </td> 9502 <td style="transition: font-variation-settings .1s ease-in-out"> 9503 U<span class="hidden md:inline">u</span> 9504 </td> 9505 <td style="transition: font-variation-settings .1s ease-in-out"> 9506 V<span class="hidden md:inline">v</span> 9507 </td> 9508 <td style="transition: font-variation-settings .1s ease-in-out"> 9509 W<span class="hidden md:inline">w</span> 9510 </td> 9511 <td style="transition: font-variation-settings .1s ease-in-out"> 9512 X<span class="hidden md:inline">x</span> 9513 </td> 9514 </tr> 9515 <tr class="ov-medium"> 9516 <th><div class="font-std-regular">Medium</div></th> 9517 <td style="transition: font-variation-settings .1s ease-in-out"> 9518 Y<span class="hidden md:inline">y</span> 9519 </td> 9520 <td style="transition: font-variation-settings .1s ease-in-out"> 9521 Z<span class="hidden md:inline">z</span> 9522 </td> 9523 <td style="transition: font-variation-settings .1s ease-in-out"> 9524 A<span class="hidden md:inline">a</span> 9525 </td> 9526 <td style="transition: font-variation-settings .1s ease-in-out"> 9527 B<span class="hidden md:inline">b</span> 9528 </td> 9529 <td style="transition: font-variation-settings .1s ease-in-out"> 9530 C<span class="hidden md:inline">c</span> 9531 </td> 9532 <td style="transition: font-variation-settings .1s ease-in-out"> 9533 D<span class="hidden md:inline">d</span> 9534 </td> 9535 </tr> 9536 <tr class="ov-bold"> 9537 <th><div class="font-std-regular">Bold</div></th> 9538 <td style="transition: font-variation-settings .1s ease-in-out"> 9539 E<span class="hidden md:inline">e</span> 9540 </td> 9541 <td style="transition: font-variation-settings .1s ease-in-out"> 9542 F<span class="hidden md:inline">f</span> 9543 </td> 9544 <td style="transition: font-variation-settings .1s ease-in-out"> 9545 G<span class="hidden md:inline">g</span> 9546 </td> 9547 <td style="transition: font-variation-settings .1s ease-in-out"> 9548 H<span class="hidden md:inline">h</span> 9549 </td> 9550 <td style="transition: font-variation-settings .1s ease-in-out"> 9551 I<span class="hidden md:inline">i</span> 9552 </td> 9553 <td style="transition: font-variation-settings .1s ease-in-out"> 9554 J<span class="hidden md:inline">j</span> 9555 </td> 9556 </tr> 9557 <tr class="ov-black"> 9558 <th><div class="font-std-regular">Black</div></th> 9559 <td style="transition: font-variation-settings .1s ease-in-out"> 9560 K<span class="hidden md:inline">k</span> 9561 </td> 9562 <td style="transition: font-variation-settings .1s ease-in-out"> 9563 L<span class="hidden md:inline">l</span> 9564 </td> 9565 <td style="transition: font-variation-settings .1s ease-in-out"> 9566 M<span class="hidden md:inline">m</span> 9567 </td> 9568 <td style="transition: font-variation-settings .1s ease-in-out"> 9569 N<span class="hidden md:inline">n</span> 9570 </td> 9571 <td style="transition: font-variation-settings .1s ease-in-out"> 9572 O<span class="hidden md:inline">o</span> 9573 </td> 9574 <td style="transition: font-variation-settings .1s ease-in-out"> 9575 P<span class="hidden md:inline">p</span> 9576 </td> 9577 </tr> 9578 </tbody> 9579 </table> 9580 </div> 9581 </div> 9582</div> 9583 9584 9585 <!-- Design Space Section --> 9586<div class="md:ml-[132px] md:px-4 my-8 flex flex-col md:flex-row"> 9587 <!-- Partial Width Content Area With Section Nav --> 9588 <!-- Section Nav Area --> 9589 <div data-component="sticky-subnav" class="block px-4 md:px-0 md:ml-4 w-full md:w-[120px] md:h-1/2 text-xs md:sticky"> 9590 <div class="flex flex-col justify-center md:h-full border-b pb-4 md:border-0 md:pb-0"> 9591 <h3 class="text-lg">Variable Fonts</h3> 9592 <div class="hidden md:flex flex-col items-start pt-5">Proportional</div> 9593 <div class="hidden md:flex flex-col items-start pt-2">Width Axis</div> 9594 <div class="hidden md:flex flex-col items-start pt-2">Weight Axis</div> 9595 <div class="hidden md:flex flex-col items-start pt-2"> 9596 Upright + Italic 9597 </div> 9598 <div class="hidden md:flex flex-col items-start pt-5">Mono</div> 9599 <div class="hidden md:flex flex-col items-start pt-2">Weight Axis</div> 9600 <div class="hidden md:flex flex-col items-start pt-2"> 9601 Upright + Italic 9602 </div> 9603 </div> 9604 </div> 9605 <!-- Main Content Area --> 9606 <div class="px-4 md:px-0 md:ml-[48px] md:mr-4 w-full text-xs overflow-hidden cursor-nesw-resize" data-component="axes-overview-group">
9607 <!-- Proportional VF Sample--> 9608 <div class="w-full pt-5 md:pt-0" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400"; --wdth: 100; --wdth-text: "100""> 9609 <div class="w-full vf-caption"> 9610 <span class="pr-6 hidden md:inline-block">GT America Proportional</span> 9611 <span class="pr-6">â <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6">â 0°</span><span class="pr-6">â 9612 <span data-component="axes-overview__font-size-text"></span> 9613 px</span> 9614 </div> 9615 <div data-component="axes-overview__sample" class="text-[23.5vw] leading-none text-red h-[20vw] flex flex-col"> 9616 America 9617 </div> 9618 </div> 9619 <!-- Mono VF Sample --> 9620 <div class="w-full pt-5 md:pt-0" data-component="axes-overview" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400""> 9621 <div class="w-full vf-caption"> 9622 <span class="pr-6 hidden md:inline-block">GT America Mono</span> 9623 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6">â 0°</span><span class="pr-6">â 9624 <span data-component="axes-overview__font-size-text"></span> 9625 px</span> 9626 </div> 9627 <div data-component="axes-overview__sample" class="text-[23.5vw] mono-fonts leading-none text-red h-[20vw] flex flex-col md:-mb-[0.152em]"> 9628 America 9629 </div> 9630 </div> 9631 </div> 9632</div> 9633 9634 9635 <!-- Family Overview Section --> 9636 <div class="md:ml-[132px] md:px-4 md:pt-8 my-8 flex flex-col md:flex-row"> 9637 <!-- Partial Width Content Area With Section Nav --> 9638 <!-- Section Nav Area --> 9639 <div data-component="sticky-subnav" class="block ml-4 w-full md:w-[120px] md:h-1/2 text-xs md:sticky"> 9640 <div class="flex flex-col justify-center md:h-full"> 9641 <h3 class="text-lg"></h3> 9642 </div> 9643 </div> 9644 <!-- Main Content Area --> 9645 <div class="md:ml-[48px] md:mr-4 w-full grid-setup" lang="en"> 9646 <!-- Removed from above: md:w-3/4 text-justify hyphens-auto md:text-lg px-4 md:px-0 9647 Removed from below: md:columns-2 gap-6--> 9648 <div class="col-span-4 md:col-span-10 px-4 md:px-0 text-md md:text-xl"> 9649 The prototypical American Gothic is an early version of the sans serif 9650 model. It resembles a serif design without serifsâand less stroke 9651 contrast. This results in a dynamic flow and an expressive personality 9652 that is most visible in the double-story g. GT America combines this 9653 background with the rigor and precision of the European Grotesk model, 9654 built from the ground up as a sturdy workhorse. 9655 </div> 9656 </div> 9657 </div> 9658 9659 <!-- NEED TO ADJUST THIS LAYOUT FOR MOBILE STILL. BEFORE CODING OTHERS LIKE THIS! --> 9660 9661<div class="md:ml-[132px] px-4 py-8 mt-8 md:mt-10 relative"> 9662 <!-- Printmarks Beginning --> 9663 <!-- Top Left --> 9664 <img class="absolute top-0 left-0 scale-50 rotate-[270deg]" src="/trim-bm-blue.77fd5ce2.png"> 9665 <!-- Top Middle --> 9666 <img class="absolute top-0 left-[50%] right-[50%] scale-50" src="/trim-bm-blue.77fd5ce2.png"> 9667 <!-- Top Right --> 9668 <img class="absolute top-0 right-0 scale-50 rotate-[90deg]" src="/trim-bm-blue.77fd5ce2.png"> 9669 <!-- Bottom Left--> 9670 <img class="absolute bottom-0 left-0 scale-50 rotate-[270deg]" src="/trim-bm-blue.77fd5ce2.png"> 9671 <!-- Bottom Middle --> 9672 <img class="absolute bottom-0 left-[50%] right-[50%] scale-50" src="/cross-blue.9784e107.png"> 9673 <!-- Bottom Right --> 9674 <img class="absolute bottom-0 right-0 scale-50 rotate-[90deg]" src="/trim-bm-blue.77fd5ce2.png"> 9675 <!-- Printmarks Ending--> 9676 <!-- one "row" on desktop --> 9677 <div class="grid-setup"> 9678 <!-- Single Vertical Lottie Animation --> 9679 <div class="col-span-4 flex items-center justify-center"> 9680 <lottie-player data-component="lottie-player" class="md:scale-[1.2] md:-translate-x-[10%] pb-8 md:pb-0" data-src="character-cowboy-001.json"></lottie-player> 9681 </div> 9682 <!-- Type Stack --> 9683 <div class="col-span-4 md:col-span-8 flex flex-col items-stretch overflow-hidden cursor-ew-resize" data-component="axes-overview-group">
9684 <!-- Type Stack Item Itâs good --> 9685 <div class="w-full text-red" data-component="axes-overview" data-set-size="false" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" style="--wght: 900; --wght-text: "900"; --wdth: 150; --wdth-text: "150""> 9686 <div class="vf-caption flex"> 9687 <span class="pr-6">â 9688 <span class="hidden md:inline-block">GT America </span>Latin</span> 9689 <div> 9690 <span class="pr-6">â 9691 <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">â 9692 <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">â 0°</span><span class="pr-6 hidden md:inline-block">â 9693 <span data-component="axes-overview__font-size-text"></span> 9694 px</span> 9695 </div> 9696 </div> 9697 <div data-component="axes-overview__sample" class="gallery-sample-list-vertical-item text-[50px] md:text-[16vw]"> 9698 Itâs Good Like That 9699 </div> 9700 </div> 9701 <!-- Type Stack Item Perfectly Juicy--> 9702 <div class="w-full text-blue" data-component="axes-overview" data-set-size="false" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" style="--wght: 700; --wght-text: "700"; --wdth: 125; --wdth-text: "125""> 9703 <div class="vf-caption flex"> 9704 <span class="pr-6">â 9705 <span class="hidden md:inline-block">GT America </span>Cyrillic</span> 9706 <div> 9707 <span class="pr-6">â 9708 <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">â 9709 <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">â 0°</span><span class="pr-6 hidden md:inline-block">â 9710 <span data-component="axes-overview__font-size-text"></span> 9711 px</span> 9712 </div> 9713 </div> 9714 <div data-component="axes-overview__sample" class="gallery-sample-list-vertical-item text-[50px] md:text-[10vw]" lang="uk"> 9715 ÐÑже СоковиÑий 9716 </div> 9717 </div> 9718 <!-- Type Stack Item Nearly a little too sweet--> 9719 <div class="w-full text-red" data-component="axes-overview" data-set-size="false" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" style="--wght: 500; --wght-text: "500"; --wdth: 100; --wdth-text: "100""> 9720 <div class="vf-caption flex"> 9721 <span class="pr-6">â 9722 <span class="hidden md:inline-block">GT America </span>Latin</span> 9723 <div> 9724 <span class="pr-6">â 9725 <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">â 9726 <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">â 0°</span><span class="pr-6 hidden md:inline-block">â 9727 <span data-component="axes-overview__font-size-text"></span> 9728 px</span> 9729 </div> 9730 </div> 9731 <div data-component="axes-overview__sample" class="gallery-sample-list-vertical-item text-[50px] md:text-[6vw] italic-fonts"> 9732 Little Too Sweet For My Taste But What Do I Know 9733 </div> 9734 </div> 9735 <!-- Type Stack Item Very Extremely Tasty--> 9736 <div class="w-full text-blue" data-component="axes-overview" data-set-size="false" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" style="--wght: 400; --wght-text: "400"; --wdth: 100; --wdth-text: "100""> 9737 <div class="vf-caption flex"> 9738 <span class="pr-6">â 9739 <span class="hidden md:inline-block">GT America </span>Greek</span> 9740 <div> 9741 <span class="pr-6">â 9742 <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">â 9743 <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">â 0°</span><span class="pr-6 hidden md:inline-block">â
9744 <span data-component="axes-overview__font-size-text"></span> 9745 px</span> 9746 </div> 9747 </div> 9748 <div data-component="axes-overview__sample" class="gallery-sample-list-vertical-item text-[50px] md:text-[3.75vw]" lang="el"> 9749 Τα ÎÎ¿Ï Î»Î¿Ï Ïάκια Îίναι ΠαÏαδοÏÎ¹Î±ÎºÏ ÎÎ»Î»Î·Î½Î¹ÎºÏ ÎÏÏοÏκεÏαÏμα 9750 </div> 9751 </div> 9752 <!-- Type Stack Item Somewhat Piquant--> 9753 <div class="w-full text-red" data-component="axes-overview" data-set-size="false" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" style="--wght: 300; --wght-text: "300"; --wdth: 50; --wdth-text: "50""> 9754 <div class="vf-caption flex"> 9755 <span class="pr-6">â 9756 <span class="hidden md:inline-block">GT America </span>Latin</span> 9757 <div> 9758 <span class="pr-6">â 9759 <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">â 9760 <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">â 0°</span><span class="pr-6 hidden md:inline-block">â 9761 <span data-component="axes-overview__font-size-text"></span> 9762 px</span> 9763 </div> 9764 </div> 9765 <div data-component="axes-overview__sample" class="gallery-sample-list-vertical-item text-[50px] md:text-[2.25vw] italic-fonts"> 9766 Newest Instant Social Media Sensation Dish Incurrs Record Fine In 9767 Lawsuit From Recorded Inventor 9768 </div> 9769 </div> 9770 <!-- Type Stack Item Quite Palatable--> 9771 <div class="w-full text-blue" data-component="axes-overview" data-set-size="false" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" style="--wght: 200; --wght-text: "200"; --wdth: 50; --wdth-text: "50""> 9772 <div class="vf-caption flex"> 9773 <span class="pr-6">â 9774 <span class="hidden md:inline-block">GT America </span>Vietnamese</span> 9775 <div> 9776 <span class="pr-6">â 9777 <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">â 9778 <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">â 0°</span><span class="pr-6 hidden md:inline-block">â 9779 <span data-component="axes-overview__font-size-text"></span> 9780 px</span> 9781 </div> 9782 </div> 9783 <div data-component="axes-overview__sample" class="gallery-sample-list-vertical-item text-[50px] md:text-[1.5vw]"> 9784 Bánh Da Lợn Là Má»t Loại Bánh Dùng Äá» Tráng Miá»ng Cá»§a Viá»t Nam, Äặc 9785 Biá»t Là ỠNam Bá». Bánh ÄÆ°á»£c Là m Từ Bá»t NÄng, ÄÆ°á»ng Trắng, Dừa Nạo, Va 9786 Ni Hay Lá Dứa Và Má»t Sá» Gia Vá» Khác. 9787 </div> 9788 </div> 9789 9790 <!-- Type Stack Item 9 out of 10 --> 9791 <div class="w-full text-red" data-component="axes-overview" data-set-size="false" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" style="--wght: 100; --wght-text: "100"; --wdth: 50; --wdth-text: "50""> 9792 <div class="vf-caption flex"> 9793 <span class="pr-6">â 9794 <span class="hidden md:inline-block">GT America </span>Latin</span> 9795 <div> 9796 <span class="pr-6">â 9797 <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">â 9798 <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">â 0°</span><span class="pr-6 hidden md:inline-block">â 9799 <span data-component="axes-overview__font-size-text"></span> 9800 px</span> 9801 </div> 9802 </div> 9803 <div data-component="axes-overview__sample" class="gallery-sample-list-vertical-item text-[50px] md:text-[1vw]"> 9804 This Dessert Gathers A Rating Of Seven Out Of Nine Possible Points 9805 From The Illustrious Jury Consisting Of Hundreds Of Previous Prize 9806 Winners And Their Collaborators Who Might Have Also Won Other Contests 9807 At Other Times 9808 </div> 9809 </div> 9810 </div> 9811 </div> 9812</div> 9813 9814 9815<div class="flex md:ml-[132px] px-4 py-8 mb-8 md:mb-10 relative"> 9816 <!-- Printmarks Beginning --> 9817 <!-- Bottom Left --> 9818 <img class="absolute bottom-0 md:bottom-[-20px] left-0 scale-50 rotate-[270deg]" src="/trim-bm-blue.77fd5ce2.png"> 9819 <!-- Bottom Middle --> 9820 <img class="absolute bottom-0 md:bottom-[-20px] left-[50%] right-[50%] scale-50 rotate-[180deg]" src="/cross-blue.9784e107.png"> 9821 <!-- Bottom Right --> 9822 <img class="absolute bottom-0 md:bottom-[-20px] right-0 scale-50 rotate-[90deg]" src="/trim-bm-blue.77fd5ce2.png"> 9823 9824 <!-- Left Middle --> 9825 <img class="hidden md:inline absolute top-[37%] bottom-[63%] left-0 scale-50 rotate-[270deg]" src="/trim-bm-blue.77fd5ce2.png"> 9826 9827 <!-- Right Middle --> 9828 <img class="hidden md:inline absolute top-[33%] bottom-[67%] right-0 scale-50 rotate-[90deg]" src="/trim-bm-blue.77fd5ce2.png"> 9829 9830 <!-- Printmarks Ending--> 9831
9832 <!-- one "row" on desktop --> 9833 <div class="grid-setup"> 9834 <!-- 1 of 3 column with images or lotties --> 9835 <div class="flex col-span-4 md:col-span-4 flex-col items-center justify-between pr-4"> 9836 <div class="pb-8 hidden md:flex flex-col"> 9837 <div class="vf-caption pb-5">GT America Greek</div> 9838 <img class="pb-8" src="/1-clarks_sandwich.e1a637c2.gif"> 9839 </div> 9840 <div class="flex flex-col"> 9841 <div class="vf-caption">GT America Thai</div> 9842 <lottie-player data-component="lottie-player" class="z-0" data-src="product-gum.json"></lottie-player> 9843 </div> 9844 <!-- <img src="images/temp/gallery/1-pal.gif" /> --> 9845 </div> 9846 9847 <!-- 1 of 3 column with images or lotties --> 9848 <div class="col-span-4 flex flex-col items-center justify-between px-4"> 9849 <div class="pb-8"> 9850 <div class="vf-caption">GT America Cyrillic</div> 9851 <lottie-player data-component="lottie-player" class="pb-4 md:pb-8" data-src="product-caviar.json"></lottie-player> 9852 </div> 9853 <!-- Single Vertical Lottie Animation --> 9854 <div class="col-span-5 hidden md:flex flex-col items-start justify-center"> 9855 <div class="vf-caption pb-5">GT America Devanagari</div> 9856 <lottie-player data-component="lottie-player" class="" data-src="product-squigglys.json"></lottie-player> 9857 </div> 9858 </div> 9859 9860 <!-- 1 of 3 column with images or lotties --> 9861 <div class="col-span-4 flex flex-col items-start justify-between pl-4"> 9862 <div class="md:pb-8"> 9863 <div class="vf-caption pb-5">GT America Japanese</div> 9864 <img class="pb-8" src="/1-pork_skins.e3f1fd17.gif"> 9865 </div> 9866 <div class=""> 9867 <div class="vf-caption pb-5">GT America Korean</div> 9868 <img src="/1-pilot.6dce939b.gif"> 9869 </div> 9870 </div> 9871 </div> 9872</div> 9873 9874 9875<!-- American Candy VF Interaction --> 9876<div class="md:ml-[132px] px-4 mb-10 md:mb-9 relative"> 9877 <!-- Printmarks Beginning --> 9878 <!-- Bottom Left --> 9879 <img class="absolute bottom-[-55px] md:bottom-[-20px] left-0 scale-50 rotate-[270deg]" src="/trim-bm-blue.77fd5ce2.png"> 9880 <!-- Bottom Middle --> 9881 <img class="absolute bottom-[-55px] md:bottom-[-20px] left-[50%] right-[50%] scale-50 rotate-[180deg]" src="/cross-blue.9784e107.png"> 9882 <!-- Bottom Right --> 9883 <img class="absolute bottom-[-55px] md:bottom-[-20px] right-0 scale-50 rotate-[90deg]" src="/trim-bm-blue.77fd5ce2.png"> 9884 <!-- Printmarks Ending--> 9885
9886 <!-- Proportional VF Sample--> 9887 <div class="w-full" data-component="axes-overview" data-set-size="false" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" style="--wght: 900; --wght-text: "900"; --wdth: 150; --wdth-text: "150""> 9888 <div class="w-full vf-caption md:mt-10"> 9889 <span class="pr-6 hidden md:inline-block">Latin</span> 9890 <span class="pr-6">â <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6">â 0°</span><span class="pr-6">â 9891 <span data-component="axes-overview__font-size-text"></span> 9892 px</span> 9893 </div> 9894 9895 <div data-component="axes-overview__sample" class="text-[23.5vw] leading-[0.74] text-red h-[40vw] -tracking-[0.04em] flex flex-col w-full mt-[0.1em] md:-mt-[0.15em] relative overflow-hidden hover:cursor-ew-resize"> 9896 <span class="block">american</span> 9897 <span class="block absolute right-0 text-blue mt-[0.78em] md:mt-[0.74em] pr-[0.04em]">candy</span> 9898 </div> 9899 </div> 9900</div> 9901 9902 9903<div class="md:ml-[132px] px-4 mb-10 relative"> 9904 <!-- Printmarks Beginning --> 9905 <!-- Bottom Left --> 9906 <!-- <img 9907 class="absolute bottom-[-50px] md:bottom-[0] left-0 scale-50 rotate-[270deg]" 9908 src="images/marks/trim-bm-blue.png" 9909 /> --> 9910 <!-- Bottom Middle --> 9911 <!-- <img 9912 class="absolute bottom-[-50px] md:bottom-[0] left-[50%] right-[50%] scale-50 rotate-[180deg]" 9913 src="images/marks/cross-blue.png" 9914 /> --> 9915 <!-- Bottom Right --> 9916 <!-- <img 9917 class="absolute bottom-[-50px] md:bottom-[0] right-0 scale-50 rotate-[90deg]" 9918 src="images/marks/trim-bm-blue.png" 9919 /> --> 9920 9921 <!-- Right Middle --> 9922 <img class="hidden md:inline absolute top-[50%] bottom-[50%] right-0 scale-50" src="/color.ae66f817.png"> 9923 9924 <!-- Printmarks Ending--> 9925 9926 <!-- one "row" on desktop --> 9927 <div class="grid-setup"> 9928 <!-- Type Stack --> 9929 <div class="col-span-4 md:col-span-8 flex flex-col items-stretch overflow-hidden cursor-ns-resize" data-component="axes-overview-group"> 9930 <!-- Type Stack Item Arabic--> 9931 <div class="w-full text-red" data-component="axes-overview" data-set-size="false" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400"; --wdth: 100; --wdth-text: "100""> 9932 <div class="vf-caption"> 9933 <span class="pr-6">â Arabic</span><span class="pr-6">â 9934 <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">â 9935 <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">â 0°</span><span class="pr-6 hidden md:inline-block">â 9936 <span data-component="axes-overview__font-size-text"></span> 9937 px</span> 9938 </div> 9939 <div data-component="axes-overview__sample" class="text-2xl md:text-[8vw] leading-none whitespace-nowrap gallery-sample-list-vertical-item pt-4 pb-7 md:pb-8" dir="rtl"> 9940 اÙ٠ع٠ÙÙ Ø¨Ø§ÙØ·Ø±ÙÙØ© اÙÙØ¨ÙاÙÙØ© 9941 </div> 9942 </div> 9943 <!-- Type Stack Item Deva--> 9944 <div class="w-full text-blue" data-component="axes-overview" data-set-size="false" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400"; --wdth: 100; --wdth-text: "100""> 9945 <div class="vf-caption"> 9946 <span class="pr-6">â Devanagari</span><span class="pr-6">â 9947 <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">â 9948 <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">â 0°</span><span class="pr-6 hidden md:inline-block">â 9949 <span data-component="axes-overview__font-size-text"></span> 9950 px</span> 9951 </div> 9952 <div data-component="axes-overview__sample" class="text-2xl md:text-[8vw] leading-none whitespace-nowrap gallery-sample-list-vertical-item pb-6 md:pb-7"> 9953 à¤à¥à¤²à¤¾à¤¬ à¤à¤¾à¤®à¥à¤¨Â à¤à¤ पà¥à¤°à¤à¤¾à¤° 9954 </div> 9955 </div> 9956 <!-- Type Stack Item Hebrew--> 9957 <div class="w-full text-red md:pb-5" data-component="axes-overview" data-set-size="false" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400"; --wdth: 100; --wdth-text: "100""> 9958 <div class="vf-caption">
9959 <span class="pr-6">â Hebrew</span><span class="pr-6">â 9960 <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">â 9961 <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">â 0°</span><span class="pr-6 hidden md:inline-block">â 9962 <span data-component="axes-overview__font-size-text"></span> 9963 px</span> 9964 </div> 9965 <div data-component="axes-overview__sample" class="text-2xl md:text-[8vw] leading-none whitespace-nowrap gallery-sample-list-vertical-item" dir="rtl"> 9966 קר×× ×¥ ××× ×¢××× ×¢×©××× 9967 </div> 9968 </div> 9969 <!-- Type Stack Item Korean--> 9970 <div class="w-full text-blue pb-5 md:pb-7" data-component="axes-overview" data-set-size="false" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400"; --wdth: 100; --wdth-text: "100""> 9971 <div class="vf-caption"> 9972 <span class="pr-6">â Korean</span><span class="pr-6">â 9973 <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">â 9974 <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">â 0°</span><span class="pr-6 hidden md:inline-block">â 9975 <span data-component="axes-overview__font-size-text"></span> 9976 px</span> 9977 </div> 9978 <div data-component="axes-overview__sample" class="text-2xl md:text-[8vw] leading-none whitespace-nowrap gallery-sample-list-vertical-item pt-4 pb-3"> 9979 ì¶ìµì ë¬ê³ ë ë§ëì¬íì 9980 </div> 9981 </div> 9982 <!-- Type Stack Item Thai--> 9983 <div class="w-full text-red" data-component="axes-overview" data-set-size="false" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400"; --wdth: 100; --wdth-text: "100""> 9984 <div class="vf-caption"> 9985 <span class="pr-6">â Thai Looped</span><span class="pr-6">â 9986 <span data-component="axes-overview__wdth-text"></span> Wdth</span><span class="pr-6">â 9987 <span data-component="axes-overview__wght-text"></span> Wght</span><span class="pr-6 hidden md:inline-block">â 0°</span><span class="pr-6 hidden md:inline-block">â 9988 <span data-component="axes-overview__font-size-text"></span> 9989 px</span> 9990 </div> 9991 <div data-component="axes-overview__sample" class="text-2xl md:text-[8vw] leading-none whitespace-nowrap gallery-sample-list-vertical-item thai-looped-fonts"> 9992 à¸à¸à¸¡à¸à¸£à¸Â à¹à¸à¹à¸à¸à¸à¸¡à¹à¸à¸¢ 9993 </div> 9994 </div> 9995 </div> 9996 <!-- Single Vertical Lottie Animation --> 9997 <div class="col-span-4 flex items-center justify-center"> 9998 <lottie-player data-component="lottie-player" data-src="character-hotdog-001.json"></lottie-player> 9999 </div> 10000 </div> 10001</div> 10002 10003 10004<div class="flex md:ml-[132px] px-4 mt-10 mb-7 relative"> 10005 <!-- Printmarks Beginning --> 10006 <!-- Top Left --> 10007 <img class="absolute top-[-80px] left-0 scale-50 rotate-[270deg]" src="/trim-bm-blue.77fd5ce2.png"> 10008 <!-- Top Center Left --> 10009 <img class="hidden md:inline absolute top-[-80px] left-[16%] right-[84%] scale-50" src="/trim-bm-blue.77fd5ce2.png"> 10010 <!-- Top Center Middle --> 10011 <img class="absolute top-[-80px] left-[48%] right-[52%] md:left-[48%] md:right-[52%] scale-50" src="/trim-bm-blue.77fd5ce2.png"> 10012 <!-- Top Center Right --> 10013 <img class="hidden md:inline absolute top-[-80px] left-[81%] right-[19%] scale-50" src="/trim-bm-blue.77fd5ce2.png"> 10014 <!-- Top Right --> 10015 <img class="absolute top-[-80px] right-0 scale-50 rotate-[90deg]" src="/trim-bm-blue.77fd5ce2.png"> 10016 <!-- Bottom Left--> 10017 <img class="absolute bottom-[-20px] md:bottom-0 left-0 scale-50 rotate-[270deg]" src="/trim-bm-blue.77fd5ce2.png"> 10018 <!-- Bottom Middle --> 10019 <img class="absolute bottom-[-20px] md:bottom-0 left-[50%] right-[50%] scale-50" src="/cross-blue.9784e107.png"> 10020 <!-- Bottom Right --> 10021 <img class="absolute bottom-[-20px] md:bottom-0 right-0 scale-50 rotate-[90deg]" src="/trim-bm-blue.77fd5ce2.png"> 10022 <!-- Printmarks Ending--> 10023
10024 <!-- one "row" on desktop --> 10025 <div class="grid-setup"> 10026 <!-- 1 of 2 rows with images or lotties --> 10027 <div class="col-span-4 md:col-span-12 flex flex-row px-4 grid-setup"> 10028 <div class="flex flex-col col-span-4 md:col-span-2 pb-8"> 10029 <div class="vf-caption pb-5">GT America Thai</div> 10030 <img class="" src="/2-steel_balls.91e61533.gif"> 10031 </div> 10032 <div class="hidden md:flex flex-col col-span-2 md:col-span-4 pb-8"> 10033 <div class="vf-caption pb-5">GT America Latin</div> 10034 <lottie-player data-component="lottie-player" class="" data-src="character-fireworks-cracker.json"></lottie-player> 10035 </div> 10036 <div class="flex flex-col col-span-4 md:col-span-4 pb-8"> 10037 <div class="vf-caption pb-5">GT America Latin</div> 10038 <img class="" src="/2-masters_of_helvetia.ed5b5d2c.gif"> 10039 </div> 10040 <div class="hidden md:flex flex-col col-span-2 md:col-span-2 pb-8"> 10041 <div class="vf-caption pb-5">GT America Hebrew</div> 10042 <img class="" src="/2-spraymix.cfd9ae23.gif"> 10043 </div> 10044 10045 <!-- 2 of 2 rows with images or lotties --> 10046 <div class="col-span-4 md:col-span-12 flex flex-row px-4 grid-setup"> 10047 <div class="flex flex-col col-span-4 md:col-span-2 pb-6"> 10048 <div class="vf-caption pb-5">GT America Korean</div> 10049 <img class="" src="/2-musketeers.4c7151b8.gif"> 10050 </div> 10051 <div class="hidden md:flex flex-col col-span-2 md:col-span-4 pb-6"> 10052 <div class="vf-caption pb-5">GT America Latin</div> 10053 <lottie-player data-component="lottie-player" class="md:-translate-y-[15%]" data-src="product-popcorn.json"></lottie-player> 10054 </div> 10055 <div class="flex flex-col col-span-4 md:col-span-2 pb-6"> 10056 <div class="vf-caption pb-5">GT America Latin</div> 10057 <lottie-player data-component="lottie-player" class="" data-src="product-lightningspray.json"></lottie-player> 10058 </div> 10059 <div class="hidden md:flex flex-col col-span-4 md:col-span-4 pb-6"> 10060 <div class="vf-caption pb-5">GT America Latin</div> 10061 <img class="" src="/1-product-fruitpunch.d5d3225b.png"> 10062 </div> 10063 </div> 10064 </div> 10065 </div> 10066</div> 10067 10068 10069</section> 10070 10071 10072 <!--LANGUAGES SECTION--> 10073 <section data-nav-section="languages" data-nav-colour-switcher-colour="white" data-nav-colour-switcher-colour-hover="red" class="bg-blue text-white pt-9 md:pb-10"> 10074 <section class="flex"> 10075 <!-- Full Width Content Area --> 10076 <div data-component="section-scene" data-autoplay-until="1" data-src="/models/airline/airline-v006/airline-v006.gltf" data-src-mobile="/models/airline/airline-mobile-v002/airline-mobile-v002.gltf" class="flex justify-center align-center w-full h-[100vh]"></div> 10077</section> 10078<section class="md:ml-[132px] px-4 mb-9 flex"> 10079 <!-- Partial Width Content Area --> 10080 <div class="md:ml-[170px] md:mr-4 grid-setup"> 10081 <h2 class="col-span-full text-2xl md:text-3xl pb-5 md:pb-4"> 10082 Going Global 10083 </h2> 10084 <p class="col-span-4 md:col-span-10 text-md md:text-xl"> 10085 We collaborated with our partners from around the world to expand the 10086 typeface to five new scriptsâArabic عربÙ, Devanagari दà¥à¤µà¤¨à¤¾à¤à¤°à¥, Hebrew 10087 ×¢×ר×ת, Korean íê¸, and Thai 10088 <span class="thai-looped-fonts">ภาษาà¹à¸à¸¢</span>âto enable GT Americaâs role 10089 as a global typeface. These collaborators brought their design expertise 10090 and fluency while applying GT Americaâs personality to Grilli Typeâs most 10091 comprehensive script extension yet. 10092 </p> 10093 </div> 10094</section> 10095 10096 <!-- Scripts Style Overview List of Styles across Scripts --> 10097<section class="md:ml-[132px] md:px-4 mb-9 flex flex-col"> 10098 <div class="flex flex-col md:flex-row"> 10099 <!-- Partial Width Content Area With Section Nav --> 10100 <!-- Section Nav Area --> 10101 <div class="block ml-4 md:w-[120px] md:h-1/2 text-xs"> 10102 <div class="flex flex-col justify-center md:h-full"> 10103 <h3 class="text-lg pb-6 md:pb-0">Available Scripts</h3> 10104 </div> 10105 </div> 10106 <!-- Main Content Area --> 10107 <div class="md:ml-[48px] md:mr-4 w-full text-xs"> 10108 <div class="w-full grid-setup"> 10109 <div class="col-span-4 md:col-span-4 text-md px-4 md:px-0 pb-6"> 10110 <h4 class="pb-3">The Original Four</h4> 10111 GT Americaâs original 84 styles are available in Latin, Cyrillic, 10112 Greek, and Vietnamese. This includes five widths and a monospaced 10113 version. 10114 </div> 10115 </div> 10116 </div> 10117 </div> 10118 10119 <div class="flex flex-row mb-10"> 10120 <!-- Partial Width Content Area With Section Nav --> 10121 <!-- Section Nav Area --> 10122 <div class="hidden md:block ml-4 md:w-[120px] text-xs sticky self-start" data-component="sticky-subnav"> 10123 <div class="flex flex-col justify-center md:h-full"> 10124 <ul> 10125 <li class="pt-2">6 Widths</li> 10126 <li class="pt-2">7 Weights</li> 10127 <li class="pt-2">Proportional</li> 10128 <li class="pt-2">Monospaced</li> 10129 <li class="pt-2">Variable Fonts</li> 10130 </ul> 10131 </div> 10132 </div> 10133 <!-- Main Content Area --> 10134 <div class="mx-4 md:ml-[48px] md:mr-4 w-full text-xs cursor-wait"> 10135 <!-- One row of scripts --> 10136 <div data-component="avail-scripts-animation-group" data-mode="wdthwght" class="grid-setup"> 10137 <div class="col-span-4 md:col-span-6"> 10138 <div class="flex flex-row justify-between border-t pt-2 mb-3"> 10139 <h4 class="vf-caption">Latin</h4> 10140 <div class="md:hidden vf-caption">6 Widths ⢠7 Weights</div> 10141 </div> 10142 <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center text-center font-std-regular text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-6 md:pb-9 leading-[0.8em] overflow-x-hidden"> 10143 Latin 10144 </div> 10145 </div> 10146 10147 <div class="col-span-4 md:col-span-6"> 10148 <div class="flex flex-row justify-between border-t pt-2 mb-3"> 10149 <h4 class="vf-caption">Cyrillic</h4> 10150 <div class="md:hidden vf-caption">6 Widths ⢠7 Weights</div> 10151 </div> 10152 <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-6 md:pb-9 overflow-x-hidden leading-[0.8em]"> 10153 ÐиÑилиÑÑ 10154 </div> 10155 </div> 10156 10157 <div class="col-span-4 md:col-span-6"> 10158 <div class="flex flex-row justify-between border-t pt-2 mb-3"> 10159 <h4 class="vf-caption">Greek</h4> 10160 <div class="md:hidden vf-caption">6 Widths ⢠7 Weights</div> 10161 </div> 10162 <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-6 md:pb-9 overflow-x-hidden leading-[0.8em]"> 10163 Îλληνικά 10164 </div> 10165 </div> 10166 10167 <div class="col-span-4 md:col-span-6"> 10168 <div class="flex flex-row justify-between border-t pt-2 mb-3"> 10169 <h4 class="vf-caption">Vietnamese</h4> 10170 <div class="md:hidden vf-caption">6 Widths ⢠7 Weights</div> 10171 </div> 10172 <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-6 md:pb-9 overflow-x-hidden leading-[0.8em]"> 10173 Chữ Viá»t 10174 </div> 10175 </div> 10176 </div> 10177 </div> 10178 </div> 10179 10180 <div class="flex flex-row mb-10"> 10181 <!-- Partial Width Content Area With Section Nav --> 10182 10183 <!-- Section Nav Area --> 10184 <div class="hidden md:block ml-4 md:w-[120px] text-xs sticky self-start" data-component="sticky-subnav"> 10185 <div class="flex flex-col justify-center md:h-full"> 10186 <ul> 10187 <li class="pt-2">1 Width</li> 10188 <li class="pt-2">7 Weights</li> 10189 <li class="pt-2">Includes Latin+</li> 10190 <li class="pt-2">Proportional only</li> 10191 <li class="pt-2">Variable Fonts</li> 10192 </ul> 10193 </div> 10194 </div> 10195 10196 <!-- Main Content Area --> 10197 <div class="mx-4 md:ml-[48px] md:mr-4 w-full text-xs cursor-wait"> 10198 <div class="w-full grid-setup"></div> 10199 10200 <!-- One row of scripts --> 10201 <div data-component="avail-scripts-animation-group" data-mode="wght" class="grid-setup"> 10202 <div class="col-span-4 md:col-span-12 grid-setup"> 10203 <div class="col-span-4 md:col-span-4 text-md pb-6"> 10204 <h4 class="pb-3">Intl Expansion</h4> 10205 These scripts are designed as counterparts to the Latinâs standard 10206 widthâs seven weights. Each script is available separately and 10207 always includes the Latin character set. 10208 </div> 10209 </div> 10210 10211 <div class="col-span-4 md:col-span-6"> 10212 <div class="flex flex-row justify-between border-t pt-2 mb-3"> 10213 <h4 class="vf-caption">Arabic</h4> 10214 <div class="md:hidden vf-caption">7 Weights</div> 10215 </div> 10216 <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-3 md:pb-9 overflow-x-hidden leading-[0.8em]"> 10217 عرب٠10218 </div> 10219 </div> 10220 10221 <div class="col-span-4 md:col-span-6"> 10222 <div class="flex flex-row justify-between border-t pt-2 mb-3"> 10223 <h4 class="vf-caption">Devanagari</h4> 10224 <div class="md:hidden vf-caption">7 Weights</div> 10225 </div> 10226 <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-6 md:pb-9 overflow-x-hidden leading-[0.8em]"> 10227 दà¥à¤µà¤¨à¤¾à¤à¤°à¥ 10228 </div> 10229 </div> 10230 10231 <div class="col-span-4 md:col-span-6"> 10232 <div class="flex flex-row justify-between border-t pt-2 mb-3"> 10233 <h4 class="vf-caption">Hebrew</h4> 10234 <div class="md:hidden vf-caption">7 Weights</div> 10235 </div> 10236 <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-5 md:pb-9 overflow-x-hidden leading-[0.8em]"> 10237 ×¢×ר×ת 10238 </div> 10239 </div> 10240 10241 <div class="col-span-4 md:col-span-6"> 10242 <div class="flex flex-row justify-between border-t pt-2 mb-3"> 10243 <h4 class="vf-caption">Korean</h4> 10244 <div class="md:hidden vf-caption">7 Weights</div> 10245 </div> 10246 <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-6 md:pb-9 overflow-x-hidden leading-[0.8em]"> 10247 íê¸ 10248 </div> 10249 </div> 10250 10251 <div class="col-span-4 md:col-span-12"> 10252 <div class="flex flex-row justify-between border-t pt-2 mb-4"> 10253 <div class="w-full grid-setup"> 10254 <div class="col-span-4 md:col-span-6 flex justify-between"> 10255 <h4 class="vf-caption inline md:block"> 10256 Thai Looped<span class="inline md:hidden"> / Loopless</span> 10257 </h4> 10258 <div class="inline md:hidden vf-caption">7 Weights</div> 10259 </div> 10260 <div class="hidden md:flex md:col-span-6"> 10261 <h4 class="vf-caption">Thai Loopless</h4> 10262 </div> 10263 </div> 10264 </div> 10265 <div class="w-full flex flex-col md:flex-row"> 10266 <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center w-full md:w-1/2 text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-5 md:pt-6 md:pb-9 leading-[0.8em] thai-looped-fonts"> 10267 ภาษาà¹à¸à¸¢<!-- à¸à¸µà¸à¸µ à¸à¹à¸¡à¸£à¸´à¸à¸² à¹à¸à¸¢ ลูภ--> 10268 </div> 10269 <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center w-full md:w-1/2 text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-6 md:pb-9 leading-[0.8em] overflow-x-hidden thai-loopless-fonts"> 10270 ภาษาà¹à¸à¸¢<!-- à¸à¸µà¸à¸µ à¸à¹à¸¡à¸£à¸´à¸à¸² à¹à¸à¸¢ ลูà¸à¹à¸¥à¸ª --> 10271 </div> 10272 </div> 10273 </div> 10274 </div> 10275 </div> 10276 </div> 10277 10278 <div class="flex flex-row mb-0 md:mb-10"> 10279 <!-- Partial Width Content Area With Section Nav --> 10280 10281 <!-- Section Nav Area --> 10282 <div class="hidden md:block ml-4 md:w-[120px] text-xs sticky self-start" data-component="sticky-subnav"> 10283 <div class="flex flex-col justify-center md:h-full"> 10284 <ul> 10285 <li class="pt-2">1 Width</li> 10286 <li class="pt-2">Includes Latin+</li> 10287 <li class="pt-2">Proportional only</li> 10288 <li class="pt-2">Variable Fonts</li> 10289 </ul> 10290 </div> 10291 </div> 10292 10293 <!-- Main Content Area --> 10294 <div class="mx-4 md:ml-[48px] md:mr-4 w-full text-xs cursor-wait"> 10295 <!-- One row of scripts --> 10296 <div data-component="avail-scripts-animation-group" data-mode="wght" class="grid-setup"> 10297 <div class="col-span-4 md:col-span-12 grid-setup"> 10298 <div class="col-span-4 md:col-span-4 text-md pb-6"> 10299 <h4 class="pb-3">Matching Japanese & Chinese</h4> 10300 In partnership with our local partners we offer solutions for
10301 Chinese and Japanese support on request. Taipei-based foundry Arphic 10302 Technologies provides both Simplified and Traditional Chinese 10303 designs matched to four weights of GT America. Together with 10304 Tokyo-based Type Project we offer six weights of GT America matched 10305 with their Japanese design. 10306 </div> 10307 </div> 10308 10309 <div class="col-span-4 md:col-span-6"> 10310 <div class="flex flex-row justify-between border-t pt-2 mb-3"> 10311 <h4 class="vf-caption">Simplified Chinese</h4> 10312 <div class="vf-caption hidden md:flex">AR UDJingXi HeiE1</div> 10313 <div class="md:hidden vf-caption">4 Weights</div> 10314 </div> 10315 <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-6 md:pb-9 overflow-x-hidden leading-[0.8em] simpchinese-fonts"> 10316 ç®ä½ä¸æ 10317 </div> 10318 </div> 10319 10320 <div class="col-span-4 md:col-span-6"> 10321 <div class="flex flex-row justify-between border-t pt-2 mb-3"> 10322 <h4 class="vf-caption">Traditional Chinese</h4> 10323 <div class="vf-caption hidden md:flex">AR UDJingXi HeiE1</div> 10324 <div class="md:hidden vf-caption">4 Weights</div> 10325 </div> 10326 <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-6 md:pb-9 overflow-x-hidden leading-[0.8em] tradchinese-fonts"> 10327 ç¹é«ä¸æ 10328 </div> 10329 </div> 10330 10331 <div class="col-span-4 md:col-span-6"> 10332 <div class="flex flex-row justify-between border-t pt-2 mb-3"> 10333 <h4 class="vf-caption">Japanese</h4> 10334 <div class="vf-caption hidden md:flex">Type Project AXIS Font</div> 10335 <div class="md:hidden vf-caption">6 Weights</div> 10336 </div> 10337 <div data-component="avail-scripts-animation-group_item" class="flex flex-col items-center text-center text-2xl md:text-[7.5vw] whitespace-nowrap pt-4 pb-7 md:pt-6 md:pb-9 overflow-x-hidden leading-[0.8em] japanese-fonts"> 10338 æ¥æ¬èª 10339 </div> 10340 </div> 10341 </div> 10342 </div> 10343 </div> 10344</section> 10345 10346 <section class="ml-[132px] px-4 hidden md:flex" data-component="show-hide-section"> 10347 <div class="hidden md:block ml-4 w-[120px] h-1/2 text-xs sticky" data-component="sticky-subnav"> 10348 <form class="flex flex-col justify-center h-full" data-component="show-hide-section__radios"> 10349 <legend class="text-lg">View Scripts</legend> 10350 10351 <div class="flex flex-col items-start pt-5"> 10352 <div class="text-white hover:text-red pt-1 w-[120px]"> 10353 <!-- I'm sure theres a better way of applying this attribute conditionally --> 10354 10355 <input type="radio" checked="" id="languages_set-script_latin" name="set-script" value="latin" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-red checked:bg-white checked:hover:border-white checked:hover:bg-red hover:cursor-pointer"> 10356 <label class="nav-radio-label hover:cursor-pointer" for="languages_set-script_latin">Latin</label> 10357</div> 10358 10359 10360 <div class="text-white hover:text-red pt-1 w-[120px]"> 10361 <!-- I'm sure theres a better way of applying this attribute conditionally --> 10362 10363 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 10364 <input type="radio" id="languages_set-script_cyrillic" name="set-script" value="cyrillic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-red checked:bg-white hover:checked:border-white hover:checked:bg-red hover:cursor-pointer"> 10365 <label class="nav-radio-label hover:cursor-pointer" for="languages_set-script_cyrillic">Cyrillic</label> 10366</div> 10367 10368 10369 <div class="text-white hover:text-red pt-1 w-[120px]"> 10370 <!-- I'm sure theres a better way of applying this attribute conditionally --> 10371 10372 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 10373 <input type="radio" id="languages_set-script_greek" name="set-script" value="greek" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-red checked:bg-white hover:checked:border-white hover:checked:bg-red hover:cursor-pointer"> 10374 <label class="nav-radio-label hover:cursor-pointer" for="languages_set-script_greek">Greek</label> 10375</div> 10376 10377 10378 <div class="text-white hover:text-red pt-1 w-[120px]"> 10379 <!-- I'm sure theres a better way of applying this attribute conditionally --> 10380 10381 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 10382 <input type="radio" id="languages_set-script_vietnamese" name="set-script" value="vietnamese" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-red checked:bg-white hover:checked:border-white hover:checked:bg-red hover:cursor-pointer"> 10383 <label class="nav-radio-label hover:cursor-pointer" for="languages_set-script_vietnamese">Vietnamese</label> 10384</div> 10385 10386 </div> 10387 10388 <div class="flex flex-col items-start pt-5"> 10389 <div class="text-white hover:text-red pt-1 w-[120px]"> 10390 <!-- I'm sure theres a better way of applying this attribute conditionally --> 10391 10392 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 10393 <input type="radio" id="languages_set-script_arabic" name="set-script" value="arabic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-red checked:bg-white hover:checked:border-white hover:checked:bg-red hover:cursor-pointer"> 10394 <label class="nav-radio-label hover:cursor-pointer" for="languages_set-script_arabic">Arabic</label> 10395</div> 10396 10397 10398 <div class="text-white hover:text-red pt-1 w-[120px]"> 10399 <!-- I'm sure theres a better way of applying this attribute conditionally --> 10400 10401 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 10402 <input type="radio" id="languages_set-script_devanagari" name="set-script" value="devanagari" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-red checked:bg-white hover:checked:border-white hover:checked:bg-red hover:cursor-pointer"> 10403 <label class="nav-radio-label hover:cursor-pointer" for="languages_set-script_devanagari">Devanagari</label> 10404</div> 10405 10406 10407 <div class="text-white hover:text-red pt-1 w-[120px]"> 10408 <!-- I'm sure theres a better way of applying this attribute conditionally --> 10409 10410 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 10411 <input type="radio" id="languages_set-script_hebrew" name="set-script" value="hebrew" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-red checked:bg-white hover:checked:border-white hover:checked:bg-red hover:cursor-pointer"> 10412 <label class="nav-radio-label hover:cursor-pointer" for="languages_set-script_hebrew">Hebrew</label> 10413</div> 10414 10415 10416 <div class="text-white hover:text-red pt-1 w-[120px]"> 10417 <!-- I'm sure theres a better way of applying this attribute conditionally --> 10418 10419 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 10420 <input type="radio" id="languages_set-script_korean" name="set-script" value="korean" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-red checked:bg-white hover:checked:border-white hover:checked:bg-red hover:cursor-pointer"> 10421 <label class="nav-radio-label hover:cursor-pointer" for="languages_set-script_korean">Korean</label> 10422</div> 10423 10424 10425 <div class="text-white hover:text-red pt-1 w-[120px]"> 10426 <!-- I'm sure theres a better way of applying this attribute conditionally --> 10427 10428 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 10429 <input type="radio" id="languages_set-script_thai" name="set-script" value="thai" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-red checked:bg-white hover:checked:border-white hover:checked:bg-red hover:cursor-pointer"> 10430 <label class="nav-radio-label hover:cursor-pointer" for="languages_set-script_thai">Thai</label> 10431</div> 10432 10433 </div> 10434 <!-- 10435 <div class="flex flex-col items-start pt-5"> 10436 <include src="source/html-includes/radio-button.html"> 10437 { "color": "white", "hoverColor": "red", "name": "set-script", "value": 10438 "chinese-simplified", "label": "Simp. Chinese", "checked": false, 10439 "namePrefix": "languages" } 10440 </include> 10441 10442 <include src="source/html-includes/radio-button.html"> 10443 { "color": "white", "hoverColor": "red", "name": "set-script", "value": 10444 "chinese-traditional", "label": "Trad. Chinese", "checked": false, 10445 "namePrefix": "languages" } 10446 </include> 10447 10448 <include src="source/html-includes/radio-button.html"> 10449 { "color": "white", "hoverColor": "red", "name": "set-script", "value": 10450 "japanese", "label": "Japanese", "checked": false, "namePrefix": 10451 "languages" } 10452 </include> 10453 </div> --> 10454</form> 10455 10456 </div> 10457 <div class="md:ml-[48px] md:mr-4 w-full text-xs block overflow-hidden" data-component="show-hide-section__section" data-show-hide-section-name="latin"> 10458 <div data-component="axes-overview-group"> 10459 <!-- L size sample --> 10460 <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 900; --wght-text: "900"; --wdth: 125; --wdth-text: "125""> 10461 <div class="w-full vf-caption">
10462 <span class="pr-6">â Latin</span> 10463 <span class="pr-6">â <span data-component="axes-overview__wdth-text"></span> Wdth</span> 10464 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10465 <span class="pr-6">â 0°</span> 10466 <span class="pr-6">â 10467 <span data-component="axes-overview__font-size-text"></span> px</span> 10468 </div> 10469 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-l"> 10470 Tasty Popcorn 10471 </div> 10472 </div> 10473 10474 <!-- M size sample --> 10475 <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: "500"; --wdth: 50; --wdth-text: "50""> 10476 <div class="w-full vf-caption"> 10477 <span class="pr-6">â Latin</span> 10478 <span class="pr-6">â <span data-component="axes-overview__wdth-text"></span> Wdth</span> 10479 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10480 <span class="pr-6">â 0°</span> 10481 <span class="pr-6">â 10482 <span data-component="axes-overview__font-size-text"></span> px</span> 10483 </div> 10484 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-m"> 10485 No Additional Preservatives<br>Brown Sugar Only Facility 10486 </div> 10487 </div> 10488 10489 <!-- S size sample --> 10490 <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: "500"; --wdth: 50; --wdth-text: "50""> 10491 <div class="w-full vf-caption"> 10492 <span class="pr-6">â Latin</span> 10493 <span class="pr-6">â <span data-component="axes-overview__wdth-text"></span> Wdth</span> 10494 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10495 <span class="pr-6">â 0°</span> 10496 <span class="pr-6">â 10497 <span data-component="axes-overview__font-size-text"></span> px</span> 10498 </div> 10499 10500 <!-- Would want to use line-clamp-3 instead of h-[170px] but line-clamp doesnât seem to work correctly for multi-column text --> 10501 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-s h-[170px]" lang="en"> 10502 An apple pie is a fruit pie in which the principal filling is apples. 10503 Apple pie is often served with whipped cream, ice cream, custard or 10504 cheddar cheese. It is generally double-crusted, with pastry both above 10505 and below the filling; the upper crust may be solid or latticed (woven 10506 of crosswise strips). The bottom crust may be baked separately to 10507 prevent it from getting soggy. Deep-dish apple pie often has a top crust 10508 only. Tarte Tatin is baked with the crust on top, but served with it on 10509 the bottom. Noted first in the 14th century, apple pie recipes are a 10510 standard part of cuisines in many countries where apples grow. Apple 10511 pies are an unofficial symbol of the United States and one of its 10512 signature comfort foods. Apple pie can be made with many different sorts 10513 of apples. The more popular cooking apples include Braeburn, Gala, 10514 Cortland, Bramley, Empire, Northern Spy, Granny Smith, and McIntosh. The 10515 fruit for the pie can be fresh, canned, or reconstituted from dried 10516 apples. Dried or preserved apples were originally substituted only at 10517 times when fresh fruit was unavailable. The basic ingredients of the 10518 filling are sugar, butter, a thickener like cornstarch and an acidic 10519 ingredient like lemon juice. Spices may be added according to taste, 10520 most commonly cinnamon, and sometimes nutmeg. Lemon juice is used to 10521 prevent oxidation of the apples when macerating the filling. Many older 10522 recipes call for honey in place of the then-expensive sugar. 10523 </div> 10524 </div> 10525 </div> 10526</div> 10527 10528 <div class="md:ml-[48px] md:mr-4 w-full text-xs block overflow-hidden" data-component="show-hide-section__section" data-show-hide-section-name="cyrillic"> 10529 <div data-component="axes-overview-group"> 10530 <!-- L size sample --> 10531 <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 900; --wght-text: "900"; --wdth: 125; --wdth-text: "125""> 10532 <div class="w-full vf-caption">
10533 <span class="pr-6">â Cyrillic</span> 10534 <span class="pr-6">â <span data-component="axes-overview__wdth-text"></span> Wdth</span> 10535 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10536 <span class="pr-6">â 0°</span> 10537 <span class="pr-6">â 10538 <span data-component="axes-overview__font-size-text"></span> px</span> 10539 </div> 10540 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-l"> 10541 ÐÐÐÐ ÐÐÐÐÐТÐÐÐ 10542 </div> 10543 </div> 10544 10545 <!-- M size sample --> 10546 <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: "500"; --wdth: 50; --wdth-text: "50""> 10547 <div class="w-full vf-caption"> 10548 <span class="pr-6">â Cyrillic</span> 10549 <span class="pr-6">â <span data-component="axes-overview__wdth-text"></span> Wdth</span> 10550 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10551 <span class="pr-6">â 0°</span> 10552 <span class="pr-6">â 10553 <span data-component="axes-overview__font-size-text"></span> px</span> 10554 </div> 10555 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-m"> 10556 ТоÑÑ Ðавлова Ñе повÑÑÑÑний<br><span class="italic-fonts">РнÑÐ¶Ð½Ð¾Ñ Ñ ÑÑÑÑÐºÐ¾Ñ ÑкоÑÐ¸Ð½ÐºÐ¾Ñ Ñ Ð¼'ÑкоÑ</span> 10557 </div> 10558 </div> 10559 10560 <!-- S size sample --> 10561 <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: "500"; --wdth: 50; --wdth-text: "50""> 10562 <div class="w-full vf-caption"> 10563 <span class="pr-6">â Cyrillic</span> 10564 <span class="pr-6">â <span data-component="axes-overview__wdth-text"></span> Wdth</span> 10565 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10566 <span class="pr-6">â 0°</span> 10567 <span class="pr-6">â 10568 <span data-component="axes-overview__font-size-text"></span> px</span> 10569 </div> 10570 10571 <!-- Would want to use line-clamp-3 instead of h-[170px] but line-clamp doesnât seem to work correctly for multi-column text --> 10572 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-s h-[170px]" lang="uk"> 10573 ÐиÌÑвÑÑка ÑÑоÑÌнда ÑÑзновид ÑÐ¾Ð»Ð¾Ð´ÐºÐ¾Ñ Ñ ÑÑÑÑкоÑ випÑÑки, заÑÐ¼Ð°Ð¶ÐµÐ½Ð¾Ñ 10574 Ñ ÑÑиÑÑÑÑ й наÑÐ¸Ð½ÐµÐ½Ð¾Ñ ÑÑÑкÑовим наповнÑваÑем. ТипологÑÑно належиÑÑ 10575 до пеÑива, але Ñей виÑÑб можна ÑозглÑдаÑи Ñ Ñк ÑÑÑÑеÑко. ÐÑÑм ÑÐ¸Ñ 10576 пÑодÑкÑÑв обов'Ñзковими ÑнгÑедÑÑнÑами Ñ Ð½ÐµÐ²ÐµÐ»Ð¸ÐºÐ¸Ñ ÐºÑлÑкоÑÑÑÑ Ð²Ð¸ÑÑÑпаÑÑÑ 10577 веÑÑкове маÑло, ÑÑÐºÐ¾Ñ Ñ Ð°Ð»ÐºÐ¾Ð³Ð¾Ð»Ñ. ÐÑÑаннÑй додаÑÑÑ Ð´Ð»Ñ Ð½Ð°Ð´Ð°Ð½Ð½Ñ Ð³Ð¾ÑÐ¾Ð²Ð¾Ð¼Ñ 10578 виÑÐ¾Ð±Ð¾Ð²Ñ Ñ ÑÑÑÑкоÑÑÑ. РклаÑиÑÐ½Ð¾Ð¼Ñ ÑеÑепÑÑ Ð¿ÐµÑедбаÑено викоÑиÑÑÐ°Ð½Ð½Ñ ÑомÑ, 10579 але його можна замÑниÑи конÑÑком, бÑендÑ, гоÑÑÐ»ÐºÐ¾Ñ Ñи ÑнÑим мÑÑним 10580 напоÑм. СÑоÑÐ¼Ð¾Ð²Ð°Ð½Ñ ÐºÐ¸ÑвÑÑÐºÑ ÑÑоÑнди ÑмажаÑÑ Ñ ÑÑиÑÑÑÑ, Ñклад Ñкого 10581 ÑеÑепÑÑÑÐ¾Ñ Ð½Ðµ ÑегламенÑований. ÐÐ»Ñ ÑÐ¼Ð°Ð¶ÐµÐ½Ð½Ñ Ð¿ÑидаÑÐ½Ñ ÑмалеÑÑ, олÑÑ, ÑÑ Ð½Ñ 10582 ÑÑмÑÑ Ñи бÑдÑ-Ñкий ÑнÑий кÑлÑнаÑний жиÑ. ÐоÑÐ¾Ð²Ñ Ð²Ð¸Ñоби поÑипаÑÑÑ 10583 ÑÑкÑÐ¾Ð²Ð¾Ñ Ð¿ÑдÑоÑ, а ÑеÑÐµÐ´Ð¸Ð½Ñ ÐºÐ¾Ð¶Ð½Ð¾Ñ ÐºÐ²ÑÑки наповнÑÑÑÑ ÑÑÑкÑÐ¾Ð²Ð¾Ñ Ð½Ð°ÑинкоÑ. 10584 ÐÑкÑлÑки ÑÑÑÑеÑка Ð²Ð¸Ñ Ð¾Ð´ÑÑÑ Ð´Ð¾Ð²Ð¾Ð»Ñ Ð¶Ð¸Ñними й Ñолодкими, Ð´Ð»Ñ Ð³Ð°ÑмонÑзаÑÑÑ 10585 ÑÐ¼Ð°ÐºÑ Ð²ÑддаÑÑÑ Ð¿ÐµÑÐµÐ²Ð°Ð³Ñ Ð½Ð°Ñинкам з киÑлÑваÑим пÑиÑмаком. Так, в УкÑаÑÐ½Ñ 10586 Ð´Ð»Ñ ÑÑого ÑÑадиÑÑйно викоÑиÑÑовÑÑÑÑ Ñгоди з виÑневого ваÑеннÑ, в ÐолÑÑÑ 10587 до попÑлÑÑÐ½Ð¸Ñ Ð½Ð°Ð¿Ð¾Ð²Ð½ÑваÑÑв належаÑÑ ÐºÐ¾Ð½ÑеÑÐ²Ð¾Ð²Ð°Ð½Ñ Ð²Ð¸ÑнÑ, ÑипÑиновий 10588 маÑмелад, Ñливовий джем. 10589 </div> 10590 </div> 10591 </div> 10592</div> 10593 10594 <div class="md:ml-[48px] md:mr-4 w-full text-xs block overflow-hidden" data-component="show-hide-section__section" data-show-hide-section-name="greek">
10595 <div data-component="axes-overview-group"> 10596 <!-- L size sample --> 10597 <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 900; --wght-text: "900"; --wdth: 125; --wdth-text: "125""> 10598 <div class="w-full vf-caption"> 10599 <span class="pr-6">â Greek</span> 10600 <span class="pr-6">â <span data-component="axes-overview__wdth-text"></span> Wdth</span> 10601 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10602 <span class="pr-6">â 0°</span> 10603 <span class="pr-6">â 10604 <span data-component="axes-overview__font-size-text"></span> px</span> 10605 </div> 10606 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-l"> 10607 ÎÏÎ¿Ï Î³Î¬ÏÏα ÎεÏÏÎ±Î»Î¿Î½Î¯ÎºÎ·Ï 10608 </div> 10609 </div> 10610 10611 <!-- M size sample --> 10612 <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: "500"; --wdth: 50; --wdth-text: "50""> 10613 <div class="w-full vf-caption"> 10614 <span class="pr-6">â Greek</span> 10615 <span class="pr-6">â <span data-component="axes-overview__wdth-text"></span> Wdth</span> 10616 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10617 <span class="pr-6">â 0°</span> 10618 <span class="pr-6">â 10619 <span data-component="axes-overview__font-size-text"></span> px</span> 10620 </div> 10621 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-m"> 10622 Îι δίÏÎ»ÎµÏ Î¼ÏοÏεί να ÎÏÎ¿Ï Î½ διάÏοÏα ÏÏήμαÏα<br><span class="italic-fonts">ÎανÏολάÏο είναι λαÏÏιÏÏÏÏ</span> 10623 </div> 10624 </div> 10625 10626 <!-- S size sample --> 10627 <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: "500"; --wdth: 50; --wdth-text: "50""> 10628 <div class="w-full vf-caption"> 10629 <span class="pr-6">â Greek</span> 10630 <span class="pr-6">â <span data-component="axes-overview__wdth-text"></span> Wdth</span> 10631 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10632 <span class="pr-6">â 0°</span> 10633 <span class="pr-6">â 10634 <span data-component="axes-overview__font-size-text"></span> px</span> 10635 </div> 10636 10637 <!-- Would want to use line-clamp-3 instead of h-[170px] but line-clamp doesnât seem to work correctly for multi-column text --> 10638 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-s h-[170px]" lang="el"> 10639 Îια Ïην ÏαÏαγÏγή ÏÎ·Ï Î±Î¼Ï Î³Î´Î±Î»ÏÏιÏαÏ, Ïα ξηÏά ÏÏ ÏÏαÏικά ÏÎ·Ï Î±Î¼Ï Î³Î´Î±Î»ÏÏιÏÎ±Ï 10640 διÏλÏνονÏαι αÏγά Ïε κÏεμÏδεÏ βοÏÏÏ Ïο και ζάÏαÏη. ΣÏη ÏÏ Î½ÎÏεια ÏÏÏ ÏÏνÏαι 10641 ÏÎ±Â Î±Ï Î³Î¬. Î Î±Î¼Ï Î³Î´Î±Î»ÏÏιÏα ÏήνεÏαι Ïε δίÏκο ÏÏην ÎºÎ¿Ï Î¶Î¯Î½Î±, ÏÏον οÏοίο 10642 ÏίÏνεÏαι αÏλÏ ÏιÏÏÏι μεÏά Ïη ÏαÏαÏÎºÎµÏ Î® ÏÎ·Ï ÎºÎ±Î¹ αÏήνεÏαι να κÏÏ ÏÏει ÏÏιν 10643 κοÏεί Ïε μεμονÏμÎνα ÏεÏÏάγÏνα κομμάÏια. Πδομή ÏÎ·Ï Î¼ÏÎ¿Ï Î³Î¬ÏÏÎ±Ï ÎµÎ¯Î½Î±Î¹ 10644 ÏÏλλο - γÎμιÏη - ÏÏλλο. Î©Ï Î³ÎμιÏη ÏÏ Î½Î®Î¸ÏÏ ÏÏηÏιμοÏοιείÏαι κÏÎμα (ÏÏην 10645 νÏÏια Îλλάδα ονομάζεÏαι μÏÎ¿Ï Î³Î¬ÏÏα μÏνο αν ÏεÏιÎÏει Î±Ï Ïή Ïην γÎμιÏη) 10646 ή ÏÏ Ïί, αν και ÏÏ Î½Î±Î½ÏάÏαι και Ïε Î¬Î»Î»ÎµÏ Î
10646³ÎµÏÏειÏ, ÏÏÏÏ Î¼ÎµÂ ÎºÎ¹Î¼Î¬, ÏÏανάκι ή 10647 με κÏÎμα κακάο. Î ÏÏÏÏÎ¿Ï ÎºÎ±ÏαÏÎºÎµÏ Î®Ï ÎºÎ±Î¹ Î´Î¿Î¼Î®Ï Î±Ï ÏÎ¿Ï ÏÎ¿Ï Î±ÏÏοÏÎºÎµÏ Î¬ÏμαÏÎ¿Ï 10648 Ïην διαÏοÏοÏοιεί αÏÏ Ïην κλαÏική ÏίÏα και Ïην καθιÏÏά Î¼Î¿Î½Î±Î´Î¹ÎºÏ ÏÏοÏÏν με 10649 ξεÏÏÏιÏÏά ÏÏοιÏεία και γεÏÏη Ïε ÏÏÎÏη με Ïην ÏίÏα, Ïα οÏοία ÎÏÎ¿Ï Î½ 10650 αναγνÏÏιÏÏεί αÏÏ ÎμÏειÏÎ¿Ï Ï ÏÎµÏ ÎºÎ±Î¹ Ïην εÏιÏÏήμη ÏÎ¿Ï Â Î¼Î¬ÏκεÏινγκ, η 10651 ÏÎµÎ»ÎµÏ Ïαία ÎÏει διαÏοÏοÏοιήÏει Ïα ÏÏοÏÏνÏα ÏίÏÎ±Ï ÎºÎ±Î¹ μÏÎ¿Ï Î³Î¬ÏÏÎ±Ï 10652 ÏÏα ΣοÏÏÎµÏ ÎάÏκεÏ. ΣÏη ÎÏÏεια Îλλάδα ÏαÏαγγÎλνεÏαι ÏÏ Î½Î®Î¸ÏÏ Î±Ïλά Ïαν «μια 10653 με ÏÏ Ïί» ή «μια με κÏÎμα», μια και αÏοÏελεί δημοÏιλή ÏÏÏÏειÏη ÏÏοÏή, και 10654 ÏεÏβίÏεÏαι κομμÎνη Ïε κομμάÏια μεγÎÎ¸Î¿Ï Ï Î¼ÏÎ¿Ï ÎºÎ¹Î¬Ï (και, η Î³Î»Ï ÎºÎ¹Î¬, 10655 ÏαÏÏαλιÏμÎνη με ζάÏαÏη άÏνη ή/και κανÎλλα). 10656 </div> 10657 </div> 10658 </div> 10659</div> 10660 10661 <div class="md:ml-[48px] md:mr-4 w-full text-xs block overflow-hidden" data-component="show-hide-section__section" data-show-hide-section-name="vietnamese"> 10662 <div data-component="axes-overview-group"> 10663 <!-- L size sample --> 10664 <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 900; --wght-text: "900"; --wdth: 125; --wdth-text: "125""> 10665 <div class="w-full vf-caption"> 10666 <span class="pr-6">â Vietnamese</span> 10667 <span class="pr-6">â <span data-component="axes-overview__wdth-text"></span> Wdth</span> 10668 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10669 <span class="pr-6">â 0°</span> 10670 <span class="pr-6">â 10671 <span data-component="axes-overview__font-size-text"></span> px</span> 10672 </div> 10673 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-l"> 10674 Bánh ÄÆ°á»£c hấp trong những 10675 </div> 10676 </div> 10677 10678 <!-- M size sample --> 10679 <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: "500"; --wdth: 50; --wdth-text: "50""> 10680 <div class="w-full vf-caption"> 10681 <span class="pr-6">â Vietnamese</span> 10682 <span class="pr-6">â <span data-component="axes-overview__wdth-text"></span> Wdth</span> 10683 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10684 <span class="pr-6">â 0°</span> 10685 <span class="pr-6">â 10686 <span data-component="axes-overview__font-size-text"></span> px</span> 10687 </div> 10688 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-m"> 10689 Muá»n là m kẹo ngon, khâu chá»n nguyên liá»u rất quan trá»ng<br><span class="italic-fonts">Thóc nếp dùng Äá» nấu mạch nha phải</span> 10690 </div> 10691 </div> 10692 10693 <!-- S size sample --> 10694 <div class="w-full cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: "500"; --wdth: 50; --wdth-text: "50""> 10695 <div class="w-full vf-caption"> 10696 <span class="pr-6">â Vietnamese</span> 10697 <span class="pr-6">â <span data-component="axes-overview__wdth-text"></span> Wdth</span> 10698 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span>
10699 <span class="pr-6">â 0°</span> 10700 <span class="pr-6">â 10701 <span data-component="axes-overview__font-size-text"></span> px</span> 10702 </div> 10703 10704 <!-- Would want to use line-clamp-3 instead of h-[170px] but line-clamp doesnât seem to work correctly for multi-column text --> 10705 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-s h-[170px]" lang="vi"> 10706 Rượu nếp có nhiá»u loại, tùy thuá»c và o loại gạo nếp và phương pháp sản 10707 xuất. Các loại rượu nếp phá» biến tại Viá»t Nam bao gá»m: Rượu nếp cái hoa 10708 và ng, Rượu nếp cẩm, Rượu nếp than. Rượu nếp ÄÆ°á»£c là m theo quy trình khá 10709 công phu và chau chuá»t: Gạo nếp sau khi ÄÆ°á»£c nấu chÃn, là m nguá»i thì 10710 ÄÆ°á»£c rắc bá»t bánh men và Äem Äi á»§. Trong quá trình á»§ nấm má»c phát triá»n 10711 trên cÆ¡m gạo nếp và tá»± tạo ra má»t há» enzim ÄÆ°á»ng hóa, cÅ©ng chÃnh quá 10712 trình nà y Äã tạo cho khá»i gạo á»§ lên men có hương thÆ¡m rất Äặc trưng, hấp 10713 dẫn. Äặc biá»t khâu cuá»i cá»§a quá trình là chưng cất rượu Nếp không sá» 10714 dụng tháp cao cất cá»n mà dùng thiết bá» chưng cất rượu Äá» thu rượu khoảng 10715 40-50 Äá» rượu. Loại bánh nà y khác biá»t hẳn so vá»i các loại trên á» Äiá»m 10716 bánh không còn tÆ¡i xá»p vá»i nhiá»u bóng khÃ. Bánh nà y khá dai, có khi chai 10717 cứng trong má»t lá»p vá» nhẵn má»n. Khác biá»t lá»n nhất so vá»i bánh truyá»n 10718 thá»ng là phần bá»t bánh dạng lá»ng ÄÆ°á»£c là m từ bá»t mì, bá»t ná»i và trứng 10719 gà . 10720 </div> 10721 </div> 10722 </div> 10723</div> 10724 10725 <div class="md:ml-[48px] md:mr-4 w-full text-xs block overflow-hidden" data-component="show-hide-section__section" data-show-hide-section-name="arabic"> 10726 <div data-component="axes-overview-group"> 10727 <!-- L size sample --> 10728 <div class="w-full cursor-ew-resize" data-component="axes-overview" data-set-size="false" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" style="--wght: 900; --wght-text: "900""> 10729 <div class="w-full vf-caption"> 10730 <span class="pr-6">â Arabic</span> 10731 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10732 <span class="pr-6">â 0°</span> 10733 <span class="pr-6">â 10734 <span data-component="axes-overview__font-size-text"></span> px</span> 10735 </div> 10736 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-l" dir="rtl" lang="ar"> 10737 Ø§ÙØ£Ø¹Ø´Ø§Ø¨ ÙØ§ÙØªÙØ§Ø¨Ù 10738 </div> 10739 </div> 10740 10741 <!-- M size sample --> 10742 <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: "500""> 10743 <div class="w-full vf-caption"> 10744 <span class="pr-6">â Arabic</span> 10745 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10746 <span class="pr-6">â 0°</span> 10747 <span class="pr-6">â 10748 <span data-component="axes-overview__font-size-text"></span> px</span> 10749 </div> 10750 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-m" dir="rtl" lang="ar"> 10751 ÙÙØ§ÙÙ ÙØ¨ÙØ§ÙØ ÙØªÙس٠ÙÙ Ø£ÙØ¶Ø§ÙÂ ÙØ´Ø·ÙÙØ©. ÙÙ ØÙ٠٠٠اÙ٠طبخ 10752 <br>Ø§Ø´ØªÙØ± اÙ٠طبخ اÙ٠صر٠ب٠ذاÙ٠اÙÙ ØµØ±Ù Ø§ÙØ®Ø§Øµ ٠ع 10753 </div> 10754 </div> 10755 10756 <!-- S size sample --> 10757 <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: "500""> 10758 <div class="w-full vf-caption"> 10759 <span class="pr-6">â Arabic</span> 10760 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span>
10761 <span class="pr-6">â 0°</span> 10762 <span class="pr-6">â 10763 <span data-component="axes-overview__font-size-text"></span> px</span> 10764 </div> 10765 10766 <!-- Would want to use line-clamp-3 instead of h-[170px] but line-clamp doesnât seem to work correctly for multi-column text --> 10767 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-s h-[170px]" dir="rtl" lang="ar"> 10768 شجرة اÙÙ ØÙب ÙÙ٠ذات Ø£ÙÙØ§Ø¹: إ٠ا أ٠تÙÙ٠٠ع Ø§ÙØ£Ø±Ø² (Ù٠٠صر ٠ع Ø§ÙØ£Ø±Ø² اس٠٠10769 أرز باÙÙØ¨Ù) أ٠٠ع اÙÙØ´Ø·Ø© Ø£Ù Ø§ÙØ³Ù ÙØ¯ Ø£Ù Ø§ÙØ¨Ø³ÙÙÙØªØ ÙØ¥Ù ا أ٠تÙÙ٠عبارة ع٠10770 ØÙÙØ¨ Ù Ø·Ø¨ÙØ® ٠ع اÙÙØ´Ø§ ØØªÙ ÙØªÙث٠اÙÙ Ø²ÙØ¬ ÙÙØµØ¨Ø ÙÙ ÙÙØ§Ù Ø£ØºÙØ¸ ث٠تصب Ù٠أطبا٠10771 ÙØªØ²Ù٠باÙÙ ÙØ³Ø±Ø§Øª أ٠اÙÙØ±ÙØ©. ÙÙÙ ÙÙ Ø£ÙØ¶Ø§Ù Ø·Ø¨Ø®ÙØ§ بØÙÙØ¨ ÙÙÙÙ Ø§ÙØ¯Ø³Ù . ÙØªØ®ØªÙÙ 10772 ØªØ³Ù ÙØ© اÙÙ ÙÙØ¨ÙØ© ÙÙ Ø§ÙØ¯ÙÙ Ø§ÙØ¹Ø±Ø¨ÙØ© ØØ³Ø¨ اÙÙÙØ¬Ø© Ø§ÙØ¹Ø§Ù ÙØ© ÙÙÙ Ø¨ÙØ¯Ø ÙØ¥Ù ÙØ§Ùت 10773 تتشاب٠٠ع Ø§Ø³Ù ÙØ§ Ø§ÙØ£ØµÙÙØ ÙØ¨ÙÙ٠ا تس٠٠Ù٠٠صر Ù ÙÙØ¨ÙØ©Ø ØªØ³Ù Ù ÙÙ Ø³ÙØ±Ùا Ù ØÙØ§ÙØ©Ø 10774 بÙÙ٠ا تس٠٠ÙÙ ÙÙØ¨Ùا Ù ØÙبÙÙ ÙÙÙ Ø§ÙØ¬Ø²Ø§Ø¦Ø± Ù ØÙبÙ. Ø§ÙØ£Ø¹Ø´Ø§Ø¨ ÙØ§ÙØªÙØ§Ø¨Ù : اÙÙØ¹Ùاع 10775 ÙØ§Ùزعتر عÙÙ ÙØ·Ø§Ù ÙØ§Ø³Ø¹Ø ÙØ§Ø³ØªØ®Ø¯Ø§Ù ÙØ§ اÙÙÙ٠شب٠عاÙÙ Ù ØªÙØ±ÙØ¨Ø§Ø Ø§ÙØªÙاب٠تستخد٠10776 بÙÙ ÙØ© Ø£ÙÙ Ø¨ÙØ«Ùر ٠٠اÙ٠طبخ اÙÙÙØ¯ÙØ ÙÙ٠اÙÙÙ ÙØ© ÙØ§ÙÙÙØ¹ ØªØªÙØ§Ùت Ù Ù Ù ÙØ·ÙØ© Ø¥ÙÙ 10777 أخرÙ. بعض Ø§ÙØ£Ø¹Ø´Ø§Ø¨ ÙØ§ÙØªÙØ§Ø¨Ù ØªØ´Ù Ù Ø§ÙØ³Ù Ø³Ù ÙØ§ÙØ²Ø¹ÙØ±Ø§ÙØ ÙØ§ÙÙØ±ÙÙ Ø Ø§ÙØ«ÙÙ Ø 10778 اÙÙÙ ÙÙØ اÙÙØ±ÙØ©Ø ÙØ§Ùس٠اÙ. Ø¨Ø§ÙØ¹Ø§Ù Ù٠اÙÙ ØµØ±ÙØ©Â Ø§ÙØºØ¯Ø§Â ÙÙ٠أÙÙ ÙØ¬Ø¨Ø©Ø ÙØªÙÙÙ ÙÙ 10779 تÙÙÙØª Ù Ù Ø§ÙØ«Ø§Ùثة ØØªÙ Ø§ÙØ®Ø§Ù سة Ø¸ÙØ±Ø§ÙØ ÙÙØ¹ØªÙ د اÙ٠طبخ اÙ٠صر٠عÙ٠اÙÙ ÙØ§Ø³Ù Ø 10780 ÙÙÙÙ Ù ÙØ³Ù Ø£Ù٠خاص Ø¨Ù ÙØªÙجة ØªÙØ§Ùر Ù ÙÙÙØ§ØªÙ Ø¨Ø§ÙØ£Ø³Ùا٠ÙÙ ÙØ°Ø§ اÙÙ ÙØ³Ù عÙÙ 10781 Ø§ÙØ±ØºÙ ÙØ£Ù ÙÙØ§Ù Ù ÙÙÙØ§Øª Ù Ù Ù ÙØ³Ù ÙØ¯ تÙÙÙ Ù ØªÙØ§Ø¬Ø¯Ø© Ø·ÙÙ Ø§ÙØ¹Ø§Ù Ø¥ÙØ§ أ٠٠عظ٠10782 اÙ٠صرÙÙÙ ÙØ§ ÙØØ¨Ø°ÙÙ Ø·Ø¨Ø®ÙØ§ Ø¥ÙØ§ ÙÙ Ù ÙØ³Ù ÙØ§. 10783 </div> 10784 </div> 10785 </div> 10786</div> 10787 10788 <div class="md:ml-[48px] md:mr-4 w-full text-xs block overflow-hidden" data-component="show-hide-section__section" data-show-hide-section-name="devanagari"> 10789 <div data-component="axes-overview-group"> 10790 <!-- L size sample --> 10791 <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 900; --wght-text: "900""> 10792 <div class="w-full vf-caption"> 10793 <span class="pr-6">â Devanagari</span> 10794 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10795 <span class="pr-6">â 10796 <span data-component="axes-overview__font-size-text"></span> px</span> 10797 </div> 10798 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-l" lang="hi"> 10799 à¤à¤¿à¤à¥à¤à¥ à¤à¤Â सà¥à¤¨à¥à¤Â ठरà¥à¤¥à¤¾à¤¤ ठलà¥à¤ªà¤¾à¤¹à¤¾à¤° à¤à¥ शà¥à¤°à¥à¤£à¥ मà¥à¤ 10800 </div> 10801 </div> 10802 10803 <!-- M size sample --> 10804 <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 700; --wght-text: "700""> 10805 <div class="w-full vf-caption"> 10806 <span class="pr-6">â Devanagari / Loopless</span> 10807 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10808 <span class="pr-6">â 10809 <span data-component="axes-overview__font-size-text"></span> px</span> 10810 </div> 10811 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-m" lang="hi">
10812 <span class="">à¤à¥à¤°Â à¤à¤ पà¥à¤°à¤à¤¾à¤° à¤à¤¾ मिषà¥à¤à¤¾à¤¨à¥à¤¨ हॠà¤à¤¿à¤¸à¥Â à¤à¤¾à¤µà¤²Â à¤à¥Â दà¥à¤§Â मà¥à¤ </span><span class="">à¤à¥à¤²à¤¾à¤¬ à¤à¤¾à¤®à¥à¤¨Â à¤à¤ पà¥à¤°à¤à¤¾à¤° à¤à¤¾ पà¤à¤µà¤¾à¤¨</span> 10813 </div> 10814 </div> 10815 10816 <!-- S size sample --> 10817 <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 400; --wght-text: "400""> 10818 <div class="w-full vf-caption"> 10819 <span class="pr-6">â Devanagari</span> 10820 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10821 <span class="pr-6">â 10822 <span data-component="axes-overview__font-size-text"></span> px</span> 10823 </div> 10824 10825 <!-- Would want to use line-clamp-3 instead of h-[170px] but line-clamp doesnât seem to work correctly for multi-column text --> 10826 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-s h-[170px]" lang="hi"> 10827 वरà¤à¤¼ बनानॠà¤à¥ लिठà¤à¤¾à¤à¤¦à¥ à¤à¥ पà¥à¤ पà¥à¤ à¤à¤° à¤à¤ à¤à¤¾à¤¦à¤° मà¥à¤ ढाला à¤à¤¾à¤¤à¤¾ हॠà¤à¤° à¤à¤¸à¤à¥ 10828 मà¥à¤à¤¾à¤ मातà¥à¤° à¤à¥à¤ माà¤à¤à¥à¤°à¥à¤®à¥à¤à¤° हॠरह à¤à¤¾à¤¤à¥ हà¥à¥¤ à¤à¤¸à¥ सहà¥à¤à¤¨à¥ à¤à¥ लिठà¤à¤¸à¥ à¤à¤¾à¤à¤ à¤à¥ 10829 परतà¥à¤ à¤à¥ बà¥à¤ रà¤à¤¾ à¤à¤¾à¤¤à¤¾ हॠà¤à¤° à¤à¤¸à¥ à¤à¤ªà¤¯à¥à¤ सॠपहलॠà¤à¤¨ à¤à¤¾à¤à¤à¥à¤ मॠसॠनिà¤à¤¾à¤²à¤¾ 10830 à¤à¤¾à¤¤à¤¾ हà¥à¥¤ यह बहà¥à¤¤ हॠनाà¤à¤¼à¥à¤ हà¥à¤¤à¤¾ हॠà¤à¤° à¤à¥à¤¨à¥ पर à¤à¥à¤à¥ à¤à¥à¤à¥ à¤à¥à¤à¤¡à¤¼à¥à¤ मà¥à¤ à¤à¥à¤ 10831 à¤à¤¾à¤¤à¤¾ हà¥à¥¤. à¤à¤ लà¥à¤à¤° à¤à¤¾à¤ मà¥à¤ लà¤à¤à¤ २०० à¤à¥à¤°à¤¾à¤® बाà¤à¤°à¥ à¤à¤¾ à¤à¤à¤¾ मिलाà¤à¤° à¤à¤ पर 10832 à¤à¤¢à¤¾à¤µà¥à¤ à¤à¤° धà¥à¤°à¥ धà¥à¤°à¥ लà¤à¤¡à¤¼à¥ à¤à¥ à¤à¤¾à¤à¥ सॠहिलातॠरहà¥à¤. à¤à¤¬ यह à¤à¤¾à¤¢à¥ हॠà¤à¤¾à¤ à¤à¤° 10833 à¤à¤«à¤¨à¤¨à¥ लà¤à¥ तब नà¥à¤à¥ à¤à¤¤à¤¾à¤° à¤à¤° सà¥à¤µà¤¾à¤¦ à¤à¥ ठनà¥à¤¸à¤¾à¤° नमठमिलावà¥à¤. यदि à¤à¤¾à¤¢à¥ 10834 à¤à¥à¤¯à¥à¤¯à¥à¤¯à¤¾à¤¦à¤¾ हॠà¤à¤¾à¤ तॠà¤à¤¸à¤®à¥à¤ ठà¤à¤¡à¤¾ à¤à¤¾à¤ à¤à¤° मिलावà¥à¤. यह राबडॠपà¥à¤°à¤¾à¤¯ शरà¥à¤¦à¥ à¤à¥ 10835 मà¥à¤¸à¤® मà¥à¤ à¤à¤¾à¤ à¤à¤¾à¤¤à¥ हà¥à¥¤ साम à¤à¥ à¤à¤°à¤® à¤à¤°à¤® à¤à¤¾à¤ à¤à¤¾à¤¤à¥ हॠà¤à¤° सà¥à¤¬à¤¹ à¤à¤¸à¤®à¥ ठà¤à¤¡à¥ मà¥à¤ 10836 दहॠमिलाà¤à¤° बाà¤à¤°à¥ à¤à¥ रà¥à¤à¥ à¤à¥ साथ à¤à¤¾à¤¯à¤¾ à¤à¤¾à¤¤à¤¾ हà¥à¥¤. à¤à¤¾à¤à¤¦à¥ à¤à¤¾ वरà¤à¤¼Â या 10837 सिरà¥à¤«Â वरà¤à¤¼ à¤à¤¾à¤à¤¦à¥ ठथवा शयà¥à¤à¤à¤®à¤¾à¤à¤¸à¤°à¥à¤Â सॠबना à¤à¤ पतरा हॠà¤à¤°Â à¤à¤¾à¤°à¤¤Â à¤à¤° पड़à¥à¤¸à¥ 10838 दà¥à¤¶à¥à¤ à¤à¥à¤¸à¥ à¤à¤¿Â पाà¤à¤¿à¤¸à¥à¤¤à¤¾à¤¨, नà¥à¤ªà¤¾à¤², बाà¤à¤à¥à¤²à¤¾à¤¦à¥à¤¶Â à¤à¤¦à¤¿ मà¥à¤ à¤à¤¸à¤à¤¾ à¤à¤ªà¤¯à¥à¤ मिठाà¤à¤¯à¥à¤ 10839 à¤à¤° वà¥à¤¯à¤à¤à¤¨à¥à¤ à¤à¥ सà¤à¤¾à¤¨à¥ à¤à¥ लिठà¤à¤¿à¤¯à¤¾ à¤à¤¾à¤¤à¤¾ हà¥à¥¤ à¤à¤¾à¤à¤¦à¥ à¤à¥ à¤à¤¾à¤¯à¤¾ à¤à¤¾ सà¤à¤¤à¤¾ हॠ10840 हालाà¤à¤à¤¿, यह पà¥à¤°à¥à¤£à¤¤à¤¯à¤¾ सà¥à¤µà¤¾à¤¦à¤µà¤¿à¤¹à¥à¤¨ हà¥à¤¤à¥ हà¥à¥¤ à¤à¤¾à¤à¤¦à¥ ततà¥à¤µ à¤à¤¾ à¤à¤ बड़ॠमातà¥à¤°à¤¾ 10841 मà¥à¤ सà¥à¤µà¤¨Â ठरà¥à¤à¥à¤°à¤¿à¤¯à¤¾Â à¤à¤¾ à¤à¤¾à¤°à¤£ बन सà¤à¤¤à¤¾ हà¥, लà¥à¤à¤¿à¤¨ वरà¥à¤ मà¥à¤ à¤à¤¸à¤à¥ बहà¥à¤¤ हॠà¤à¤® 10842 मातà¥à¤°à¤¾ हà¥à¤¨à¥ à¤à¥ à¤à¤¾à¤°à¤£ à¤à¤¸à¥ शरà¥à¤° à¤à¥ लिठहानिà¤à¤¾à¤°à¤ नहà¥à¤ माना à¤à¤¾à¤¤à¤¾à¥¤. 10843 </div> 10844 </div> 10845 </div> 10846</div> 10847 10848 <div class="md:ml-[48px] md:mr-4 w-full text-xs block overflow-hidden" data-component="show-hide-section__section" data-show-hide-section-name="hebrew"> 10849 <div data-component="axes-overview-group"> 10850 <!-- L size sample --> 10851 <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 900; --wght-text: "900""> 10852 <div class="w-full vf-caption">
10853 <span class="pr-6">â Hebrew</span> 10854 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10855 <span class="pr-6">â 0°</span> 10856 <span class="pr-6">â 10857 <span data-component="axes-overview__font-size-text"></span> px</span> 10858 </div> 10859 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-l" dir="rtl" lang="he"> 10860 ××©× × ×ספר ס×פ×ר×× ××××ת ××§×ר 10861 </div> 10862 </div> 10863 10864 <!-- M size sample --> 10865 <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: "500""> 10866 <div class="w-full vf-caption"> 10867 <span class="pr-6">â Hebrew</span> 10868 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10869 <span class="pr-6">â 0°</span> 10870 <span class="pr-6">â 10871 <span data-component="axes-overview__font-size-text"></span> px</span> 10872 </div> 10873 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-m" dir="rtl" lang="he"> 10874 ××©× × ×ספר ס×פ×ר×× ××××ת ××§×ר צ××¨×ª× ×©× 10875 <br>×××× ××× ××× ××פ×, ×עש×× ×ר×× ××צק ×ת××§ ×××××× ××¤×¨× 10876 </div> 10877 </div> 10878 10879 <!-- S size sample --> 10880 <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 500; --wght-text: "500""> 10881 <div class="w-full vf-caption"> 10882 <span class="pr-6">â Hebrew</span> 10883 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10884 <span class="pr-6">â 0°</span> 10885 <span class="pr-6">â 10886 <span data-component="axes-overview__font-size-text"></span> px</span> 10887 </div> 10888 10889 <!-- Would want to use line-clamp-3 instead of h-[170px] but line-clamp doesnât seem to work correctly for multi-column text --> 10890 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-s h-[170px]" dir="rtl" lang="he"> 10891 ×××¢× ×¦×רת ××ר×ס ×××× ××××©× ×ס×ר×פ ×¢× ×× ×ª ש××§×× ×¦×פ×× ×§×©× ××××. ×××× 10892 ×רס××ת ש×× ×ת ××××× ×××¨×¡× ××ס×ס×ת, ×§××××ת ×× ×רס××ת ×¢× ×ª×ספת ×צ×, ש××, 10893 ש××ש××, ×¤×¨× ××× ×× ×××¦× ×××¢× ×©×ס××¡× ××§×× ×©×פ××, ×××× ×××× ×× ×××צת.××××× 10894 ××××ר ×× ××¢× ×תר××ת ××××¨× ××ר×פ××ת ××§×××ת ××××קת ×¨× ×©×¤×ª×ת ×¢× ×××ס××ר×× 10895 ש××. ×¢× ×¤× ××××©× ×××× ×¨×ס××× ×××××ר ×ר×ש×× ××××× ×××× ××× ××¢×ר קרק×× 10896 ×××× ×-16 ××שר ××× × ××ª× ×××ª× × ×× ×©×× ×××ר ×××××. ×× ×××× ×ר×ס×××, ×ש 10897 ××××¢× ×× ×©×××¢× ××××¦× ××ר×× ×× ×× ××רת ×××××× ××××× ×©×¤×ר××©× ××עת ×× ×¦×××. 10898 ××××× ×¡××£ ×××× ×-19 ×ת×××ת ×××× ×-20 ××××¨× ×××××× ×¨××× ×× ×¦×¤×× ××ר××§× 10899 ×××××× ×ת ×××¢× ××× ××ת×, ××× ××¤× ×××× ×× ××× ×ש×× ××××× ×××ר××§×× ×××§× ××. 10900 ××©× ×ª 1960, ××צ×× ×× ×ª××פס×× ×ת ××××× × ×ר×ש×× × ×××× ×ª ×××××. ××©× × ×ספר 10901 ס×פ×ר×× ××××ת ××§×ר צ××¨×ª× ×©× ×××××××. ××¤× ×××× ××ת, ×××¤× ×©××רשע ××× ×× 10902 ×§××× ×ת×××××× ×ת ×××× ×ת ××ר ×××× ×× ×××× ××צ×ר ××× ×©×ר×× × ××ª× ×ר××ת ×ת 10903 ×ש×ש ש××ש פע×××; ××××¤× ××¤× ×¡×פ×ר ××ר, ×צ×ר ×ס××ת ×ת ×××§×× ×××××× ×©× × ××ר 10904 </div> 10905 </div> 10906 </div> 10907</div> 10908 10909 <div class="md:ml-[48px] md:mr-4 w-full text-xs block overflow-hidden" data-component="show-hide-section__section" data-show-hide-section-name="korean"> 10910 <div data-component="axes-overview-group"> 10911 <!-- L size sample --> 10912 <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 900; --wght-text: "900""> 10913 <div class="w-full vf-caption">
10914 <span class="pr-6">â Korean</span> 10915 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10916 <span class="pr-6">â 10917 <span data-component="axes-overview__font-size-text"></span> px</span> 10918 </div> 10919 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-l" lang="ko"> 10920 ë¬ê³ ë ëë ë½ê¸°ë ì¤íìÂ ë² ì´í¹ìë¤ë¥¼ 10921 </div> 10922 </div> 10923 10924 <!-- M size sample --> 10925 <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 700; --wght-text: "700""> 10926 <div class="w-full vf-caption"> 10927 <span class="pr-6">â Korean</span> 10928 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10929 <span class="pr-6">â 10930 <span data-component="axes-overview__font-size-text"></span> px</span> 10931 </div> 10932 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-m" lang="ko"> 10933 <span class="">ë¶ì´ë¹µì ê¸¸ê±°ë¦¬Â ë ¸ì ììì íë ë¶ì´Â 모ìì ê°ì íë¹µì´ë¤.</span><span class="">íë íêµìì ì¦ê²¨ë¨¹ë ê³ ì¶ì¥ ë¡ë³¶ì´ë íêµ</span> 10934 </div> 10935 </div> 10936 10937 <!-- S size sample --> 10938 <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 400; --wght-text: "400""> 10939 <div class="w-full vf-caption"> 10940 <span class="pr-6">â Korean</span> 10941 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10942 <span class="pr-6">â 10943 <span data-component="axes-overview__font-size-text"></span> px</span> 10944 </div> 10945 10946 <!-- Would want to use line-clamp-3 instead of h-[170px] but line-clamp doesnât seem to work correctly for multi-column text --> 10947 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-s h-[170px]" lang="ko"> 10948 íëì ê³ ì¶ì¥ ë¡ë³¶ì´ë 1953ë ì ë§ë³µë¦¼(1921~2011)ì´Â ê´í¬ë¬¸Â ë° ê°ì²ì 10949 ë³µê°í ìì¸Â ì ë¹ë 공í°ìì 길거리ìë¹ ììì¼ë¡ íë ê²ììë¶í° 10950 ììëìë¤. ì²ììë ì°íë¶ ììÂ ê³ ì¶ì¥ê³¼Â ì¶ì¥ì ìì ìë ì¼ë¡ ë§ë¤ìë¤. 10951 ì´í 1970ë ë MBC íì¤FMì "ìêµí¬ì ì¬ì±ì´ë¡±"ì´ë íë¡ê·¸ë¨ìì ì ë¹ë 10952 ë¡ë³¶ì´ê³¨ëª©ì´ ìê°ëë©´ì ì êµì ì¼ë¡ í¼ì ¸ ëê°ê² ëìë¤. ì´ì½íì´ë 10953 ì´ì½ë¦¿ê³¼ ë§ìë©ë¡ê° ê°ëí ì¿ í¤ì ë®ì ë§¤ì° ì ëª í íêµ ê³¼ìì ëë¤. 10954 íêµì ëë¶ë¶ì ì íµ ì ë¹µì ììë ìì ì´ì½íì´ë¥¼ í매íì§ë§ ìì ì© 10955 ë¤ìí ì¢ ë¥ë ìë£í ì ìì 구ì í ì ììµëë¤. ì´ë¦ê³¼ë ë¬ë¦¬ ë¶ì´ê° 10956 ë¤ì´ ìì§ ììë°, ë¨í¥ì´ ë¤ì´ ìë ë°ê°ë£¨ì 모ìì´Â ë¶ì´ë¥¼ ë®ì기 ë문ì 10957 ê·¸ë° ì´ë¦ì´ ë¶ìë¤. ê·¼ëìë ë§ì ì¬ëë¤ì´ ì¢ìíë ë¨í¥ 10958 ì´ì¸ì í¼ì,Â ê³ êµ¬ë§, ìí¬ë¦¼Â ë± ì¬ë¬ ê°ì§ ì¢ ë¥ë¥¼ ë£ê¸°ë íë¤. ì²ìì 10959 íêµì ì¶ìµì ì¤í ê³¼ìì¸Â ë¬ê³ ëì ë§ê³¼ 모ìì´ ë¹ì·í´ì ë¬ê³ ë 커í¼ë¼ë 10960 ì´ë¦ì´ ë¶ì ê²ì´ìì§ë§ ì´íìë ì ì°¨ ì§ì§Â ë¬ê³ ë를 ë£ì 커í¼ë ëì¤ê¸° 10961 ììíë©´ì íëì íêµì 커í¼Â ë©ë´ë¡ ì리ì¡ìë¤. 10962 ë¬ê³ ë ëë ë½ê¸°ë ì¤íìÂ ë² ì´í¹ìë¤ë¥¼ ë£ê³ ë§ëë¡ ì ì´ì 10963 ë§ëë íêµì ì¬íì´ë¤. ì§ìì ë°ë¼ ì¬ë¬ ê°ì§ ì´ë¦ì¼ë¡ ë¶ë¦°ë¤. ìì ìì 10964 íë ì¼ë° ê³¼ìë³´ë¤ ê°ì´ ì¸ê³ ë§ì´ ë¬ì기 ë문ì 1950ë ë ì¤íë°ì 10965 ëíë¯¼êµ ì´ë¦°ì´ë¤ì´ ì¦ê²¨ 먹ìë ê°ìì´ë¤. ì§ê¸ë ê·¸ ì ëª ì¸ì ì¸ê¸°ë 10966 ì¬ì íë©° í¹í 21ì¸ê¸° ì´ë°ì ë¤ì´ìë íëì ë³µê³ í ì íì íì ì´
10967 ìì¸Â ì¸ì¬ë ê°ì ëì¬ì§ 거리ììë ì¢ ì¢ ê°íë를 ë³¼ ì ìê³ ì ì¶ìµì 10968 그리ë ì´ë¥¸ë¤ì´ ì¬ë¨¹ê¸°ë íë¤. 10969 </div> 10970 </div> 10971 </div> 10972</div> 10973 10974 <div class="md:ml-[48px] md:mr-4 w-full text-xs block overflow-hidden" data-component="show-hide-section__section" data-show-hide-section-name="thai"> 10975 <div data-component="axes-overview-group"> 10976 <!-- L size sample --> 10977 <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 900; --wght-text: "900""> 10978 <div class="w-full vf-caption"> 10979 <span class="pr-6">â Thai Looped</span> 10980 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10981 <span class="pr-6">â 10982 <span data-component="axes-overview__font-size-text"></span> px</span> 10983 </div> 10984 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-l thai-looped-fonts" lang="th"> 10985 à¸à¸à¸à¹à¸à¸Â à¸à¸·à¸à¸à¸à¸¡à¹à¸à¸¢à¸à¸µà¹à¸¡à¸µà¸ªà¹à¸§à¸à¸à¸ªà¸¡à¸à¸à¸à¹à¸à¹à¸à¸ªà¸²à¸¥à¸µÂ à¸à¹à¸³à¸à¸²à¸¥Â à¹à¸à¹à¹à¸à¸ 10986 </div> 10987 </div> 10988 10989 <!-- M size sample --> 10990 <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 700; --wght-text: "700""> 10991 <div class="w-full vf-caption"> 10992 <span class="pr-6">â Thai Looped / Loopless</span> 10993 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 10994 <span class="pr-6">â 10995 <span data-component="axes-overview__font-size-text"></span> px</span> 10996 </div> 10997 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-m" lang="th"> 10998 <span class="thai-looped-fonts">à¸à¸à¸¡à¸à¹à¸²à¸à¸´à¹à¸à¸à¹à¸²à¸à¸°à¸à¸·à¸à¸à¸³à¹à¸à¸´à¸à¹à¸à¸¢à¸¸à¸à¸£à¸±à¸à¸à¹à¸à¸ªà¸´à¸à¸à¸£à¹</span><span class="thai-loopless-fonts">à¹à¸à¸·à¹à¸à¸à¸à¸¡à¸¡à¸µà¸¥à¸±à¸à¸©à¸à¸°à¹à¸à¹à¸à¹à¸à¹à¸à¸ªà¸µà¹à¸«à¸¥à¸·à¸à¸à¹à¸à¹à¸¡ à¸à¸¸à¹à¸¡ à¸à¸¹ มีà¸à¸¥à¸´à¹à¸à¸à¸²à¸¥à¸«à¸à¸¡à¸«à¸§à¸²à¸</span> 10999 </div> 11000 </div> 11001 11002 <!-- S size sample --> 11003 <div class="w-full cursor-ew-resize" data-component="axes-overview" data-x-axes="wght" data-x-axes-min="100" data-x-axes-max="900" data-set-size="false" style="--wght: 400; --wght-text: "400""> 11004 <div class="w-full vf-caption"> 11005 <span class="pr-6">â Thai Looped</span> 11006 <span class="pr-6">â <span data-component="axes-overview__wght-text"></span> Wght</span> 11007 <span class="pr-6">â 11008 <span data-component="axes-overview__font-size-text"></span> px</span> 11009 </div> 11010 11011 <!-- Would want to use line-clamp-3 instead of h-[170px] but line-clamp doesnât seem to work correctly for multi-column text --> 11012 <div data-component="axes-overview__sample" class="viewscripts-sample viewscripts-sample-size-s h-[170px] thai-looped-fonts" lang="th"> 11013 สà¹à¸§à¸à¸à¸ªà¸¡à¸à¸±à¹à¸§à¹à¸à¸à¸à¸à¸¥à¸à¸à¸à¹à¸à¸à¸à¸·à¸à¸à¸°à¸à¸´ à¹à¸à¹à¸à¸à¸±à¹à¸à¹à¸à¹à¸à¸£à¸¹à¸à¹à¸à¹à¸à¹à¸ªà¹à¸ªà¸µà¹à¸à¸µà¸¢à¸§ 11014 à¹à¸à¸¢à¸à¸à¸à¸´à¸¡à¸²à¸à¸²à¸à¹à¸à¹à¸à¸¢Â à¸à¹à¸³à¹à¸à¹à¸à¸à¸±à¹à¸à¹à¸¥à¸°à¸à¹à¸³à¸à¸²à¸¥à¸¡à¸°à¸à¸£à¹à¸²à¸§Â สà¹à¸§à¸à¸à¸ªà¸¡à¹à¸à¸´à¹à¸¡à¸à¸·à¹à¸ ๠11015 à¹à¸à¹à¹à¸à¹Â à¸à¸±à¹à¸§à¹à¸à¸Â à¸à¹à¸²à¸§à¹à¸«à¸à¸µà¸¢à¸§Â à¹à¸à¸²à¸à¹à¸§à¸¢Â à¹à¸à¸à¸¸à¸à¸à¸² 11016 ลà¸à¸à¸à¹à¸à¸à¸ªà¸´à¸à¸à¹à¸à¸£à¹à¹à¸à¹à¸à¸à¸à¸¡à¸à¸³à¸à¸²à¸à¹à¸à¹à¸à¸«à¸£à¸·à¸à¸ªà¸²à¸à¸¹à¸à¸±à¹à¸à¹à¸à¹à¸à¹à¸à¹à¸ 11017 à¸à¸´à¸à¸à¸±à¸à¸à¸°à¸à¸´à¹à¸¥à¸°à¸à¹à¸³à¹à¸à¸·à¹à¸à¸¡à¸à¸²à¸à¸à¹à¸³à¸à¸²à¸¥à¸à¸à¸à¸à¹à¸à¸«à¸¡à¸²à¸ à¹à¸¡à¹à¹à¸ªà¹à¸à¹à¸³à¹à¸à¹à¸ 11018 à¹à¸à¸ าษาà¸à¸§à¸²Â à¹à¸à¹à¸à¸à¸¥Â หมายà¸à¸¶à¸à¸ªà¹à¸§à¸à¸à¸µà¹à¹à¸à¹à¸à¹à¸à¹à¸à¸ªà¸µà¹à¸à¸µà¸¢à¸§à¹à¸à¹à¸²à¸à¸±à¹à¸ 11019 à¸à¹à¸²à¸à¸³Â à¹à¸à¹à¸à¸à¸¥Â มารวมà¸à¸±à¸à¸à¹à¸³à¸à¸²à¸¥à¸¡à¸°à¸à¸£à¹à¸²à¸§à¹à¸¥à¸°à¸à¸°à¸à¸´ 11020 à¸à¸°à¹à¸£à¸µà¸¢à¸Â à¸à¸²à¹à¸§à¹à¸Â à¸à¸²à¹à¸§à¹à¸à¸à¸µà¹à¸à¸´à¸¢à¸¡à¸¡à¸²à¸à¸à¸µà¹à¸ªà¸¸à¸à¸à¸·à¸Â à¹à¸à¹à¸à¸à¸²à¹à¸§à¹à¸Â à¹à¸à¸à¸§à¸²à¸à¸¥à¸²à¸Â à¸à¹à¸§à¸¢à¸à¸´à¸à¸à¸´à¸à¸¥à¸à¸²à¸à¸ªà¸´à¸à¸à¹à¸à¸£à¹à¹à¸¥à¸°à¸à¸²à¸«à¸²à¸£à¸à¸°à¸§à¸±à¸à¸à¸ 11021 à¸à¸³à¹à¸«à¹à¸¡à¸µà¸¥à¸à¸à¸à¹à¸à¸à¸£à¸¹à¸à¹à¸à¸à¹à¸à¸¥à¸ ๠à¹à¸à¹à¸ à¸à¸´à¸à¸à¸±à¸à¹à¸à¸¨à¸à¸£à¸µà¸¡à¸§à¸²à¸à¸´à¸¥à¸¥à¸²à¸«à¸£à¸·à¸à¸à¸¸à¹à¸£à¸µà¸¢à¸ 11022 สà¹à¸§à¸à¸à¸ªà¸¡à¸à¸à¸à¸à¸à¸¡à¸ªà¹à¸§à¸à¹à¸«à¸à¹à¸à¸°à¹à¸à¹à¸à¸à¸°à¸à¸´ à¹à¸¥à¸°à¸à¹à¸³à¸à¸²à¸¥ à¹à¸à¹à¸ 3â4 à¸à¸à¸´à¸ 11023 à¹à¸¥à¹à¸§à¹à¸à¹à¸ªà¸¹à¸à¸£à¹à¸¥à¸°à¸à¸§à¸²à¸¡à¸à¸à¸à¹à¸à¸·à¹à¸à¸à¸à¸¡à¹à¸à¹à¸à¹à¸¥à¸°à¹à¸à¸ 11024 à¸à¸¶à¹à¸à¹à¸à¹à¸à¹à¸à¹à¸¥à¸°à¸à¸¢à¹à¸²à¸à¸à¹à¸à¸°à¸¡à¸µà¸à¸¸à¸à¸ªà¸¡à¸à¸±à¸à¸´à¸à¸³à¹à¸«à¹à¸à¸à¸¡à¸¡à¸µà¹à¸à¸·à¹à¸à¸à¹à¸²à¸à¸à¸±à¸ à¹à¸à¸¢ 11025 </div> 11026 </div> 11027 </div> 11028</div> 11029 11030</section> 11031 11032 <!-- Reomve vh from this main div once enough content is in there --> 11033<div class="md:ml-[132px] px-4 mt-10 relative"> 11034 <!-- Printmarks Beginning --> 11035 <!-- Top Left --> 11036 <img class="absolute top-[-60px] md:top-[-40px] left-0 scale-50 rotate-[270deg]" src="/trim-bm-white.dba23ed9.png"> 11037 <!-- Top Middle --> 11038 <img class="absolute top-[-60px] md:top-[-40px] left-[50%] right-[50%] scale-50 ml-[-24px] md:ml-0" src="/trim-bm-white.dba23ed9.png"> 11039 <!-- Top Right --> 11040 <img class="absolute top-[-60px] md:top-[-40px] right-0 scale-50 rotate-[90deg]" src="/trim-bm-white.dba23ed9.png"> 11041 <!-- Printmarks Ending--> 11042
11043 <!-- one "row" on desktop --> 11044 <div class="grid-setup md:pb-10 overflow-x-hidden relative"> 11045 <!-- Printmarks Beginning --> 11046 <!-- Bottom Left--> 11047 <img class="absolute bottom-0 md:bottom-[20px] left-0 scale-50 rotate-[270deg] ml-[-12px] md:ml-0" src="/trim-bm-white.dba23ed9.png"> 11048 <!-- Bottom Middle --> 11049 <img class="absolute bottom-0 md:bottom-[20px] left-[50%] right-[50%] scale-50 ml-[-24px] md:ml-0" src="/cross-white.3b2d01de.png"> 11050 <!-- Bottom Right --> 11051 <img class="absolute bottom-0 md:bottom-[20px] right-0 scale-50 rotate-[90deg] mr-[-12px] md:mr-0" src="/trim-bm-white.dba23ed9.png"> 11052 <!-- Printmarks Ending--> 11053 11054 <!-- Left Column --> 11055 <div class="col-span-4 md:col-span-7 flex flex-col"> 11056 <!-- Type Stack Item--> 11057 <div class="w-full mb-8 cursor-nesw-resize" data-component="axes-overview" data-x-axes="wdth" data-x-axes-min="50" data-x-axes-max="150" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400"; --wdth: 100; --wdth-text: "100""> 11058 <div data-component="axes-overview__sample" class="text-white overflow-hidden md:overflow-visible"> 11059 <span class="">swiss 11060 <img src="/swiss-american-airlines-logo.bc6a3507.svg" class="inline h-[0.8em] -mt-[0.2em] -ml-[0.2em]"></span> 11061 <span class="block leading-none -mt-[0.5em]">american</span> 11062 </div> 11063 </div> 11064 11065 <div class="flex w-full"> 11066 <img src="/3-airline-tickets-1.de5f954a.gif" class="w-full md:w-[70%] mb-8 md:mb-0"> 11067 </div> 11068 </div> 11069 11070 <!-- SECNOD COLUMN --> 11071 <div class="col-span-4 md:col-span-5 flex flex-col"> 11072 <div class="hidden md:flex pb-8"> 11073 <img src="/thai-bird.52032a1d.gif" class="w-full"> 11074 </div> 11075 <div class="grid-setup flex-row pb-8" data-component="axes-overview-group"> 11076 <!-- Type Stack --> 11077 <!-- --> 11078 <!-- Type Stack Item--> 11079 <div class="hidden md:flex col-span-4 md:col-span-5 cursor-ns-resize"> 11080 <div class="w-full" data-component="axes-overview" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400"; --wdth: 100; --wdth-text: "100""> 11081 <div class="caps mono-fonts text-xs"> 11082 <span class="pr-6">â Korean</span><span class="pr-6">â 11083 <span data-component="axes-overview__wght-text"></span> 11084 Wght</span> 11085 </div> 11086 <div data-component="axes-overview__sample" class="vertical-korean-text w-full"> 11087 íê° 11088 </div> 11089 </div> 11090 </div> 11091 <div class="col-span-4 md:col-span-7 overflow-hidden"> 11092 <lottie-player data-component="lottie-player" class="md:flex md:scale-[1.22]" data-src="product-playingcard.json"></lottie-player> 11093 </div> 11094 </div> 11095 <div class="pb-8 md:pb-10 cursor-ns-resize" data-component="axes-overview-group"> 11096 <!-- Type Stack --> 11097 <!-- Type Stack Item--> 11098 <div class="w-full" data-component="axes-overview" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400"; --wdth: 100; --wdth-text: "100""> 11099 <div class="caps mono-fonts text-xs"> 11100 <span class="pr-6">â Arabic</span><span class="pr-6">â 11101 <span data-component="axes-overview__wght-text"></span> 11102 Wght</span> 11103 </div> 11104 <div data-component="axes-overview__sample" class="w-full leading-[1.3] pb-5 overflow-hidden" lang="ar" dir="rtl"> 11105 ÙØ±Ø¬Ø¹ Ø¥ÙØ´Ø§Ø¡ Ù ØØ·Ø© Ø§ÙØªØ§Ø³Ø¹<br> 11106 Ø¥ÙÙ Ø£ÙØ§Ø³Ø· ٠صر عشر عا٠11107 </div> 11108 </div> 11109 <!-- Type Stack Item--> 11110 <div class="w-full overflow-hidden" data-component="axes-overview" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400"; --wdth: 100; --wdth-text: "100""> 11111 <div class="caps mono-fonts text-xs"> 11112 <span class="pr-6">â Devanagari</span><span class="pr-6">â
11113 <span data-component="axes-overview__wght-text"></span> 11114 Wght</span> 11115 </div> 11116 <div data-component="axes-overview__sample" class="w-full leading-[1.3] pt-2 pb-5" lang="hi"> 11117 à¤à¤¤à¥à¤°à¤ªà¤¤à¤¿ शिवाà¤à¥ महाराठठà¤à¤¤à¤°à¥à¤°à¤¾à¤·à¥à¤à¥à¤°à¥à¤¯<br> 11118 विमानà¤à¥à¤·à¥à¤¤à¥à¤° साà¤à¤¤à¤¾ à¤à¥à¤°à¥à¤à¤¼, मà¥à¤à¤¬à¤ मà¥à¤ सà¥à¤¥à¤¿à¤¤<br> 11119 हà¥à¥¤ à¤à¤¸à¤à¤¾ ICAO à¤à¥à¤¡ हॠVABB à¤à¤°<br> 11120 </div> 11121 </div> 11122 <!-- Type Stack Item--> 11123 <div class="w-full hidden md:block" data-component="axes-overview" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400"; --wdth: 100; --wdth-text: "100""> 11124 <div class="caps mono-fonts text-xs"> 11125 <span class="pr-6">â Hebrew</span><span class="pr-6">â 11126 <span data-component="axes-overview__wght-text"></span> 11127 Wght</span> 11128 </div> 11129 <div data-component="axes-overview__sample" class="w-full overflow-hidden pt-4" lang="he" dir="rtl"> 11130 ××§× ××××× ××× ×§× ×¨××ת ×§×× ××ר××× ××ר×ש×× ×©××¦× ×פ××¢× ××××§<br>×××× ×§× 11131 - ×ר××ת ××§×× ×××ש ××. ××× ×¢××ר ××× ×ער×× ×ת ××, ×ª× ××××-××¤× 11132 </div> 11133 </div> 11134 </div> 11135 </div> 11136 </div> 11137 11138 <!-- one "row" on desktop --> 11139 <div class="grid-setup pb-8 md:pb-10 relative"> 11140 <!-- Printmarks Beginning --> 11141 <!-- Bottom Left--> 11142 <img class="hidden md:inline absolute bottom-0 md:bottom-[30px] left-0 scale-50 rotate-[270deg] ml-[-12px]" src="/trim-bm-white.dba23ed9.png"> 11143 <!-- Bottom Middle --> 11144 <img class="hidden md:inline absolute bottom-0 md:bottom-[30px] left-[50%] right-[50%] scale-50 ml-[-24px] md:ml-0" src="/cross-white.3b2d01de.png"> 11145 <!-- Bottom Right --> 11146 <img class="hidden md:inline absolute bottom-0 md:bottom-[30px] right-0 scale-50 rotate-[90deg] mr-[-12px]" src="/trim-bm-white.dba23ed9.png"> 11147 <!-- Printmarks Ending--> 11148 11149 <!-- 1st Column Single Vertical Lottie Animation --> 11150 <div class="col-span-4 md:col-span-4 overflow-hidden md:overflow-visible flex items-center justify-center pb-6 md:pb-0"> 11151 <lottie-player data-component="lottie-player" class="scale-[1.35] md:scale-[1.2] translate-x-[17.5%] md:translate-x-[10%] -translate-y-[17.5%] md:translate-y-0 pt-[17.5%] md:pt-0" data-src="character-tadagirl.json"></lottie-player> 11152 </div> 11153 11154 <!-- 2nd Column Type Stack --> 11155 <div class="col-span-4 md:col-span-4 grid-setup relative" data-component="axes-overview-group"> 11156 <!-- Printmarks Beginning --> 11157 <!-- Bottom Left--> 11158 <img class="md:hidden absolute bottom-[-20px] left-0 scale-50 rotate-[270deg] ml-[-12px]" src="/trim-bm-white.dba23ed9.png"> 11159 <!-- Bottom Middle --> 11160 <img class="md:hidden absolute bottom-[-20px] left-[50%] right-[50%] scale-50 ml-[-24px]" src="/cross-white.3b2d01de.png"> 11161 <!-- Bottom Right --> 11162 <img class="md:hidden absolute bottom-[-20px] right-0 scale-50 rotate-[90deg] mr-[-12px]" src="/trim-bm-white.dba23ed9.png"> 11163 <!-- Printmarks Ending--> 11164 11165 <!-- Type Stack --> 11166 <div class="col-span-4 md:col-span-12 cursor-ns-resize pb-8 md:pb-0"> 11167 <!-- Type Stack Item (Headline auto-size, body manual sizing)--> 11168 <div class="w-full" data-component="axes-overview" data-set-size="false" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400"; --wdth: 100; --wdth-text: "100""> 11169 <div class="caps mono-fonts text-xs"> 11170 <span class="pr-6">â Mono Cyrillic</span><span class="pr-6">â 11171 <span data-component="axes-overview__wght-text"></span> 11172 Wght</span> 11173 </div> 11174 <div data-component="axes-overview__sample" class="w-full md:w-3/4 mono-fonts caps text-2xl"> 11175 ÐлгаÑÑк 11176 </div> 11177 </div> 11178 <div class="w-full" data-component="axes-overview" data-set-size="false" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400"; --wdth: 100; --wdth-text: "100""> 11179 <div data-component="axes-overview__sample" class="w-full md:w-3/4 text-md mono-fonts hyphens-auto" lang="uk"> 11180 ÐÑжнаÑодний аеÑопоÑÑ ÐоÑиÌÑпÑÐ»Ñ (IATA: KBP, ICAO: UKBB) оÑновний Ñ 11181 найбÑлÑÑий паÑажиÑÑÑкий мÑжнаÑодний аеÑопоÑÑ Ð£ÐºÑаÑни Ñа ÑÑ ÑÑолиÑÑ,
11182 Ñкий обÑлÑговÑÑ ÐиÑв 11183 </div> 11184 </div> 11185 <!-- Type Stack Item (Headline auto-size, body manual sizing)--> 11186 <div class="w-full pt-6" data-component="axes-overview" data-set-size="false" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400"; --wdth: 100; --wdth-text: "100""> 11187 <div class="caps mono-fonts text-xs"> 11188 <span class="pr-6">â Mono Latin</span><span class="pr-6">â 11189 <span data-component="axes-overview__wght-text"></span> 11190 Wght</span> 11191 </div> 11192 <div data-component="axes-overview__sample" class="w-full md:w-3/4 mono-fonts caps text-2xl"> 11193 Latin 11194 </div> 11195 </div> 11196 <div class="w-full" data-component="axes-overview" data-set-size="false" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400"; --wdth: 100; --wdth-text: "100""> 11197 <div data-component="axes-overview__sample" class="w-full md:w-3/4 text-md mono-fonts hyphens-auto" lang="vi"> 11198 Sân bay quá»c tế Tân SÆ¡n Nhất (IATA: SGN, ICAO: VVTS) là sân bay quá»c 11199 tế lá»n nhất Viá»t Nam. Sân bay quá»c tế Tân SÆ¡n Nhất vá»i diá»n tÃch 11200 850ha là sân bay lá»n 11201 </div> 11202 </div> 11203 <!-- Type Stack Item (Headline auto-size, body manual sizing)--> 11204 <div class="w-full pt-6" data-component="axes-overview" data-set-size="false" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400"; --wdth: 100; --wdth-text: "100""> 11205 <div class="caps mono-fonts text-xs"> 11206 <span class="pr-6">â Mono Greek</span><span class="pr-6">â 11207 <span data-component="axes-overview__wght-text"></span> 11208 Wght</span> 11209 </div> 11210 <div data-component="axes-overview__sample" class="w-full md:w-3/4 mono-fonts caps text-2xl"> 11211 ελληνικ 11212 </div> 11213 </div> 11214 <div class="w-full" data-component="axes-overview" data-set-size="false" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400"; --wdth: 100; --wdth-text: "100""> 11215 <div data-component="axes-overview__sample" class="w-full md:w-3/4 text-md mono-fonts hyphens-auto" lang="el"> 11216 Î ÎÎ¹ÎµÎ¸Î½Î®Ï ÎεÏολιμÎÎ½Î±Ï ÎθηνÏν ÎÎ»ÎµÏ Î¸ÎÏÎ¹Î¿Ï ÎενιζÎÎ»Î¿Ï (IATA: ATH, ICAO: 11217 LGAV, ΥΠÎ: ÎÎÎ) ÎµÎ¾Ï ÏηÏεÏεί Ïην Îθήνα και γενικά Ïην ÎÏÏική. ÎεκίνηÏε 11218 Ïη λειÏÎ¿Ï Ïγία ÏÎ¿Ï ÏÏÎ¹Ï 11219 </div> 11220 </div> 11221 </div> 11222 </div> 11223 11224 <!-- 3rd Column Images --> 11225 <div class="col-span-4 md:col-span-4 hidden md:flex flex-col"> 11226 <div class="w-full pb-8 flex justify-center"> 11227 <img src="/gallery-3-american-swissair-badge.f154dfe7.svg" class="w-full md:w-3/4"> 11228 </div> 11229 <div class="flex md:pb-8"> 11230 <img src="/gallery-3-SA-passenger-ticket-and-baggage.3a9da055.gif" class="w-full"> 11231 </div> 11232 </div> 11233 </div> 11234 11235 <!-- One "row" of items on Desktop --> 11236 <div class="grid-setup flex-row pb-8 relative"> 11237 <!-- Printmarks Beginning --> 11238 <!-- Bottom Left--> 11239 <img class="absolute bottom-0 md:bottom-0 left-0 scale-50 rotate-[270deg] ml-[-12px]" src="/trim-bm-white.dba23ed9.png"> 11240 <!-- Bottom Middle --> 11241 <img class="absolute bottom-0 md:bottom-0 left-[50%] right-[50%] scale-50 ml-[-24px] md:ml-0" src="/cross-white.3b2d01de.png"> 11242 <!-- Bottom Right --> 11243 <img class="absolute bottom-0 md:bottom-0 right-0 scale-50 rotate-[90deg] mr-[-12px]" src="/trim-bm-white.dba23ed9.png"> 11244 <!-- Printmarks Ending--> 11245 11246 <!-- CJK Setting --> 11247 <div class="col-span-4 md:col-span-5 hidden md:flex flex-col" data-component="axes-overview-group"> 11248 <div class="flex md:grid-setup"> 11249 <!-- Japanese --> 11250 <div class="w-2/5 md:w-auto md:col-span-4 cursor-ns-resize"> 11251 <!-- Type Stack Item--> 11252 <div class="w-full" data-component="axes-overview" data-set-size="true" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400""> 11253 <div class="caps mono-fonts text-xs">
11254 <span class="pr-6">â Japanese Matching<br> AXIS Font by Type 11255 Project</span><br><span class="pr-6">â 11256 <span data-component="axes-overview__wght-text"></span> 11257 Wght</span> 11258 </div> 11259 <div data-component="axes-overview__sample" class="w-full flex flex-col text-center japanese-fonts"> 11260 <div class="text-[9vw] leading-[10vw] japanese-fonts">ã</div> 11261 <div class="text-[4.5vw] leading-[5vw] japanese-fonts">ã«ã</div> 11262 <div class="text-[2.25vw] leading-[2.75vw] japanese-fonts"> 11263 æ¼¢åæ¸ä½ 11264 </div> 11265 </div> 11266 </div> 11267 </div> 11268 <!-- Korean --> 11269 <div class="hidden md:flex md:col-span-4 cursor-ns-resize"> 11270 <!-- Type Stack Item--> 11271 <div class="w-full" data-component="axes-overview" data-set-size="true" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400""> 11272 <div class="caps mono-fonts text-xs"> 11273 <span class="pr-6">â GT America Korean</span><br><br><span class="pr-6">â 11274 <span data-component="axes-overview__wght-text"></span> 11275 Wght</span> 11276 </div> 11277 <div data-component="axes-overview__sample" class="w-full flex flex-col text-center"> 11278 <div class="text-[9vw] leading-[10vw]">ê°</div> 11279 <div class="text-[4.5vw] leading-[5vw]">ëí</div> 11280 <div class="text-[2.25vw] leading-[2.75vw]">ì¬ëì¼ë¡</div> 11281 </div> 11282 </div> 11283 </div> 11284 <!-- Simplified Chinese --> 11285 <div class="w-2/5 md:w-auto md:col-span-4 cursor-ns-resize"> 11286 <!-- Type Stack Item--> 11287 <div class="w-full" data-component="axes-overview" data-set-size="true" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400""> 11288 <div class="caps mono-fonts text-xs"> 11289 <span class="pr-6">â Traditional Chinese Matching<br> AR UDJingXi 11290 HeiE1</span><br><span class="pr-6">â 11291 <span data-component="axes-overview__wght-text"></span> 11292 Wght</span> 11293 </div> 11294 <div data-component="axes-overview__sample" class="w-full flex flex-col text-center"> 11295 <div class="text-[9vw] leading-[10vw] tradchinese-fonts">ä¸</div> 11296 <div class="text-[4.5vw] leading-[5vw] simpchinese-fonts"> 11297 ç®ä½ 11298 </div> 11299 <div class="text-[2.25vw] leading-[2.75vw] tradchinese-fonts"> 11300 ç¹é«åå 11301 </div> 11302 </div> 11303 </div> 11304 </div> 11305 </div> 11306 <div class="flex flex-col pt-8"> 11307 <!-- Type Stack Item Thai Loopless --> 11308 <div class="w-full overflow-hidden" data-component="axes-overview" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400"; --wdth: 100; --wdth-text: "100""> 11309 <div class="caps mono-fonts text-xs"> 11310 <span class="pr-6">â Thai Loopless</span><span class="pr-6">â 11311 <span data-component="axes-overview__wght-text"></span> 11312 Wght</span> 11313 </div> 11314 <div data-component="axes-overview__sample" class="w-full pt-2 pb-5 thai-loopless-fonts leading-[1.1] -mt-[1.2em]" lang="th"> 11315 สุวรรà¸à¸ ูมิ 11316 </div> 11317 </div> 11318 <!-- Type Stack Item Hebrew --> 11319 <div class="w-full overflow-hidden pt-8 md:mb-11" data-component="axes-overview" data-y-axes="wght" data-y-axes-min="100" data-y-axes-max="900" style="--wght: 400; --wght-text: "400"; --wdth: 100; --wdth-text: "100""> 11320 <div class="caps mono-fonts text-xs"> 11321 <span class="pr-6">â Hebrew</span><span class="pr-6">â 11322 <span data-component="axes-overview__wght-text"></span> 11323 Wght</span> 11324 </div> 11325 <div data-component="axes-overview__sample" class="w-full pt-2 pb-5 leading-[0.8]" dir="rtl" lang="he"> 11326 ש×× ×× ×××××××<br> 11327 ××¡× ×× ×סע×× 11328 </div> 11329 </div> 11330 </div> 11331 </div> 11332 11333 <div class="col-span-4 md:col-span-7"> 11334 <div class="flex w-full md:justify-end">
11335 <img src="/3-airline-assorted-items-1.9d95b41b.gif" class="w-full md:w-[80%] mb-6 md:mb-0"> 11336 <!-- <img 11337 src="images/galleries/3-airsickness-1.png" 11338 class="flex w-[23vw] md:w-[20vw] mt-[9.5vw] -mr-[13vw]" 11339 /> 11340 <img 11341 src="images/galleries/3-airsickness-2.png" 11342 class="flex w-[23vw] md:w-[20vw] absolute -mt-[4.75vw] -mr-[13vw]" 11343 /> 11344 <img 11345 src="images/galleries/3-airsickness-3.png" 11346 class="flex w-[23vw] md:w-[20vw] absolute -mt-[9vw] -mr-[0vw]" 11347 /> --> 11348 <!-- <img 11349 src="images/galleries/3-airsickness-3.png" 11350 class="flex w-[23vw] md:w-[20vw] absolute right-0" 11351 /> 11352 <img 11353 src="images/galleries/3-airsickness-2.png" 11354 class="flex w-[23vw] md:w-[20vw] absolute right-[13vw] top-[4.75vw]" 11355 /> 11356 <img 11357 src="images/galleries/3-airsickness-1.png" 11358 class="flex w-[23vw] md:w-[20vw] absolute right-[26vw] top-[9.5vw]" 11359 /> --> 11360 </div> 11361 </div> 11362 </div> 11363 11364 <!-- One "row" of items on Desktop --> 11365 <div class="flex flex-col md:flex-row pb-8 relative"> 11366 <!-- Printmarks Beginning --> 11367 <!-- Bottom Left--> 11368 <img class="absolute bottom-0 md:bottom-0 left-0 scale-50 rotate-[270deg] ml-[-12px]" src="/trim-bm-white.dba23ed9.png"> 11369 <!-- Bottom Middle --> 11370 <img class="absolute bottom-0 md:bottom-0 left-[50%] right-[50%] scale-50 ml-[-24px] md:ml-0" src="/cross-white.3b2d01de.png"> 11371 <!-- Bottom Right --> 11372 <img class="absolute bottom-0 md:bottom-0 right-0 scale-50 rotate-[90deg] mr-[-12px]" src="/trim-bm-white.dba23ed9.png"> 11373 <!-- Printmarks Ending--> 11374 11375 <div class="md:hidden md:pr-5"> 11376 <div class="vf-caption pb-5">GT America Thai</div> 11377 <img class="pb-6" src="/3-airline-thai-earplugs.237035bf.png"> 11378 </div> 11379 <div class="md:pr-5"> 11380 <div class="vf-caption pb-5">GT America Latin</div> 11381 <img class="pb-6" src="/3-airline-baggage-tag.6a8b6e20.png"> 11382 </div> 11383 <div class="hidden md:inline-block md:pr-5"> 11384 <div class="vf-caption pb-5">GT America Arabic</div> 11385 <img class="pb-6" src="/3-airline-idaho-tag.966158ba.png"> 11386 </div> 11387 <div> 11388 <div class="vf-caption pb-5">GT America Greek</div> 11389 <img class="pb-6" src="/3-airline-nyc-tag.dac28f05.png"> 11390 </div> 11391 </div> 11392</div> 11393 11394 11395<!-- <include 11396 src="source/html-includes/languages/languages-gallery-products-1.html" 11397></include> 11398 11399<include 11400 src="source/html-includes/languages/languages-gallery-american-candy.html" 11401></include> 11402 11403<include src="source/html-includes/languages/languages-gallery-scripts.html"></include> 11404 11405<include 11406 src="source/html-includes/languages/languages-gallery-products-2.html" 11407></include> --> 11408 11409</section> 11410 11411 11412 <!--DESIGN SECTION--> 11413 <section data-nav-section="design" data-nav-colour-switcher-colour="blue" data-nav-colour-switcher-colour-hover="red" class="bg-white text-red"> 11414 <section class="flex"> 11415 <!-- Full Width Content Area --> 11416 <div data-component="section-scene" data-autoplay-until="0.825" data-start-scroll-offset="0.55" data-end-scroll-offset="-0.7" data-src="/models/fireworks/fireworks-v006/fireworks-v006.gltf" data-src-mobile="/models/fireworks/fireworks-mobile-v006/fireworks-mobile-v006.gltf" class="flex self-center w-full h-[100vh] md:h-[90vh]"></div> 11417 </section> 11418 11419 <section class="md:ml-[132px] px-4 mb-9 flex"> 11420 <!-- Partial Width Content Area --> 11421 <div class="md:ml-[170px] md:mr-4 grid-setup"> 11422 <h2 class="col-span-full text-2xl md:text-3xl pb-5 md:pb-4"> 11423 Design Union 11424 </h2> 11425 <p class="col-span-4 md:col-span-10 text-md md:text-xl"> 11426 GT America Intl synthesizes the Gothic modelâs strong character with the 11427 functional purity that Grotesks have to offer. Noël Leu developed the 11428 typeface over a ten year span, using a Swiss Style-lens to refine the 11429 design details. We and our partners then expanded the supported writing 11430 systems in the eight years since its original release. 11431 </p> 11432 </div> 11433 </section> 11434 11435 <section class="md:ml-[132px] md:px-4 mb-11 flex flex-col md:flex-row"> 11436 <!-- Section Nav Area --> 11437<div class="hidden md:block ml-4 w-full md:w-[120px] md:h-1/2 text-xs md:sticky" data-component="sticky-subnav"> 11438 <div class="flex flex-col justify-center h-full"> 11439 <h3 class="text-lg">Design Features</h3> 11440 <div class="flex flex-col items-start pt-7"> 11441 <button data-component="subnav-jump-to" data-subnav-jump-to-target="widthandweight" class="hover:text-blue nav-section-indicator-active pt-2">
11442 <span></span> Width & Weight 11443 </button> 11444 <button data-component="subnav-jump-to" data-subnav-jump-to-target="strokeflow" class="hover:text-blue pt-2"> 11445 <span></span> Stroke Flow 11446 </button> 11447 <button data-component="subnav-jump-to" data-subnav-jump-to-target="adjustments" class="hover:text-blue pt-2"> 11448 <span></span> Adjustments 11449 </button> 11450 <button data-component="subnav-jump-to" data-subnav-jump-to-target="details" class="hover:text-blue pt-2"> 11451 <span></span> Details 11452 </button> 11453 </div> 11454 </div> 11455</div> 11456 11457 <!-- Main Content Area --> 11458 <div class="md:ml-[48px] md:mr-4 w-full text-s overflow-hidden"> 11459 <div class="pb-9 px-4 md:px-0" data-subnav-jump-to="widthandweight"> 11460 <!-- <div class="w-full border-b pb-2">Width & Weight</div> --> 11461 <div class="grid-setup border-t pt-2"> 11462 <div class="col-span-3 md:col-span-4"> 11463 <!-- <div class="text-blue">Weight Development</div> --> 11464 <div class="w-full flex flex-grow justify-center"> 11465 <lottie-player data-component="lottie-player" class="" data-src="weight-latin-s-006.json"></lottie-player> 11466 </div> 11467 </div> 11468 11469 <div class="col-span-1 md:col-span-2"> 11470 <div class="w-full flex md:h-full flex-grow justify-center align-top md:align-middle"> 11471 <lottie-player data-component="lottie-player" class="scale-[2] pt-4 md:pt-0" data-src="character-sombrero-roundelbows.json"></lottie-player> 11472 </div> 11473 </div> 11474 11475 <div class="col-span-4 md:col-span-6"> 11476 <!-- Container for 6 divs that are each 1/3 of available space --> 11477 <div class="grid-setup"> 11478 <div class="col-span-2 md:col-span-4 pt-2 pb-6"> 11479 <div class="text-blue vf-caption">Greek</div> 11480 <div class="w-full flex flex-grow justify-center"> 11481 <lottie-player data-component="lottie-player" class="" data-src="weight-greek-sigma-001.json"></lottie-player> 11482 </div> 11483 </div> 11484 11485 <div class="col-span-2 md:col-span-4 pt-2 pb-6"> 11486 <div class="text-blue vf-caption">Thai</div> 11487 <div class="w-full flex flex-grow justify-center"> 11488 <lottie-player data-component="lottie-player" class="" data-src="weight-thai-thothong-005.json"></lottie-player> 11489 </div> 11490 </div> 11491 11492 <div class="col-span-2 md:col-span-4 pt-2 pb-6"> 11493 <div class="text-blue vf-caption"> </div> 11494 <div class="w-full flex flex-grow justify-center"> 11495 <lottie-player data-component="lottie-player" class="" data-src="character-milkshake.json"></lottie-player> 11496 </div> 11497 </div> 11498 11499 <div class="col-span-2 md:col-span-4 pt-2 pb-6"> 11500 <div class="text-blue vf-caption">Arabic</div> 11501 <div class="w-full flex flex-grow justify-center"> 11502 <lottie-player data-component="lottie-player" class="" data-src="weight-arabic-ain-004.json"></lottie-player> 11503 </div> 11504 </div> 11505 11506 <div class="col-span-2 md:col-span-4 pt-2 pb-6"> 11507 <div class="text-blue vf-caption">Devanagari</div> 11508 <div class="w-full flex flex-grow justify-center"> 11509 <lottie-player data-component="lottie-player" class="" data-src="weight-devanagari-dddha-002.json"></lottie-player> 11510 </div> 11511 </div> 11512 11513 <div class="col-span-2 md:col-span-4 pt-2 pb-6"> 11514 <div class="text-blue vf-caption">Cyrillic</div> 11515 <div class="w-full flex flex-grow justify-center"> 11516 <lottie-player data-component="lottie-player" class="" data-src="weight-cyr-backwardsye-001.json"></lottie-player> 11517 </div> 11518 </div> 11519 </div> 11520 </div> 11521 </div> 11522 <div class="grid-setup"> 11523 <div class="col-span-4 md:col-span-4 text-blue text-s mt-4 pt-6"> 11524 <p class="md:w-3/4"> 11525 </p><h4 class="pb-4">Weight Development</h4> 11526 The stroke adjusts dynamically in both weight and width to optimize 11527 legibility and expression: the bolder the weight the steeper the 11528 terminalsâ angle. This helps to keep the apertures open and the stroke 11529 flow intact. The narrow widthâs angular terminals infuse a lot of 11530 character as well. 11531 <p></p> 11532 </div> 11533 11534 <div class="md:col-start-5 col-span-2 md:col-span-4 mt-4 pt-2"> 11535 <div class="w-full flex flex-grow justify-center align-middle"> 11536 <lottie-player data-component="lottie-player" class="" data-src="weight-latin-uppercase-s-001.json"></lottie-player> 11537 </div> 11538 </div> 11539 11540 <div class="col-span-2 md:col-span-4 mt-4 pt-2"> 11541 <div class="w-full flex flex-grow justify-center align-middle"> 11542 <lottie-player data-component="lottie-player" class="" data-src="weight-latin-uppercase-s-nohandles-001.json"></lottie-player> 11543 </div> 11544 </div> 11545 </div> 11546</div> 11547 11548 11549 <div class="pb-9" data-subnav-jump-to="strokeflow"> 11550 <div class="grid-setup px-4 md:px-0 border-t pt-2"> 11551 <div class="col-span-4 md:col-span-6"> 11552 <!-- <div class="text-blue">Stroke Flow</div> --> 11553 <div class="w-full flex flex-grow justify-center align-middle"> 11554 <lottie-player data-component="lottie-player" class="" data-src="character-magician-mirrored.json"></lottie-player> 11555 </div> 11556 </div> 11557 11558 <div class="col-span-4 md:col-span-6"> 11559 <!-- Container for two rows, with two columns at top and 3 columns and 2 rows at bottom --> 11560 <div class="grid-setup"> 11561 <div class="col-span-4 md:col-span-6 pt-2 pb-6"> 11562 <div class="text-blue vf-caption">Latin</div> 11563 <div class="w-full flex flex-grow justify-center"> 11564 <lottie-player data-component="lottie-player" class="" data-src="flow-latin-g-001.json"></lottie-player> 11565 </div> 11566 </div> 11567 <div class="col-span-4 md:col-span-6 pb-6"> 11568 <div class="text-blue"> 11569 <h4 class="pb-4">Stroke Flow</h4> 11570 <p> 11571 The American Gothic model closely follows the logic of the 11572 calligraphic pen stroke. This is particularly visible in the 11573 double-story g that uses bold sweeping curves for both the ear on 11574 top and the curved descender portion of the letter. This same 11575 calligraphic gesture is also visible in the other scripts. 11576 </p> 11577 </div> 11578 </div> 11579 </div> 11580 <div class="grid-setup pt-2"> 11581 <div class="col-span-2 md:col-span-4 pt-2 pb-6"> 11582 <div class="text-blue vf-caption">Cyrillic</div> 11583 <div class="w-full flex flex-grow justify-center"> 11584 <lottie-player data-component="lottie-player" class="" data-src="flow-cyr-be-002.json"></lottie-player> 11585 </div> 11586 </div> 11587 11588 <div class="col-span-2 md:col-span-4 pt-2 pb-6"> 11589 <div class="text-blue vf-caption">Hebrew</div> 11590 <div class="w-full flex flex-grow justify-center"> 11591 <lottie-player data-component="lottie-player" class="" data-src="flow-hebrew-tsadi-001.json"></lottie-player> 11592 </div> 11593 </div> 11594 11595 <div class="col-span-2 md:col-span-4 pt-2 pb-6"> 11596 <div class="text-blue vf-caption">Devanagari</div> 11597 <div class="w-full flex flex-grow justify-center"> 11598 <lottie-player data-component="lottie-player" class="" data-src="flow-devanagari-one-001.json"></lottie-player> 11599 </div> 11600 </div> 11601 11602 <div class="col-span-2 md:col-span-4 pt-2 pb-6"> 11603 <div class="text-blue vf-caption">Thai</div> 11604 <div class="w-full flex flex-grow justify-center"> 11605 <lottie-player data-component="lottie-player" class="" data-src="flow-thai-sosola-001.json"></lottie-player> 11606 </div> 11607 </div> 11608 11609 <div class="col-span-2 md:col-span-4 pt-2 pb-6"> 11610 <div class="text-blue vf-caption">Korean</div> 11611 <div class="w-full flex flex-grow justify-center"> 11612 <lottie-player data-component="lottie-player" class="" data-src="flow-korean-jieut-001.json"></lottie-player> 11613 </div> 11614 </div> 11615 11616 <div class="col-span-2 md:col-span-4 pt-2 pb-6"> 11617 <div class="text-blue vf-caption">Arabic</div> 11618 <div class="w-full flex flex-grow justify-center"> 11619 <lottie-player data-component="lottie-player" class="" data-src="flow-arabic-dal-001.json"></lottie-player> 11620 </div> 11621 </div> 11622 </div> 11623 </div> 11624 </div> 11625 11626 <div class="grid-setup px-4 md:px-0"> 11627 <!-- Left Half of Layout --> 11628 <div class="col-span-4 md:col-span-6 border-t pt-2"> 11629 <div class="grid-setup"> 11630 <div class="col-span-4 md:col-span-6"> 11631 <div class="text-blue vf-caption pt-2">Latin</div> 11632 <div class="w-full flex flex-grow justify-center"> 11633 <lottie-player data-component="lottie-player" class="" data-src="flow-latin-two-001.json"></lottie-player> 11634 </div> 11635 </div> 11636 <div class="col-span-4 md:col-span-6"> 11637 <div class="col-span-2 md:col-span-6"> 11638 <div class="text-blue pb-4">Inward Curving</div> 11639 <div class="text-blue pb-6"> 11640 Characters across different scripts sport an inward curled 11641 movement in reference to calligraphic pen strokes. 11642 </div> 11643 </div> 11644 <div class="col-span-2 md:col-span-6 grid-system mb-6 md:mb-0"> 11645 <div class="col-span-4 md:col-span-12"> 11646 <div class="text-blue vf-caption mb-5">Devanagari</div> 11647 <lottie-player data-component="lottie-player" class="" data-src="flow-devanagari-tha-001.json"></lottie-player> 11648 </div> 11649 </div> 11650 </div> 11651 </div> 11652 </div> 11653 <!-- Right Half of Layout --> 11654 <div class="col-span-4 md:col-span-6 border-t pt-2"> 11655 <div class="flex grid-setup"> 11656 <div class="col-span-4 md:col-span-6"> 11657 <div class="text-blue vf-caption pt-2">Latin</div> 11658 <div class="w-full flex flex-grow justify-center"> 11659 <lottie-player data-component="lottie-player" class="" data-src="flow-latin-eight-002.json"></lottie-player> 11660 </div> 11661 </div> 11662 <div class="col-span-4 md:col-span-6"> 11663 <div class="col-span-1 md:col-6"> 11664 <div class="text-blue pb-4">Interrupted Connection</div> 11665 <div class="text-blue pb-6"> 11666 GT Americas numerals have an interrupted connection, 11667 characteristic of the Gothic model. This further accentuates its 11668 design construction derived from calligraphic pen strokes. This is 11669 also visible in Arabic and Devanagari. 11670 </div> 11671 </div> 11672 <div class="flex col-span-1 md:col-span-6 grid-system"> 11673 <div class="col-span-2 md:col-span-3"> 11674 <div class="text-blue vf-caption">Arabic</div> 11675 <lottie-player data-component="lottie-player" class="" data-src="flow-arabic-waw-002.json"></lottie-player> 11676 </div> 11677 <div class="col-span-2 md:col-span-3"> 11678 <div class="text-blue vf-caption">Devanagari</div> 11679 <lottie-player data-component="lottie-player" class="" data-src="flow-devanagari-four-001.json"></lottie-player> 11680 </div> 11681 </div> 11682 </div> 11683 </div> 11684 </div> 11685 </div> 11686</div> 11687 11688 11689 <div class="pb-9 px-4 md:px-0" data-subnav-jump-to="adjustments"> 11690 <!-- <div class="w-full border-b pb-2">Width & Weight</div> --> 11691 <div class="grid-setup border-t pb-6"> 11692 <div class="col-span-4 md:col-span-4 pt-2"> 11693 <!-- <div class="text-blue">Visual Adjustments</div> --> 11694 <div class="w-full flex flex-grow justify-center pt-4"> 11695 <lottie-player data-component="lottie-player" class="" data-src="c
11695ontrast-latin-m-002.json"></lottie-player> 11696 </div> 11697 </div> 11698 11699 <div class="col-span-4 md:col-span-2 pt-2"> 11700 <div class="w-full flex md:h-full flex-grow align-top md:align-middle flex-col"> 11701 <h4 class="pt-2 pb-4 text-blue">Inktraps</h4> 11702 <p class="text-blue"> 11703 Inktraps are subtle in the lighter weights and become more accentuated 11704 the bolder the weight. This offsets dark spots and improves color and 11705 texture for body copy text. 11706 </p> 11707 <lottie-player data-component="lottie-player" class="" data-src="character-burrito.json"></lottie-player> 11708 </div> 11709 </div> 11710 11711 <div class="col-span-4 md:col-span-6 pt-2"> 11712 <!-- Container for 6 divs that are each 1/3 of available space --> 11713 <div class="grid-setup"> 11714 <div class="col-span-2 md:col-span-4 pt-2 pb-6"> 11715 <div class="text-blue vf-caption">Thai</div> 11716 <div class="w-full flex flex-grow justify-center overflow-hidden"> 11717 <lottie-player data-component="lottie-player" class="hover:scale-[250%] hover:-translate-y-[3%] hover:-translate-x-[15%] cursor-zoom-in transition-transform" data-src="contrast-thai-w-001.json"></lottie-player> 11718 </div> 11719 </div> 11720 11721 <div class="col-span-2 md:col-span-4 pt-2 pb-6"> 11722 <div class="text-blue vf-caption">Cyrillic</div> 11723 <div class="w-full flex flex-grow justify-center overflow-hidden"> 11724 <lottie-player data-component="lottie-player" class="hover:scale-[250%] hover:translate-y-[45%] cursor-zoom-in transition-transform" data-src="contrast-cyr-de-001.json"></lottie-player> 11725 </div> 11726 </div> 11727 11728 <div class="col-span-2 md:col-span-4 pt-2 pb-6"> 11729 <div class="text-blue vf-caption">Korean</div> 11730 <div class="w-full flex flex-grow justify-center overflow-hidden"> 11731 <lottie-player data-component="lottie-player" class="hover:scale-[250%] hover:translate-y-[15%] cursor-zoom-in transition-transform" data-src="contrast-korean-t-001.json"></lottie-player> 11732 </div> 11733 </div> 11734 11735 <div class="col-span-2 md:col-span-4 pt-2 pb-6"> 11736 <div class="text-blue vf-caption">Arabic</div> 11737 <div class="w-full flex flex-grow justify-center overflow-hidden"> 11738 <lottie-player data-component="lottie-player" class="hover:scale-[180%] hover:-translate-y-[8%] hover:-translate-x-[5%] cursor-zoom-in transition-transform" data-src="contrast-arabic-ain-001.json"></lottie-player> 11739 </div> 11740 </div> 11741 11742 <div class="col-span-2 md:col-span-4 pt-2 pb-6"> 11743 <div class="text-blue vf-caption">Greek</div> 11744 <div class="w-full flex flex-grow justify-center overflow-hidden"> 11745 <lottie-player data-component="lottie-player" class="hover:scale-[280%] hover:translate-y-[4%] hover:-translate-x-[0%] cursor-zoom-in transition-transform" data-src="contrast-greek-lambda-001.json"></lottie-player> 11746 </div> 11747 </div> 11748 11749 <div class="col-span-2 md:col-span-4 pt-2 pb-6"> 11750 <div class="text-blue vf-caption">Hebrew</div> 11751 <div class="w-full flex flex-grow justify-center overflow-hidden"> 11752 <lottie-player data-component="lottie-player" class="hover:scale-[250%] hover:translate-y-[0%] hover:translate-x-[0%] cursor-zoom-in transition-transform" data-src="contrast-hebrew-aleph-001.json"></lottie-player> 11753 </div> 11754 </div> 11755 </div> 11756 </div> 11757 </div> 11758 11759 <div class="grid-setup border-t"> 11760 <div class="col-span-4 md:col-span-5 text-blue text-s pt-2 flex flex-col md:flex-row"> 11761 <lottie-player data-component="lottie-player" class="hidden md:flex md:w-1/2 self-start" data-src="character-cucumber-002.json"></lottie-player> 11762 <div class="w-full md:w-1/2 flex flex-col pt-2"> 11763 <h4 class="pb-4">Stroke Contrast</h4> 11764 <p> 11765 GT America is designed with a focus on reading comfort at body copy 11766 sizes. It opts for a comparatively high stroke contrast in bolder 11767 weights to keep counters open and legible. 11768 </p> 11769 </div> 11770 </div> 11771 11772 <div class="col-span-4 md:col-span-7 md:col-start-6 md:-ml-[6vw] mt-4 pt-2"> 11773 <!-- <div class="text-blue vf-caption">Latin</div> --> 11774 <div class="w-full flex flex-grow justify-center align-middle"> 11775 <lottie-player data-component="lottie-player" class="" data-src="c
11775ontrast-latin-aa.json"></lottie-player> 11776 </div> 11777 </div> 11778 </div> 11779 11780 <div class="flex w-full mt-6 mb-4 grid-setup"> 11781 <!-- Specialty Font: Contrast Axis VF Sample--> 11782 <div class="col-span-4 md:col-span-12" data-component="axes-overview"> 11783 <div class="w-full vf-caption text-blue pt-2 mb-6 md:mb-7"> 11784 <!-- <span class="pr-6 hidden md:inline-block">GT America Intl</span> --> 11785 </div> 11786 <div data-component="axes-overview__sample" class="leading-none text-red flex flex-col specialty-font-contrast anim-design-feature-font-contrast"> 11787 <span class="hidden md:block">Rб×ê½à¹Î¾à¤Ú¾</span> 11788 <span class="md:hidden"><span class="px-4">Rб×ê½</span><br><span class="px-4">à¹Î¾à¤Ú¾</span></span> 11789 </div> 11790 </div> 11791 11792 <!-- <img src="images/temp/contrast-all.svg" class="w-full" /> --> 11793 </div> 11794</div> 11795 11796 11797 <div class="pb-9 px-4 md:px-0" data-subnav-jump-to="details"> 11798 <!-- One row of content --> 11799 <div class="grid-setup mb-6 border-t"> 11800 <div class="col-span-4 md:col-span-4 pt-6"> 11801 <!-- <div class="text-blue vf-caption">Latin</div> --> 11802 <div class="w-full flex flex-grow justify-center align-middle"> 11803 <lottie-player data-component="lottie-player" class="" data-src="features-latin-b-001.json"></lottie-player> 11804 </div> 11805 </div> 11806 11807 <div class="col-span-4 md:col-span-3 pt-2"> 11808 <p class="pb-4 text-blue">Design Features</p> 11809 <p class="text-blue"> 11810 Thinned stems and angled spurs are applied and follow the calligraphic 11811 stroke movement. They add personality and unique details while also 11812 improving legibility by enlarging the outer counters. Uppercase 11813 characters are condensed, taking up less width for a more economic 11814 function focused on text usage. 11815 </p> 11816 </div> 11817 11818 <div class="col-span-4 md:col-span-5 pt-2"> 11819 <div class="w-full flex flex-grow justify-center align-middle"> 11820 <lottie-player data-component="lottie-player" class="md:-mt-[15%]" data-src="character-bee-001.json"></lottie-player> 11821 </div> 11822 </div> 11823 </div> 11824 11825 <!-- One row of content --> 11826 <div class="hidden md:grid-setup pb-6"> 11827 <!-- Left half of layout on Desktop--> 11828 <div class="col-span-4 md:col-span-6 border-t pt-2 grid-setup"> 11829 <div class="col-span-4 md:col-span-6"> 11830 <p class="pb-4 text-blue">Economic Typesetting</p> 11831 <p class="text-blue"> 11832 Lowercase m and w are kept at a narrow width to allow for economical 11833 typesetting by fitting more characters on each line. 11834 </p> 11835 <div class="specialty-font-mow anim-design-feature-font-mow text-[5.5vw] leading-[0.4] mt-8"> 11836 wow 11837 </div> 11838 <div class="specialty-font-mow anim-design-feature-font-mow text-[5.5vw] leading-0"> 11839 mom 11840 </div> 11841 </div> 11842 <div class="col-span-4 md:col-span-6 flex flex-col pt-2"> 11843 <!-- <div class="text-blue vf-caption">Latin</div> --> 11844 <lottie-player data-component="lottie-player" class="w-full pb-6" data-src="features-latin-mn-001.json"></lottie-player> 11845 </div> 11846 </div> 11847 11848 <!-- Right half of layout on Desktop--> 11849 <div class="col-span-4 md:col-span-6 border-t pt-2 grid-setup"> 11850 <div class="col-span-4 md:col-span-6"> 11851 <p class="pb-4 text-blue">Alternate g</p> 11852 <p class="text-blue"> 11853 All styles contain an alternate g for a more Swiss Style look.<span class="hidden md:inline"><br></span> 11854 </p> 11855 <div class="text-[5.5vw] leading-[0.4] mt-8">gothic</div> 11856 <div class="ot-ss01 text-[5.5vw] leading-0">grotesk</div> 11857 </div> 11858 <div class="col-span-4 md:col-span-6 flex flex-col pt-2"> 11859 <!-- <div class="text-blue vf-caption">Latin</div> --> 11860 <lottie-player data-component="lottie-player" class="w-full" data-src="features-latin-gg.json"></lottie-player> 11861 </div> 11862 </div> 11863 </div> 11864 11865 <!-- One row of content --> 11866 <div class="grid-setup mb-6 pt-2"> 11867 <div class="col-span-4 md:col-span-4 pt-2 border-t group hover-circular-dots cursor-pointer"> 11868 <p class="pb-6 vf-caption text-blue flex flex-row cursor-pointer"> 11869 Latin: Circular Dots
11870 <span class="h-[1em] relative overflow-hidden flex w-[4ch] cursor-pointer"><span class="absolute -translate-y-5 group-hover:translate-y-0"> On</span><span class="absolute translate-y-0 group-hover:-translate-y-5"> Off</span></span> 11871 </p> 11872 <div class="pb-6 md:pb-0 text-[22vw] md:text-[5.5vw] leading-[0.8]"> 11873 Hijinx! 11874 </div> 11875 </div> 11876 11877 <div class="col-span-4 md:col-span-4 pt-2 border-t group hover-circular-dots cursor-pointer"> 11878 <p class="pb-6 vf-caption text-blue flex flex-row cursor-pointer"> 11879 Cyrillic: Bulgarian Variants 11880 <span class="h-[1em] relative overflow-hidden flex w-[4ch] cursor-pointer"><span class="absolute translate-y-[1000px] group-hover:translate-y-0"> On</span><span class="absolute translate-y-0 group-hover:translate-y-[1000px]"> Off</span></span> 11881 </p> 11882 <div class="pb-6 md:pb-0 text-[22vw] md:text-[5.5vw] leading-[0.8]"> 11883 <span class="h-[1em] relative overflow-hidden flex w-full cursor-pointer"><span class="absolute translate-y-0 group-hover:translate-y-10" lang="uk">ÐолгаÑÑÑ</span><span class="absolute translate-y-10 group-hover:translate-y-0" lang="bg">ÐÑлгаÑиÑ</span></span> 11884 </div> 11885 </div> 11886 11887 <div class="col-span-4 md:col-span-4 pt-2 border-t group hover-circular-dots cursor-pointer"> 11888 <p class="pb-6 vf-caption text-blue flex flex-row cursor-pointer"> 11889 Arabic: Circular Dots 11890 <span class="h-[1em] relative overflow-hidden flex w-[4ch] cursor-pointer"><span class="absolute -translate-y-5 group-hover:translate-y-0"> On</span><span class="absolute translate-y-0 group-hover:-translate-y-5"> Off</span></span> 11891 </p> 11892 <div class="pb-6 md:pb-0 text-[22vw] md:text-[5.5vw] leading-[0.8] cursor-pointer" lang="ar"> 11893 تÙÙ٠عبارة 11894 </div> 11895 </div> 11896 </div> 11897</div> 11898 11899 </div> 11900 </section> 11901</section> 11902 11903 11904 <!--INFORMATION SECTION--> 11905 <section data-nav-section="information" data-nav-colour-switcher-colour="white" data-nav-colour-switcher-colour-hover="black" class="bg-red text-white"> 11906 <section class="flex overflow-hidden"> 11907 <!-- Full Width Content Area --> 11908 <div data-component="section-scene" data-autoplay-until="0" data-start-scroll-offset="0.2" data-src="/models/products/products-v001/products-v001.gltf" data-src-mobile="/models/products/products-mobile-v002/products-mobile-v002.gltf" class="flex self-center w-full h-[100vh] md:h-[90vh]"></div> 11909 </section> 11910 11911 <section class="md:ml-[132px] px-4 mb-9 md:-mt-[4vh] flex"> 11912 <!-- Partial Width Content Area --> 11913 <div class="md:ml-[170px] md:mr-4 grid-setup"> 11914 <h2 class="col-span-full text-2xl md:text-3xl pb-5 md:pb-4"> 11915 Universal Typographic Tool 11916 </h2> 11917 <p class="col-span-4 md:col-span-10 text-md md:text-xl"> 11918 As original and sound as GT America Intl is in its concept and 11919 structure, most of all itâs a useful tool. Consider this your Swiss Army 11920 Knife of typographic systems, with a passport to everywhere. 11921 </p> 11922 </div> 11923 </section> 11924 11925 <!-- Charset Section --> 11926 <section class="hidden md:flex md:ml-[132px] px-4 mb-9 pt-8" data-component="show-hide-section"> 11927 <!-- Partial Width Content Area With Section Nav --> 11928 <!-- Section Nav Area --> 11929 <div class="hidden md:block ml-4 w-[120px] h-1/2 text-xs sticky" data-component="sticky-subnav"> 11930 <form class="flex flex-col justify-center h-full" data-component="show-hide-section__radios"> 11931 <legend class="text-lg">Character Sets</legend> 11932 11933 <div class="flex flex-col items-start pt-5"> 11934 <div class="text-white hover:text-black pt-1 w-[120px]"> 11935 <!-- I'm sure theres a better way of applying this attribute conditionally --> 11936 11937 <input type="radio" checked="" id="info_set-script_latin" name="set-script" value="latin" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-black checked:bg-white checked:hover:border-white checked:hover:bg-black hover:cursor-pointer"> 11938 <label class="nav-radio-label hover:cursor-pointer" for="info_set-script_latin">Latin</label> 11939</div> 11940 11941 11942 <div class="text-white hover:text-black pt-1 w-[120px]"> 11943 <!-- I'm sure theres a better way of applying this attribute conditionally --> 11944 11945 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 11946 <input type="radio" id="info_set-script_cyrillic" name="set-script" value="cyrillic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-black checked:bg-white hover:checked:border-white hover:checked:bg-black hover:cursor-pointer"> 11947 <label class="nav-radio-label hover:cursor-pointer" for="info_set-script_cyrillic">Cyrillic</label> 11948</div> 11949 11950 11951 <div class="text-white hover:text-black pt-1 w-[120px]"> 11952 <!-- I'm sure theres a better way of applying this attribute conditionally --> 11953 11954 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 11955 <input type="radio" id="info_set-script_greek" name="set-script" value="greek" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-black checked:bg-white hover:checked:border-white hover:checked:bg-black hover:cursor-pointer"> 11956 <label class="nav-radio-label hover:cursor-pointer" for="info_set-script_greek">Greek</label> 11957</div> 11958 11959 11960 <div class="text-white hover:text-black pt-1 w-[120px]"> 11961 <!-- I'm sure theres a better way of applying this attribute conditionally --> 11962 11963 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 11964 <input type="radio" id="info_set-script_vietnamese" name="set-script" value="vietnamese" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-black checked:bg-white hover:checked:border-white hover:checked:bg-black hover:cursor-pointer"> 11965 <label class="nav-radio-label hover:cursor-pointer" for="info_set-script_vietnamese">Vietnamese</label> 11966</div> 11967 11968 </div> 11969 11970 <div class="flex flex-col items-start pt-5"> 11971 <div class="text-white hover:text-black pt-1 w-[120px]"> 11972 <!-- I'm sure theres a better way of applying this attribute conditionally --> 11973 11974 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 11975 <input type="radio" id="info_set-script_arabic" name="set-script" value="arabic" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-black checked:bg-white hover:checked:border-white hover:checked:bg-black hover:cursor-pointer"> 11976 <label class="nav-radio-label hover:cursor-pointer" for="info_set-script_arabic">Arabic</label> 11977</div> 11978 11979 11980 <div class="text-white hover:text-black pt-1 w-[120px]"> 11981 <!-- I'm sure theres a better way of applying this attribute conditionally --> 11982 11983 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 11984 <input type="radio" id="info_set-script_devanagari" name="set-script" value="devanagari" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-black checked:bg-white hover:checked:border-white hover:checked:bg-black hover:cursor-pointer"> 11985 <label class="nav-radio-label hover:cursor-pointer" for="info_set-script_devanagari">Devanagari</label> 11986</div> 11987 11988 11989 <div class="text-white hover:text-black pt-1 w-[120px]"> 11990 <!-- I'm sure theres a better way of applying this attribute conditionally --> 11991 11992 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 11993 <input type="radio" id="info_set-script_hebrew" name="set-script" value="hebrew" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-black checked:bg-white hover:checked:border-white hover:checked:bg-black hover:cursor-pointer"> 11994 <label class="nav-radio-label hover:cursor-pointer" for="info_set-script_hebrew">Hebrew</label> 11995</div> 11996 11997 11998 <div class="text-white hover:text-black pt-1 w-[120px]"> 11999 <!-- I'm sure theres a better way of applying this attribute conditionally --> 12000 12001 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 12002 <input type="radio" id="info_set-script_korean" name="set-script" value="korean" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-black checked:bg-white hover:checked:border-white hover:checked:bg-black hover:cursor-pointer"> 12003 <label class="nav-radio-label hover:cursor-pointer" for="info_set-script_korean">Korean</label> 12004</div> 12005 12006 12007 <div class="text-white hover:text-black pt-1 w-[120px]"> 12008 <!-- I'm sure theres a better way of applying this attribute conditionally --> 12009 12010 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 12011 <input type="radio" id="info_set-script_thai-loopless" name="set-script" value="thai-loopless" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-black checked:bg-white hover:checked:border-white hover:checked:bg-black hover:cursor-pointer"> 12012 <label class="nav-radio-label hover:cursor-pointer" for="info_set-script_thai-loopless">Thai Loopless</label> 12013</div> 12014 12015 12016 <div class="text-white hover:text-black pt-1 w-[120px]"> 12017 <!-- I'm sure theres a better way of applying this attribute conditionally --> 12018 12019 <!-- have to add multuple checked classes here to trick tailwind into creating the css for it when we're passing in values like this. annoying --> 12020 <input type="radio" id="info_set-script_thai-looped" name="set-script" value="thai-looped" class="appearance-none m-0 w-[9px] h-[9px] rounded-full border bg-transparent border-white hover:border-black checked:bg-white hover:checked:border-white hover:checked:bg-black hover:cursor-pointer"> 12021 <label class="nav-radio-label hover:cursor-pointer" for="info_set-script_thai-looped">Thai Looped</label> 12022</div> 12023 12024 </div> 12025 12026 <!-- <div class="flex flex-col items-start pt-5"> 12027 <include src="source/html-includes/radio-button.html">
12028 { "color": "white", "hoverColor": "blue", "name": "set-script", 12029 "value": "chinese-simplified", "label": "Simp. Chinese", "checked": 12030 false, "namePrefix": "info" } 12031 </include> 12032 12033 <include src="source/html-includes/radio-button.html"> 12034 { "color": "white", "hoverColor": "blue", "name": "set-script", 12035 "value": "chinese-traditional", "label": "Trad. Chinese", "checked": 12036 false, "namePrefix": "info" } 12037 </include> 12038 12039 <include src="source/html-includes/radio-button.html"> 12040 { "color": "white", "hoverColor": "blue", "name": "set-script", 12041 "value": "japanese", "label": "Japanese", "checked": false, 12042 "namePrefix": "info" } 12043 </include> 12044 </div> --> 12045 </form> 12046 </div> 12047 12048 <!-- Main Content Area --> 12049 <!-- Charset Loupe and Charset --> 12050 <div class="ml-[48px] mr-4 w-full text-xs grid-setup mb-10" data-component="char-set"> 12051 <div class="col-span-7 sticky top-7 h-min"> 12052 <div class="flex flex-row justify-between"> 12053 <div class="flex flex-row"> 12054 <div class="pr-5" data-component="char-set__script"></div> 12055 <div class="pr-5" data-component="char-set__subset"></div> 12056 <div class="pr-5" data-component="char-set__unicode"></div> 12057 </div> 12058 <div class="flex flex-row"> 12059 <div class="pr-5">Standard</div> 12060 <div class="pr-5">Regular</div> 12061 <div>30vw</div> 12062 </div> 12063 </div> 12064 <div class="bg-white text-red flex min-h-[70vh] mt-4 text-5xl leading-none text-center justify-center items-center"> 12065 <span class="z-10" data-component="char-set__loupe"></span> 12066 <!-- <hr 12067 class="absolute w-[calc(100%-1px)] charset-vmetric-caps text-blue top-[25.2%] z-0" 12068 /> 12069 <hr 12070 class="absolute w-[calc(100%-1px)] charset-vmetric-xheight text-blue top-[40.5%] z-0" 12071 /> 12072 <hr 12073 class="absolute w-[calc(100%-1px)] charset-vmetric-baseline text-blue top-[76.82%] z-0" 12074 /> 12075 <hr 12076 class="absolute w-[calc(100%-1px)] charset-vmetric-descender text-blue top-[91.1%] z-0" 12077 /> --> 12078 </div> 12079 <div class="pt-4" data-component="show-hide-section__section" data-show-hide-section-name="korean"> 12080 We are only showing a subset of characters here. Please refer to 12081 <a href="/images/GT-America-Intl-Manual.pdf">the PDF specimen</a> to review 12082 the full Korean character set available for GT America Korean. 12083 </div> 12084 <div class="pt-4" data-component="show-hide-section__section" data-show-hide-section-name="japanese"> 12085 Note about Japanese subsetting when Japanse is shown. 12086 <a href="#">Link to full Korean charset</a> in PDF format. 12087 </div> 12088 <div class="pt-4" data-component="show-hide-section__section" data-show-hide-section-name="chinese-simplified"> 12089 Note about Simplified Chinese subsetting when Simplified Chinese is shown. 12090 <a href="#">Link to full Korean charset</a> in PDF format. 12091 </div> 12092 <div class="pt-4" data-component="show-hide-section__section" data-show-hide-section-name="chinese-traditional"> 12093 Note about Traditional Chinese subsetting when Traditional Chinese is 12094 shown. <a href="#">Link to full Korean charset</a> in PDF format. 12095 </div> 12096 </div> 12097 12098 <!-- Start of one single Charset Section --> 12099<div class="col-span-5" data-component="show-hide-section__section" data-show-hide-section-name="latin"> 12100 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Latin" data-char-set-subset="Basic Alphabet"> 12101 <div class="flex flex-row justify-between"> 12102 <div class="">Basic Alphabet</div> 12103 <div data-component="char-set__subset-size" class=""></div> 12104 </div> 12105 <div> 12106 <div class="character-set-section mt-4"> 12107 <div class="character-set-container text-rg"> 12108 <div data-component="char-set__char" class="charset-single-char"> 12109 A 12110 </div> 12111 <div data-component="char-set__char" class="charset-single-char"> 12112 B 12113 </div> 12114 <div data-component="char-set__char" class="charset-single-char"> 12115 C 12116 </div> 12117 <div data-component="char-set__char" class="charset-single-char"> 12118 D 12119 </div> 12120 <div data-component="char-set__char" class="charset-single-char"> 12121 E 12122 </div> 12123 <div data-component="char-set__char" class="charset-single-char"> 12124 F 12125 </div> 12126 <div data-component="char-set__char" class="charset-single-char"> 12127 G 12128 </div> 12129 <div data-component="char-set__char" class="charset-single-char"> 12130 H 12131 </div> 12132 <div data-component="char-set__char" class="charset-single-char"> 12133 I 12134 </div> 12135 <div data-component="char-set__char" class="charset-single-char"> 12136 J 12137 </div> 12138 <div data-component="char-set__char" class="charset-single-char"> 12139 K 12140 </div> 12141 <div data-component="char-set__char" class="charset-single-char"> 12142 L 12143 </div> 12144 <div data-component="char-set__char" class="charset-single-char"> 12145 M 12146 </div> 12147 <div data-component="char-set__char" class="charset-single-char"> 12148 N 12149 </div> 12150 <div data-component="char-set__char" class="charset-single-char"> 12151 N 12152 </div> 12153 <div data-component="char-set__char" class="charset-single-char"> 12154 O 12155 </div> 12156 <div data-component="char-set__char" class="charset-single-char"> 12157 P 12158 </div> 12159 <div data-component="char-set__char" class="charset-single-char"> 12160 Q 12161 </div> 12162 <div data-component="char-set__char" class="charset-single-char"> 12163 R 12164 </div> 12165 <div data-component="char-set__char" class="charset-single-char"> 12166 S 12167 </div> 12168 <div data-component="char-set__char" class="charset-single-char"> 12169 T 12170 </div> 12171 <div data-component="char-set__char" class="charset-single-char"> 12172 U 12173 </div> 12174 <div data-component="char-set__char" class="charset-single-char"> 12175 V 12176 </div> 12177 <div data-component="char-set__char" class="charset-single-char"> 12178 W 12179 </div> 12180 <div data-component="char-set__char" class="charset-single-char"> 12181 X 12182 </div> 12183 <div data-component="char-set__char" class="charset-single-char"> 12184 Y 12185 </div> 12186 <div data-component="char-set__char" class="charset-single-char"> 12187 Z 12188 </div> 12189 <div data-component="char-set__char" class="charset-single-char"> 12190 a 12191 </div> 12192 <div data-component="char-set__char" class="charset-single-char"> 12193 b 12194 </div> 12195 <div data-component="char-set__char" class="charset-single-char"> 12196 c 12197 </div> 12198 <div data-component="char-set__char" class="charset-single-char"> 12199 d 12200 </div> 12201 <div data-component="char-set__char" class="charset-single-char"> 12202 e 12203 </div> 12204 <div data-component="char-set__char" class="charset-single-char"> 12205 f 12206 </div> 12207 <div data-component="char-set__char" class="charset-single-char"> 12208 g 12209 </div> 12210 <div data-component="char-set__char" class="charset-single-char"> 12211 h 12212 </div> 12213 <div data-component="char-set__char" class="charset-single-char"> 12214 i 12215 </div> 12216 <div data-component="char-set__char" class="charset-single-char"> 12217 j 12218 </div> 12219 <div data-component="char-set__char" class="charset-single-char"> 12220 k 12221 </div> 12222 <div data-component="char-set__char" class="charset-single-char"> 12223 l 12224 </div> 12225 <div data-component="char-set__char" class="charset-single-char"> 12226 m 12227 </div> 12228 <div data-component="char-set__char" class="charset-single-char"> 12229 n 12230 </div> 12231 <div data-component="char-set__char" class="charset-single-char"> 12232 o 12233 </div> 12234 <div data-component="char-set__char" class="charset-single-char"> 12235 p 12236 </div> 12237 <div data-component="char-set__char" class="charset-single-char"> 12238 q 12239 </div> 12240 <div data-component="char-set__char" class="charset-single-char"> 12241 r 12242 </div> 12243 <div data-component="char-set__char" class="charset-single-char"> 12244 s 12245 </div> 12246 <div data-component="char-set__char" class="charset-single-char"> 12247 t 12248 </div> 12249 <div data-component="char-set__char" class="charset-single-char"> 12250 u 12251 </div> 12252 <div data-component="char-set__char" class="charset-single-char"> 12253 v 12254 </div> 12255 <div data-component="char-set__char" class="charset-single-char"> 12256 w 12257 </div> 12258 <div data-component="char-set__char" class="charset-single-char"> 12259 x 12260 </div> 12261 <div data-component="char-set__char" class="charset-single-char"> 12262 y 12263 </div> 12264 <div data-component="char-set__char" class="charset-single-char"> 12265 z 12266 </div> 12267 </div> 12268 </div> 12269 </div> 12270 </div> 12271 <!-- End of Charset Section --> 12272 <!-- Start of one single Charset Section --> 12273 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Latin" data-char-set-subset="Diacritics"> 12274 <div class="flex flex-row justify-between"> 12275 <div class="">Diacritics</div> 12276 <div data-component="char-set__subset-size" class=""></div> 12277 </div> 12278 <div> 12279 <div class="character-set-section mt-4"> 12280 <div class="character-set-container text-rg"> 12281 <div data-component="char-set__char" class="charset-single-char"> 12282 à 12283 </div> 12284 <div data-component="char-set__char" class="charset-single-char"> 12285 Ä 12286 </div> 12287 <div data-component="char-set__char" class="charset-single-char"> 12288 à 12289 </div> 12290 <div data-component="char-set__char" class="charset-single-char"> 12291 à 12292 </div> 12293 <div data-component="char-set__char" class="charset-single-char"> 12294 à 12295 </div> 12296 <div data-component="char-set__char" class="charset-single-char"> 12297 Ǽ 12298 </div> 12299 <div data-component="char-set__char" class="charset-single-char"> 12300 à 12301 </div> 12302 <div data-component="char-set__char" class="charset-single-char"> 12303 Ä 12304 </div> 12305 <div data-component="char-set__char" class="charset-single-char"> 12306 Ä 12307 </div> 12308 <div data-component="char-set__char" class="charset-single-char"> 12309 à 12310 </div> 12311 <div data-component="char-set__char" class="charset-single-char"> 12312 à 12313 </div> 12314 <div data-component="char-set__char" class="charset-single-char"> 12315 Ä 12316 </div> 12317 <div data-component="char-set__char" class="charset-single-char"> 12318 Ä 12319 </div> 12320 <div data-component="char-set__char" class="charset-single-char"> 12321 à 12322 </div> 12323 <div data-component="char-set__char" class="charset-single-char"> 12324 Ä 12325 </div> 12326 <div data-component="char-set__char" class="charset-single-char"> 12327 Ä 12328 </div> 12329 <div data-component="char-set__char" class="charset-single-char"> 12330 Ä 12331 </div> 12332 <div data-component="char-set__char" class="charset-single-char"> 12333 Ä 12334 </div> 12335 <div data-component="char-set__char" class="charset-single-char"> 12336 à 12337 </div> 12338 <div data-component="char-set__char" class="charset-single-char"> 12339 Ä 12340 </div> 12341 <div data-component="char-set__char" class="charset-single-char"> 12342 Ä 12343 </div> 12344 <div data-component="char-set__char" class="charset-single-char"> 12345 à 12346 </div> 12347 <div data-component="char-set__char" class="charset-single-char"> 12348 à 12349 </div> 12350 <div data-component="char-set__char" class="charset-single-char"> 12351 Ä 12352 </div> 12353 <div data-component="char-set__char" class="charset-single-char"> 12354 à 12355 </div> 12356 <div data-component="char-set__char" class="charset-single-char"> 12357 Ä 12358 </div> 12359 <div data-component="char-set__char" class="charset-single-char"> 12360 Ä 12361 </div> 12362 <div data-component="char-set__char" class="charset-single-char"> 12363 à 12364 </div> 12365 <div data-component="char-set__char" class="charset-single-char"> 12366 Ä 12367 </div> 12368 <div data-component="char-set__char" class="charset-single-char"> 12369 Ä 12370 </div> 12371 <div data-component="char-set__char" class="charset-single-char"> 12372 Ä¢ 12373 </div> 12374 <div data-component="char-set__char" class="charset-single-char"> 12375 Ä 12376 </div> 12377 <div data-component="char-set__char" class="charset-single-char"> 12378 Ħ 12379 </div> 12380 <div data-component="char-set__char" class="charset-single-char"> 12381 Ĥ 12382 </div> 12383 <div data-component="char-set__char" class="charset-single-char"> 12384 à 12385 </div> 12386 <div data-component="char-set__char" class="charset-single-char"> 12387 Ĭ 12388 </div> 12389 <div data-component="char-set__char" class="charset-single-char"> 12390 à 12391 </div> 12392 <div data-component="char-set__char" class="charset-single-char"> 12393 à 12394 </div> 12395 <div data-component="char-set__char" class="charset-single-char"> 12396 İ 12397 </div> 12398 <div data-component="char-set__char" class="charset-single-char"> 12399 à 12400 </div> 12401 <div data-component="char-set__char" class="charset-single-char"> 12402 IJ 12403 </div> 12404 <div data-component="char-set__char" class="charset-single-char"> 12405 Ī 12406 </div> 12407 <div data-component="char-set__char" class="charset-single-char"> 12408 Ä® 12409 </div> 12410 <div data-component="char-set__char" class="charset-single-char"> 12411 Ĩ 12412 </div> 12413 <div data-component="char-set__char" class="charset-single-char"> 12414 J 12415 </div> 12416 <div data-component="char-set__char" class="charset-single-char"> 12417 Ä´ 12418 </div> 12419 <div data-component="char-set__char" class="charset-single-char"> 12420 Ķ 12421 </div> 12422 <div data-component="char-set__char" class="charset-single-char"> 12423 Ĺ 12424 </div> 12425 <div data-component="char-set__char" class="charset-single-char"> 12426 Ľ 12427 </div> 12428 <div data-component="char-set__char" class="charset-single-char"> 12429 Ä» 12430 </div> 12431 <div data-component="char-set__char" class="charset-single-char"> 12432 Ä¿ 12433 </div> 12434 <div data-component="char-set__char" class="charset-single-char"> 12435 Å 12436 </div> 12437 <div data-component="char-set__char" class="charset-single-char"> 12438 Å 12439 </div> 12440 <div data-component="char-set__char" class="charset-single-char"> 12441 Å 12442 </div> 12443 <div data-component="char-set__char" class="charset-single-char"> 12444 Å 12445 </div> 12446 <div data-component="char-set__char" class="charset-single-char"> 12447 à 12448 </div> 12449 <div data-component="char-set__char" class="charset-single-char"> 12450 Å 12451 </div> 12452 <div data-component="char-set__char" class="charset-single-char"> 12453 à 12454 </div> 12455 <div data-component="char-set__char" class="charset-single-char"> 12456
12456 Å 12457 </div> 12458 <div data-component="char-set__char" class="charset-single-char"> 12459 à 12460 </div> 12461 <div data-component="char-set__char" class="charset-single-char"> 12462 à 12463 </div> 12464 <div data-component="char-set__char" class="charset-single-char"> 12465 à 12466 </div> 12467 <div data-component="char-set__char" class="charset-single-char"> 12468 Å 12469 </div> 12470 <div data-component="char-set__char" class="charset-single-char"> 12471 à 12472 </div> 12473 <div data-component="char-set__char" class="charset-single-char"> 12474 Å 12475 </div> 12476 <div data-component="char-set__char" class="charset-single-char"> 12477 Å 12478 </div> 12479 <div data-component="char-set__char" class="charset-single-char"> 12480 à 12481 </div> 12482 <div data-component="char-set__char" class="charset-single-char"> 12483 Ǿ 12484 </div> 12485 <div data-component="char-set__char" class="charset-single-char"> 12486 à 12487 </div> 12488 <div data-component="char-set__char" class="charset-single-char"> 12489 Å 12490 </div> 12491 <div data-component="char-set__char" class="charset-single-char"> 12492 Å 12493 </div> 12494 <div data-component="char-set__char" class="charset-single-char"> 12495 Å 12496 </div> 12497 <div data-component="char-set__char" class="charset-single-char"> 12498 Å 12499 </div> 12500 <div data-component="char-set__char" class="charset-single-char"> 12501 Å 12502 </div> 12503 <div data-component="char-set__char" class="charset-single-char"> 12504 Å 12505 </div> 12506 <div data-component="char-set__char" class="charset-single-char"> 12507 Å 12508 </div> 12509 <div data-component="char-set__char" class="charset-single-char"> 12510 È 12511 </div> 12512 <div data-component="char-set__char" class="charset-single-char"> 12513 Ŧ 12514 </div> 12515 <div data-component="char-set__char" class="charset-single-char"> 12516 Ť 12517 </div> 12518 <div data-component="char-set__char" class="charset-single-char"> 12519 Å¢ 12520 </div> 12521 <div data-component="char-set__char" class="charset-single-char"> 12522 È 12523 </div> 12524 <div data-component="char-set__char" class="charset-single-char"> 12525 à 12526 </div> 12527 <div data-component="char-set__char" class="charset-single-char"> 12528 à 12529 </div> 12530 <div data-component="char-set__char" class="charset-single-char"> 12531 Ŭ 12532 </div> 12533 <div data-component="char-set__char" class="charset-single-char"> 12534 à 12535 </div> 12536 <div data-component="char-set__char" class="charset-single-char"> 12537 à 12538 </div> 12539 <div data-component="char-set__char" class="charset-single-char"> 12540 à 12541 </div> 12542 <div data-component="char-set__char" class="charset-single-char"> 12543 Ű 12544 </div> 12545 <div data-component="char-set__char" class="charset-single-char"> 12546 Ū 12547 </div> 12548 <div data-component="char-set__char" class="charset-single-char"> 12549 Ų 12550 </div> 12551 <div data-component="char-set__char" class="charset-single-char"> 12552 Å® 12553 </div> 12554 <div data-component="char-set__char" class="charset-single-char"> 12555 Ũ 12556 </div> 12557 <div data-component="char-set__char" class="charset-single-char"> 12558 Ạ12559 </div> 12560 <div data-component="char-set__char" class="charset-single-char"> 12561 Å´ 12562 </div> 12563 <div data-component="char-set__char" class="charset-single-char"> 12564 Ạ12565 </div> 12566 <div data-component="char-set__char" class="charset-single-char"> 12567 Ạ12568 </div> 12569 <div data-component="char-set__char" class="charset-single-char"> 12570 à 12571 </div> 12572 <div data-component="char-set__char" class="charset-single-char"> 12573 Ŷ 12574 </div> 12575 <div data-component="char-set__char" class="charset-single-char"> 12576 Ÿ 12577 </div> 12578 <div data-component="char-set__char" class="charset-single-char"> 12579 Ỳ 12580 </div> 12581 <div data-component="char-set__char" class="charset-single-char"> 12582 Ź 12583 </div> 12584 <div data-component="char-set__char" class="charset-single-char"> 12585 Ž 12586 </div> 12587 <div data-component="char-set__char" class="charset-single-char"> 12588 Å» 12589 </div> 12590 <div data-component="char-set__char" class="charset-single-char"> 12591 Ạ12592 </div> 12593 <div data-component="char-set__char" class="charset-single-char"> 12594 á 12595 </div> 12596 <div data-component="char-set__char" class="charset-single-char"> 12597 Ä 12598 </div> 12599 <div data-component="char-set__char" class="charset-single-char"> 12600 â 12601 </div> 12602 <div data-component="char-set__char" class="charset-single-char"> 12603 ä 12604 </div> 12605 <div data-component="char-set__char" class="charset-single-char"> 12606 æ 12607 </div> 12608 <div data-component="char-set__char" class="charset-single-char"> 12609 ǽ 12610 </div> 12611 <div data-component="char-set__char" class="charset-single-char"> 12612 à 12613 </div> 12614 <div data-component="char-set__char" class="charset-single-char"> 12615 Ä 12616 </div> 12617 <div data-component="char-set__char" class="charset-single-char"> 12618 Ä 12619 </div> 12620 <div data-component="char-set__char" class="charset-single-char"> 12621 Ã¥ 12622 </div> 12623 <div data-component="char-set__char" class="charset-single-char"> 12624 ã 12625 </div> 12626 <div data-component="char-set__char" class="charset-single-char"> 12627 Ä 12628 </div> 12629 <div data-component="char-set__char" class="charset-single-char"> 12630 Ä 12631 </div> 12632 <div data-component="char-set__char" class="charset-single-char"> 12633 ç 12634 </div> 12635 <div data-component="char-set__char" class="charset-single-char"> 12636 Ä 12637 </div> 12638 <div data-component="char-set__char" class="charset-single-char"> 12639 Ä 12640 </div> 12641 <div data-component="char-set__char" class="charset-single-char"> 12642 Ä 12643 </div> 12644 <div data-component="char-set__char" class="charset-single-char"> 12645 Ä 12646 </div> 12647 <div data-component="char-set__char" class="charset-single-char"> 12648 é 12649 </div> 12650 <div data-component="char-set__char" class="charset-single-char"> 12651 Ä 12652 </div> 12653 <div data-component="char-set__char" class="charset-single-char"> 12654 Ä 12655 </div> 12656 <div data-component="char-set__char" class="charset-single-char"> 12657 ê 12658 </div> 12659 <div data-component="char-set__char" class="charset-single-char"> 12660 ë 12661 </div> 12662 <div data-component="char-set__char" class="charset-single-char"> 12663 Ä 12664 </div> 12665 <div data-component="char-set__char" class="charset-single-char"> 12666 è 12667 </div> 12668 <div data-component="char-set__char" class="charset-single-char"> 12669 Ä 12670 </div> 12671 <div data-component="char-set__char" class="charset-single-char"> 12672 Ä 12673 </div> 12674 <div data-component="char-set__char" class="charset-single-char"> 12675 ð 12676 </div> 12677 <div data-component="char-set__char" class="charset-single-char"> 12678 Ä 12679 </div> 12680 <div data-component="char-set__char" class="charset-single-char"> 12681 Ä 12682 </div> 12683 <div data-component="char-set__char" class="charset-single-char"> 12684 Ä£ 12685 </div> 12686 <div data-component="char-set__char" class="charset-single-char"> 12687 Ä¡ 12688 </div> 12689 <div data-component="char-set__char" class="charset-single-char"> 12690 ħ 12691 </div> 12692 <div data-component="char-set__char" class="charset-single-char"> 12693 Ä¥ 12694 </div> 12695 <div data-component="char-set__char" class="charset-single-char"> 12696 à 12697 </div> 12698 <div data-component="char-set__char" class="charset-single-char"> 12699 Ä 12700 </div> 12701 <div data-component="char-set__char" class="charset-single-char"> 12702 î 12703 </div> 12704 <div data-component="char-set__char" class="charset-single-char"> 12705 ï 12706 </div> 12707 <div data-component="char-set__char" class="charset-single-char"> 12708 iÌ 12709 </div> 12710 <div data-component="char-set__char" class="charset-single-char"> 12711 ì 12712 </div> 12713 <div data-component="char-set__char" class="charset-single-char"> 12714 ij 12715 </div> 12716 <div data-component="char-set__char" class="charset-single-char"> 12717 Ä« 12718 </div> 12719 <div data-component="char-set__char" class="charset-single-char"> 12720 į 12721 </div> 12722 <div data-component="char-set__char" class="charset-single-char"> 12723 Ä© 12724 </div> 12725 <div data-component="char-set__char" class="charset-single-char"> 12726 j 12727 </div> 12728 <div data-component="char-set__char" class="charset-single-char"> 12729 ĵ 12730 </div> 12731 <div data-component="char-set__char" class="charset-single-char"> 12732 Ä· 12733 </div> 12734 <div data-component="char-set__char" class="charset-single-char"> 12735 ĺ 12736 </div> 12737 <div data-component="char-set__char" class="charset-single-char"> 12738 ľ 12739 </div> 12740 <div data-component="char-set__char" class="charset-single-char"> 12741 ļ 12742 </div> 12743 <div data-component="char-set__char" class="charset-single-char"> 12744 Å 12745 </div> 12746 <div data-component="char-set__char" class="charset-single-char"> 12747 Å 12748 </div> 12749 <div data-component="char-set__char" class="charset-single-char"> 12750 Å 12751 </div> 12752 <div data-component="char-set__char" class="charset-single-char"> 12753 Å 12754 </div> 12755 <div data-component="char-set__char" class="charset-single-char"> 12756 Å 12757 </div> 12758 <div data-component="char-set__char" class="charset-single-char"> 12759 ñ 12760 </div> 12761 <div data-component="char-set__char" class="charset-single-char"> 12762 Å 12763 </div> 12764 <div data-component="char-set__char" class="charset-single-char"> 12765 ó 12766 </div> 12767 <div data-component="char-set__char" class="charset-single-char"> 12768 Å 12769 </div> 12770 <div data-component="char-set__char" class="charset-single-char"> 12771 ô 12772 </div> 12773 <div data-component="char-set__char" class="charset-single-char"> 12774 ö 12775 </div> 12776 <div data-component="char-set__char" class="charset-single-char"> 12777 ö 12778 </div> 12779 <div data-component="char-set__char" class="charset-single-char"> 12780 Å 12781 </div> 12782 <div data-component="char-set__char" class="charset-single-char"> 12783 ò 12784 </div> 12785 <div data-component="char-set__char" class="charset-single-char"> 12786 Å 12787 </div> 12788 <div data-component="char-set__char" class="charset-single-char"> 12789 Å 12790 </div> 12791 <div data-component="char-set__char" class="charset-single-char"> 12792 ø 12793 </div> 12794 <div data-component="char-set__char" class="charset-single-char"> 12795 Ç¿ 12796 </div> 12797 <div data-component="char-set__char" class="charset-single-char"> 12798 õ 12799 </div> 12800 <div data-component="char-set__char" class="charset-single-char"> 12801 Å 12802 </div> 12803 <div data-component="char-set__char" class="charset-single-char"> 12804 Å 12805 </div> 12806 <div data-component="char-set__char" class="charset-single-char"> 12807 Å 12808 </div> 12809 <div data-component="char-set__char" class="charset-single-char"> 12810 Å 12811 </div> 12812 <div data-component="char-set__char" class="charset-single-char"> 12813 Å¡ 12814 </div> 12815 <div data-component="char-set__char" class="charset-single-char"> 12816 Å 12817 </div> 12818 <div data-component="char-set__char" class="charset-single-char"> 12819 Å 12820 </div> 12821 <div data-component="char-set__char" class="charset-single-char"> 12822 È 12823 </div> 12824 <div data-component="char-set__char" class="charset-single-char"> 12825 ŧ 12826 </div> 12827 <div data-component="char-set__char" class="charset-single-char"> 12828 Å¥ 12829 </div> 12830 <div data-component="char-set__char" class="charset-single-char"> 12831 Å£ 12832 </div> 12833 <div data-component="char-set__char" class="charset-single-char"> 12834 È 12835 </div> 12836 <div data-component="char-set__char" class="charset-single-char"> 12837 þ 12838 </div> 12839 <div data-component="char-set__char" class="charset-single-char"> 12840 ú 12841 </div> 12842 <div data-component="char-set__char" class="charset-single-char"> 12843 Å 12844 </div> 12845 <div data-component="char-set__char" class="charset-single-char"> 12846 û 12847 </div> 12848 <div data-component="char-set__char" class="charset-single-char"> 12849 ü 12850 </div> 12851 <div data-component="char-set__char" class="charset-single-char"> 12852 ù 12853 </div> 12854 <div data-component="char-set__char" class="charset-single-char"> 12855 ű 12856 </div> 12857 <div data-component="char-set__char" class="charset-single-char"> 12858 Å« 12859 </div> 12860 <div data-component="char-set__char" class="charset-single-char"> 12861 ų 12862 </div> 12863 <div data-component="char-set__char" class="charset-single-char"> 12864 ů 12865 </div> 12866 <div data-component="char-set__char" class="charset-single-char"> 12867 Å© 12868 </div> 12869 <div data-component="char-set__char" class="charset-single-char"> 12870 Ạ12871 </div> 12872 <div data-component="char-set__char" class="charset-single-char"> 12873 ŵ 12874 </div> 12875 <div data-component="char-set__char" class="charset-single-char"> 12876 Ạ12877 </div> 12878 <div data-component="char-set__char" class="charset-single-char"> 12879 Ạ12880 </div> 12881 <div data-component="char-set__char" class="charset-single-char"> 12882 ý 12883 </div> 12884 <div data-component="char-set__char" class="charset-single-char"> 12885 Å· 12886 </div> 12887 <div data-component="char-set__char" class="charset-single-char"> 12888 ÿ 12889 </div> 12890 <div data-component="char-set__char" class="charset-single-char"> 12891 ỳ 12892 </div> 12893 <div data-component="char-set__char" class="charset-single-char"> 12894 ź 12895 </div> 12896 <div data-component="char-set__char" class="charset-single-char"> 12897 ž 12898 </div> 12899 <div data-component="char-set__char" class="charset-single-char"> 12900 ż 12901 </div> 12902 <div data-component="char-set__char" class="charset-single-char"> 12903 à 12904 </div> 12905 </div> 12906 </div> 12907 </div> 12908 </div> 12909 <!-- End of Charset Section --> 12910 <!-- Start of one single Charset Section --> 12911 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Latin" data-char-set-subset="Numbers, Punct
12911uations, and Symbols"> 12912 <div class="flex flex-row justify-between"> 12913 <div class="">Numbers, Punctuations, and Symbols</div> 12914 <div data-component="char-set__subset-size" class=""></div> 12915 </div> 12916 <div> 12917 <div class="character-set-section mt-4"> 12918 <div class="character-set-container text-rg"> 12919 <div data-component="char-set__char" class="charset-single-char"> 12920 0 12921 </div> 12922 <div data-component="char-set__char" class="charset-single-char"> 12923 1 12924 </div> 12925 <div data-component="char-set__char" class="charset-single-char"> 12926 2 12927 </div> 12928 <div data-component="char-set__char" class="charset-single-char"> 12929 3 12930 </div> 12931 <div data-component="char-set__char" class="charset-single-char"> 12932 4 12933 </div> 12934 <div data-component="char-set__char" class="charset-single-char"> 12935 5 12936 </div> 12937 <div data-component="char-set__char" class="charset-single-char"> 12938 6 12939 </div> 12940 <div data-component="char-set__char" class="charset-single-char"> 12941 7 12942 </div> 12943 <div data-component="char-set__char" class="charset-single-char"> 12944 8 12945 </div> 12946 <div data-component="char-set__char" class="charset-single-char"> 12947 9 12948 </div> 12949 12950 <div data-component="char-set__char" class="charset-single-char ot-lnum-slash"> 12951 0 12952 </div> 12953 12954 <!-- Tabular Numerals --> 12955 <div data-component="char-set__char" class="charset-single-char ot-lnum-tnum"> 12956 0 12957 </div> 12958 <div data-component="char-set__char" class="charset-single-char ot-lnum-tnum"> 12959 1 12960 </div> 12961 <div data-component="char-set__char" class="charset-single-char ot-lnum-tnum"> 12962 2 12963 </div> 12964 <div data-component="char-set__char" class="charset-single-char ot-lnum-tnum"> 12965 3 12966 </div> 12967 <div data-component="char-set__char" class="charset-single-char ot-lnum-tnum"> 12968 4 12969 </div> 12970 <div data-component="char-set__char" class="charset-single-char ot-lnum-tnum"> 12971 5 12972 </div> 12973 <div data-component="char-set__char" class="charset-single-char ot-lnum-tnum"> 12974 6 12975 </div> 12976 <div data-component="char-set__char" class="charset-single-char ot-lnum-tnum"> 12977 7 12978 </div> 12979 <div data-component="char-set__char" class="charset-single-char ot-lnum-tnum"> 12980 8 12981 </div> 12982 <div data-component="char-set__char" class="charset-single-char ot-lnum-tnum"> 12983 9 12984 </div> 12985 12986 <div data-component="char-set__char" class="charset-single-char ot-tf-lnum-slash"> 12987 0 12988 </div> 12989 12990 <!-- Oldstyle Numerals --> 12991 <div data-component="char-set__char" class="charset-single-char ot-onum"> 12992 0 12993 </div> 12994 <div data-component="char-set__char" class="charset-single-char ot-onum"> 12995 1 12996 </div> 12997 <div data-component="char-set__char" class="charset-single-char ot-onum"> 12998 2 12999 </div> 13000 <div data-component="char-set__char" class="charset-single-char ot-onum"> 13001 3 13002 </div> 13003 <div data-component="char-set__char" class="charset-single-char ot-onum"> 13004 4 13005 </div> 13006 <div data-component="char-set__char" class="charset-single-char ot-onum"> 13007 5 13008 </div> 13009 <div data-component="char-set__char" class="charset-single-char ot-onum"> 13010 6 13011 </div> 13012 <div data-component="char-set__char" class="charset-single-char ot-onum"> 13013 7 13014 </div> 13015 <div data-component="char-set__char" class="charset-single-char ot-onum"> 13016 8 13017 </div> 13018 <div data-component="char-set__char" class="charset-single-char ot-onum"> 13019 9 13020 </div> 13021 13022 <div data-component="char-set__char" class="charset-single-char ot-onum-slash"> 13023 0 13024 </div> 13025
13026 <!-- Circular Numerals --> 13027 <div data-component="char-set__char" class="charset-single-char"> 13028 â 13029 </div> 13030 <div data-component="char-set__char" class="charset-single-char"> 13031 â 13032 </div> 13033 <div data-component="char-set__char" class="charset-single-char"> 13034 â¶ 13035 </div> 13036 <div data-component="char-set__char" class="charset-single-char"> 13037 â· 13038 </div> 13039 <div data-component="char-set__char" class="charset-single-char"> 13040 ⸠13041 </div> 13042 <div data-component="char-set__char" class="charset-single-char"> 13043 â¹ 13044 </div> 13045 <div data-component="char-set__char" class="charset-single-char"> 13046 ⺠13047 </div> 13048 <div data-component="char-set__char" class="charset-single-char"> 13049 â» 13050 </div> 13051 <div data-component="char-set__char" class="charset-single-char"> 13052 â¼ 13053 </div> 13054 <div data-component="char-set__char" class="charset-single-char"> 13055 â½ 13056 </div> 13057 <div data-component="char-set__char" class="charset-single-char"> 13058 â¾ 13059 </div> 13060 <div data-component="char-set__char" class="charset-single-char"> 13061 â 13062 </div> 13063 <div data-component="char-set__char" class="charset-single-char"> 13064 â¡ 13065 </div> 13066 <div data-component="char-set__char" class="charset-single-char"> 13067 ⢠13068 </div> 13069 <div data-component="char-set__char" class="charset-single-char"> 13070 ⣠13071 </div> 13072 <div data-component="char-set__char" class="charset-single-char"> 13073 ⤠13074 </div> 13075 <div data-component="char-set__char" class="charset-single-char"> 13076 ⥠13077 </div> 13078 <div data-component="char-set__char" class="charset-single-char"> 13079 ⦠13080 </div> 13081 <div data-component="char-set__char" class="charset-single-char"> 13082 â§ 13083 </div> 13084 <div data-component="char-set__char" class="charset-single-char"> 13085 ⨠13086 </div> 13087 13088 <div data-component="char-set__char" class="charset-single-char"> 13089 ( 13090 </div> 13091 <div data-component="char-set__char" class="charset-single-char"> 13092 [ 13093 </div> 13094 <div data-component="char-set__char" class="charset-single-char"> 13095 { 13096 </div> 13097 <div data-component="char-set__char" class="charset-single-char"> 13098 , 13099 </div> 13100 <div data-component="char-set__char" class="charset-single-char"> 13101 ; 13102 </div> 13103 <div data-component="char-set__char" class="charset-single-char"> 13104 : 13105 </div> 13106 <div data-component="char-set__char" class="charset-single-char"> 13107 . 13108 </div> 13109 <div data-component="char-set__char" class="charset-single-char"> 13110 ⦠13111 </div> 13112 <div data-component="char-set__char" class="charset-single-char"> 13113 - 13114 </div> 13115 <div data-component="char-set__char" class="charset-single-char"> 13116 â 13117 </div> 13118 <div data-component="char-set__char" class="charset-single-char"> 13119 â 13120 </div> 13121 <div data-component="char-set__char" class="charset-single-char"> 13122 â 13123 </div> 13124 <div data-component="char-set__char" class="charset-single-char"> 13125 â 13126 </div> 13127 <div data-component="char-set__char" class="charset-single-char"> 13128 â 13129 </div> 13130 <div data-component="char-set__char" class="charset-single-char"> 13131 â 13132 </div> 13133 <div data-component="char-set__char" class="charset-single-char"> 13134 â¹ 13135 </div> 13136 <div data-component="char-set__char" class="charset-single-char"> 13137 ⺠13138 </div> 13139 <div data-component="char-set__char" class="charset-single-char"> 13140 · 13141 </div> 13142 <div data-component="char-set__char" class="charset-single-char"> 13143 â 13144 </div> 13145 <div data-component="char-set__char" class="charset-single-char"> 13146 â 13147 </div> 13148 <div data-component="char-set__char" class="charset-single-char"> 13149 ⢠13150 </div> 13151 <div data-component="char-set__char" class="charset-single-char"> 13152 « 13153 </div> 13154 <div data-component="char-set__char" class="charset-single-char"> 13155 » 13156 </div> 13157 <div data-component="char-set__char" class="charset-single-char"> 13158 ) 13159 </div> 13160 <div data-component="char-set__char" class="charset-single-char"> 13161 ] 13162 </div> 13163 <div data-component="char-set__char" class="charset-single-char"> 13164 } 13165 </div> 13166 <div data-component="char-set__char" class="charset-single-char"> 13167 ! 13168 </div> 13169 <div data-component="char-set__char" class="charset-single-char"> 13170 ¡ 13171 </div> 13172 <div data-component="char-set__char" class="charset-single-char"> 13173 ? 13174 </div> 13175 <div data-component="char-set__char" class="charset-single-char"> 13176 ¿ 13177 </div> 13178 <div data-component="char-set__char" class="charset-single-char"> 13179 / 13180 </div> 13181 <div data-component="char-set__char" class="charset-single-char"> 13182 ' 13183 </div> 13184 <div data-component="char-set__char" class="charset-single-char"> 13185 " 13186 </div> 13187 <div data-component="char-set__char" class="charset-single-char"> 13188 ʼ 13189 </div> 13190 <div data-component="char-set__char" class="charset-single-char"> 13191 & 13192 </div> 13193 <div data-component="char-set__char" class="charset-single-char"> 13194 @ 13195 </div> 13196 <div data-component="char-set__char" class="charset-single-char"> 13197 © 13198 </div> 13199 <div data-component="char-set__char" class="charset-single-char"> 13200 â 13201 </div> 13202 <div data-component="char-set__char" class="charset-single-char"> 13203 ® 13204 </div> 13205 <div data-component="char-set__char" class="charset-single-char"> 13206 ⢠13207 </div> 13208 <div data-component="char-set__char" class="charset-single-char"> 13209 ¶ 13210 </div> 13211 <div data-component="char-set__char" class="charset-single-char"> 13212 § 13213 </div> 13214 <div data-component="char-set__char" class="charset-single-char"> 13215 â 13216 </div> 13217 <div data-component="char-set__char" class="charset-single-char"> 13218 â¡ 13219 </div> 13220 <div data-component="char-set__char" class="charset-single-char"> 13221 * 13222 </div> 13223 <div data-component="char-set__char" class="charset-single-char"> 13224 # 13225 </div> 13226 <div data-component="char-set__char" class="charset-single-char"> 13227 â 13228 </div> 13229 <div data-component="char-set__char" class="charset-single-char"> 13230 â 13231 </div> 13232 <div data-component="char-set__char" class="charset-single-char"> 13233 + 13234 </div> 13235 <div data-component="char-set__char" class="charset-single-char"> 13236 â 13237 </div> 13238 <div data-component="char-set__char" class="charset-single-char"> 13239 ± 13240 </div> 13241 <div data-component="char-set__char" class="charset-single-char"> 13242 à 13243 </div> 13244 <div data-component="char-set__char" class="charset-single-char"> 13245 ÷ 13246 </div> 13247 <div data-component="char-set__char" class="charset-single-char"> 13248 = 13249 </div> 13250 <div data-component="char-set__char" class="charset-single-char"> 13251 ° 13252 </div> 13253 <div data-component="char-set__char" class="charset-single-char">
13254 â 13255 </div> 13256 <div data-component="char-set__char" class="charset-single-char"> 13257 â 13258 </div> 13259 <div data-component="char-set__char" class="charset-single-char"> 13260 ⥠13261 </div> 13262 <div data-component="char-set__char" class="charset-single-char"> 13263 ⤠13264 </div> 13265 <div data-component="char-set__char" class="charset-single-char"> 13266 $ 13267 </div> 13268 <div data-component="char-set__char" class="charset-single-char"> 13269 ¢ 13270 </div> 13271 <div data-component="char-set__char" class="charset-single-char"> 13272 £ 13273 </div> 13274 <div data-component="char-set__char" class="charset-single-char"> 13275 ¤ 13276 </div> 13277 <div data-component="char-set__char" class="charset-single-char"> 13278 Â¥ 13279 </div> 13280 <div data-component="char-set__char" class="charset-single-char"> 13281 ⬠13282 </div> 13283 <div data-component="char-set__char" class="charset-single-char"> 13284 ⺠13285 </div> 13286 <div data-component="char-set__char" class="charset-single-char"> 13287 â¿ 13288 </div> 13289 <div data-component="char-set__char" class="charset-single-char"> 13290 â© 13291 </div> 13292 <div data-component="char-set__char" class="charset-single-char"> 13293 â® 13294 </div> 13295 <div data-component="char-set__char" class="charset-single-char"> 13296 â´ 13297 </div> 13298 <div data-component="char-set__char" class="charset-single-char"> 13299 ⸠13300 </div> 13301 <div data-component="char-set__char" class="charset-single-char"> 13302 â¹ 13303 </div> 13304 <div data-component="char-set__char" class="charset-single-char"> 13305 â½ 13306 </div> 13307 <div data-component="char-set__char" class="charset-single-char"> 13308 â 13309 </div> 13310 <div data-component="char-set__char" class="charset-single-char"> 13311 â 13312 </div> 13313 <div data-component="char-set__char" class="charset-single-char"> 13314 â 13315 </div> 13316 <div data-component="char-set__char" class="charset-single-char"> 13317 â 13318 </div> 13319 <div data-component="char-set__char" class="charset-single-char"> 13320 â 13321 </div> 13322 <div data-component="char-set__char" class="charset-single-char"> 13323 â 13324 </div> 13325 <div data-component="char-set__char" class="charset-single-char"> 13326 â 13327 </div> 13328 <div data-component="char-set__char" class="charset-single-char"> 13329 â 13330 </div> 13331 <div data-component="char-set__char" class="charset-single-char"> 13332 â 13333 </div> 13334 <div data-component="char-set__char" class="charset-single-char"> 13335 â 13336 </div> 13337 <div data-component="char-set__char" class="charset-single-char"> 13338 â© 13339 </div> 13340 <div data-component="char-set__char" class="charset-single-char"> 13341 ⪠13342 </div> 13343 <div data-component="char-set__char" class="charset-single-char"> 13344 â° 13345 </div> 13346 <div data-component="char-set__char" class="charset-single-char"> 13347 â± 13348 </div> 13349 <div data-component="char-set__char" class="charset-single-char"> 13350 â² 13351 </div> 13352 <div data-component="char-set__char" class="charset-single-char"> 13353 â³ 13354 </div> 13355 <div data-component="char-set__char" class="charset-single-char"> 13356 â´ 13357 </div> 13358 <div data-component="char-set__char" class="charset-single-char"> 13359 ⬠13360 </div> 13361 <div data-component="char-set__char" class="charset-single-char"> 13362 â 13363 </div> 13364 <div data-component="char-set__char" class="charset-single-char"> 13365 â» 13366 </div> 13367 </div> 13368 </div> 13369 </div> 13370 </div> 13371 <!-- End of Charset Section --> 13372 <!-- Start of one single Charset Section --> 13373 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Latin" data-char-set-subset="Alternate Characters"> 13374 <div class="flex flex-row justify-between"> 13375 <div class="">Alternate Characters</div> 13376 <div data-component="char-set__subset-size" class=""></div> 13377 </div> 13378 <div> 13379 <div class="character-set-section mt-4"> 13380 <div class="character-set-container text-rg"> 13381 <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow"> 13382 g 13383 </div> 13384 <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow"> 13385 1 13386 </div> 13387 13388 <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow"> 13389 â 13390 </div> 13391 <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow"> 13392 â 13393 </div> 13394 <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow"> 13395 â 13396 </div> 13397 <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow"> 13398 â 13399 </div> 13400 <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow"> 13401 â 13402 </div> 13403 <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow"> 13404 â 13405 </div> 13406 <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow"> 13407 â 13408 </div> 13409 <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow"> 13410 â 13411 </div> 13412 13413 <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow"> 13414 . 13415 </div> 13416 13417 <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow"> 13418 , 13419 </div> 13420 13421 <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow"> 13422 ! 13423 </div> 13424 13425 <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow"> 13426 ? 13427 </div> 13428 13429 <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow"> 13430 i 13431 </div> 13432 13433 <div data-component="char-set__char" class="charset-single-char ot-ssplusarrow"> 13434 j 13435 </div> 13436 </div> 13437 </div> 13438 </div> 13439 </div> 13440</div> 13441 13442 <!-- Start of one single Charset Section --> 13443<div class="col-span-5" data-component="show-hide-section__section" data-show-hide-section-name="cyrillic"> 13444 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Cyrillic" data-char-set-subset="Uppercase"> 13445 <div class="flex flex-row justify-between"> 13446 <div class="">Uppercase</div> 13447 <div data-component="char-set__subset-size" class=""></div> 13448 </div> 13449 <div> 13450 <div class="character-set-section mt-4"> 13451 <div class="character-set-container text-rg"> 13452 <div data-component="char-set__char" class="charset-single-char"> 13453 Ð 13454 </div> 13455 <div data-component="char-set__char" class="charset-single-char"> 13456 Ð 13457 </div> 13458 <div data-component="char-set__char" class="charset-single-char"> 13459 Ð 13460 </div> 13461 <div data-component="char-set__char" class="charset-single-char"> 13462 Ð 13463 </div> 13464 <div data-component="char-set__char" class="charset-single-char"> 13465 Ð 13466 </div> 13467 <div data-component="char-set__char" class="charset-single-char"> 13468 Ò 13469 </div> 13470 <div data-component="char-set__char" class="charset-single-char"> 13471 Ð 13472 </div> 13473 <div data-component="char-set__char" class="charset-single-char"> 13474 Ð 13475 </div> 13476 <div data-component="char-set__char" class="charset-single-char"> 13477 Ð 13478 </div> 13479 <div data-component="char-set__char" class="charset-single-char"> 13480 Ð 13481 </div> 13482 <div data-component="char-set__char" class="charset-single-char"> 13483 Ð 13484 </div> 13485 <div data-component="char-set__char" class="charset-single-char"> 13486 Ð 13487 </div> 13488 <div data-component="char-set__char" class="charset-single-char"> 13489 Ð 13490 </div> 13491 <div data-component="char-set__char" class="charset-single-char"> 13492 Ð 13493 </div> 13494 <div data-component="char-set__char" class="charset-single-char"> 13495 Ð 13496 </div> 13497 <div data-component="char-set__char" class="charset-single-char"> 13498 Ð 13499 </div> 13500 <div data-component="char-set__char" class="charset-single-char"> 13501 Ð 13502 </div> 13503 <div data-component="char-set__char" class="charset-single-char"> 13504 Ð 13505 </div> 13506 <div data-component="char-set__char" class="charset-single-char"> 13507 Ð 13508 </div> 13509 <div data-component="char-set__char" class="charset-single-char"> 13510 Ð 13511 </div> 13512 <div data-component="char-set__char" class="charset-single-char"> 13513 Ð 13514 </div> 13515 <div data-component="char-set__char" class="charset-single-char"> 13516 Ð 13517 </div> 13518 <div data-component="char-set__char" class="charset-single-char"> 13519 Ð 13520 </div> 13521 <div data-component="char-set__char" class="charset-single-char"> 13522 С 13523 </div> 13524 <div data-component="char-set__char" class="charset-single-char"> 13525 Т 13526 </div> 13527 <div data-component="char-set__char" class="charset-single-char"> 13528 У 13529 </div> 13530 <div data-component="char-set__char" class="charset-single-char"> 13531 Ð 13532 </div> 13533 <div data-component="char-set__char" class="charset-single-char"> 13534 Ф 13535 </div> 13536 <div data-component="char-set__char" class="charset-single-char"> 13537 Ð¥ 13538 </div> 13539 <div data-component="char-set__char" class="charset-single-char"> 13540 Ч 13541 </div> 13542 <div data-component="char-set__char" class="charset-single-char"> 13543 Ц 13544 </div> 13545 <div data-component="char-set__char" class="charset-single-char"> 13546 Ш 13547 </div> 13548 <div data-component="char-set__char" class="charset-single-char"> 13549 Щ 13550 </div> 13551 <div data-component="char-set__char" class="charset-single-char"> 13552 Ð 13553 </div> 13554 <div data-component="char-set__char" class="charset-single-char"> 13555 Ь 13556 </div> 13557 <div data-component="char-set__char" class="charset-single-char"> 13558 Ъ 13559 </div> 13560 <div data-component="char-set__char" class="charset-single-char"> 13561 Ы 13562 </div> 13563 <div data-component="char-set__char" class="charset-single-char"> 13564 Ð 13565 </div> 13566 <div data-component="char-set__char" class="charset-single-char"> 13567 Ð 13568 </div> 13569 <div data-component="char-set__char" class="charset-single-char"> 13570 Ð 13571 </div> 13572 <div data-component="char-set__char" class="charset-single-char"> 13573 Ð 13574 </div> 13575 <div data-component="char-set__char" class="charset-single-char"> 13576 Ð 13577 </div> 13578 <div data-component="char-set__char" class="charset-single-char"> 13579 Ð 13580 </div> 13581 <div data-component="char-set__char" class="charset-single-char"> 13582 Ð 13583 </div> 13584 <div data-component="char-set__char" class="charset-single-char"> 13585 Ð 13586 </div> 13587 <div data-component="char-set__char" class="charset-single-char"> 13588 Ð 13589 </div> 13590 <div data-component="char-set__char" class="charset-single-char"> 13591 Ю 13592 </div> 13593 <div data-component="char-set__char" class="charset-single-char"> 13594 Я 13595 </div> 13596 <div data-component="char-set__char" class="charset-single-char"> 13597 Ð 13598 </div> 13599 <div data-component="char-set__char" class="charset-single-char"> 13600 Ñ¢ 13601 </div> 13602 <div data-component="char-set__char" class="charset-single-char"> 13603 Ѳ 13604 </div> 13605 <div data-component="char-set__char" class="charset-single-char"> 13606 Ñ´ 13607 </div> 13608 <div data-component="char-set__char" class="charset-single-char"> 13609 Ò 13610 </div> 13611 <div data-component="char-set__char" class="charset-single-char"> 13612 Ò 13613 </div> 13614 <div data-component="char-set__char" class="charset-single-char"> 13615 Ò 13616 </div> 13617 <div data-component="char-set__char" class="charset-single-char"> 13618 Ò 13619 </div> 13620 <div data-component="char-set__char" class="charset-single-char"> 13621 Ò 13622 </div> 13623 <div data-component="char-set__char" class="charset-single-char"> 13624 Ò¢ 13625 </div> 13626 <div data-component="char-set__char" class="charset-single-char"> 13627 Òª 13628 </div> 13629 <div data-component="char-set__char" class="charset-single-char"> 13630 Ò® 13631 </div> 13632 <div data-component="char-set__char" class="charset-single-char"> 13633 Ò° 13634 </div> 13635 <div data-component="char-set__char" class="charset-single-char"> 13636 Ò² 13637 </div> 13638 <div data-component="char-set__char" class="charset-single-char"> 13639 Ò¶ 13640 </div> 13641 <div data-component="char-set__char" class="charset-single-char"> 13642 Òº 13643 </div> 13644 <div data-component="char-set__char" class="charset-single-char"> 13645 Ó 13646 </div> 13647 <div data-component="char-set__char" class="charset-single-char"> 13648 Ó 13649 </div> 13650 <div data-component="char-set__char" class="charset-single-char"> 13651 Ó 13652 </div> 13653 <div data-component="char-set__char" class="charset-single-char"> 13654 Ó 13655 </div> 13656 <div data-component="char-set__char" class="charset-single-char"> 13657 Ó 13658 </div> 13659 <div data-component="char-set__char" class="charset-single-char"> 13660 Ó 13661 </div> 13662 <div data-component="char-set__char" class="charset-single-char"> 13663 Ó¢ 13664 </div> 13665 <div data-component="char-set__char" class="charset-single-char"> 13666 Ó¦ 13667 </div> 13668 <div data-component="char-set__char" class="charset-single-char"> 13669 Ó¨ 13670 </div> 13671 <div data-component="char-set__char" class="charset-single-char"> 13672 Ó® 13673 </div> 13674 <div data-component="char-set__char" class="charset-single-char"> 13675 Ó² 13676 </div> 13677 </div> 13678 </div> 13679 </div> 13680 </div> 13681 <!-- End of Charset Section --> 13682 <!-- Start of one single Charset Section --> 13683 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Cyrillic" data-char-set-subset="Lowercase"> 13684 <div class="flex flex-row justify-between"> 13685 <div class="">Lowercase</div> 13686 <div data-component="char-set__subset-size" class=""></div> 13687 </div> 13688 <div> 13689 <div class="character-set-section mt-4"> 13690 <div class="character-set-container text-rg"> 13691 <div data-component="char-set__char" class="charset-single-char"> 13692 а 13693 </div> 13694 <div data-component="char-set__char" class="charset-single-char"> 13695 б 13696 </div> 13697 <div data-component="char-set__char" class="charset-single-char"> 13698 в 13699 </div> 13700 <div data-component="char-set__char" class="charset-single-char"> 13701 г 13702 </div> 13703 <div data-component="char-set__char" class="charset-single-char"> 13704 Ñ 13705 </div> 13706 <div data-comp
13706onent="char-set__char" class="charset-single-char"> 13707 Ò 13708 </div> 13709 <div data-component="char-set__char" class="charset-single-char"> 13710 д 13711 </div> 13712 <div data-component="char-set__char" class="charset-single-char"> 13713 е 13714 </div> 13715 <div data-component="char-set__char" class="charset-single-char"> 13716 Ñ 13717 </div> 13718 <div data-component="char-set__char" class="charset-single-char"> 13719 Ñ 13720 </div> 13721 <div data-component="char-set__char" class="charset-single-char"> 13722 ж 13723 </div> 13724 <div data-component="char-set__char" class="charset-single-char"> 13725 з 13726 </div> 13727 <div data-component="char-set__char" class="charset-single-char"> 13728 и 13729 </div> 13730 <div data-component="char-set__char" class="charset-single-char"> 13731 й 13732 </div> 13733 <div data-component="char-set__char" class="charset-single-char"> 13734 Ñ 13735 </div> 13736 <div data-component="char-set__char" class="charset-single-char"> 13737 к 13738 </div> 13739 <div data-component="char-set__char" class="charset-single-char"> 13740 Ñ 13741 </div> 13742 <div data-component="char-set__char" class="charset-single-char"> 13743 л 13744 </div> 13745 <div data-component="char-set__char" class="charset-single-char"> 13746 м 13747 </div> 13748 <div data-component="char-set__char" class="charset-single-char"> 13749 н 13750 </div> 13751 <div data-component="char-set__char" class="charset-single-char"> 13752 о 13753 </div> 13754 <div data-component="char-set__char" class="charset-single-char"> 13755 п 13756 </div> 13757 <div data-component="char-set__char" class="charset-single-char"> 13758 Ñ 13759 </div> 13760 <div data-component="char-set__char" class="charset-single-char"> 13761 Ñ 13762 </div> 13763 <div data-component="char-set__char" class="charset-single-char"> 13764 Ñ 13765 </div> 13766 <div data-component="char-set__char" class="charset-single-char"> 13767 Ñ 13768 </div> 13769 <div data-component="char-set__char" class="charset-single-char"> 13770 Ñ 13771 </div> 13772 <div data-component="char-set__char" class="charset-single-char"> 13773 Ñ 13774 </div> 13775 <div data-component="char-set__char" class="charset-single-char"> 13776 Ñ 13777 </div> 13778 <div data-component="char-set__char" class="charset-single-char"> 13779 Ñ 13780 </div> 13781 <div data-component="char-set__char" class="charset-single-char"> 13782 Ñ 13783 </div> 13784 <div data-component="char-set__char" class="charset-single-char"> 13785 Ñ 13786 </div> 13787 <div data-component="char-set__char" class="charset-single-char"> 13788 Ñ 13789 </div> 13790 <div data-component="char-set__char" class="charset-single-char"> 13791 Ñ 13792 </div> 13793 <div data-component="char-set__char" class="charset-single-char"> 13794 Ñ 13795 </div> 13796 <div data-component="char-set__char" class="charset-single-char"> 13797 Ñ 13798 </div> 13799 <div data-component="char-set__char" class="charset-single-char"> 13800 Ñ 13801 </div> 13802 <div data-component="char-set__char" class="charset-single-char"> 13803 Ñ 13804 </div> 13805 <div data-component="char-set__char" class="charset-single-char"> 13806 Ñ 13807 </div> 13808 <div data-component="char-set__char" class="charset-single-char"> 13809 Ñ 13810 </div> 13811 <div data-component="char-set__char" class="charset-single-char"> 13812 Ñ 13813 </div> 13814 <div data-component="char-set__char" class="charset-single-char"> 13815 Ñ 13816 </div> 13817 <div data-component="char-set__char" class="charset-single-char"> 13818 Ñ 13819 </div> 13820 <div data-component="char-set__char" class="charset-single-char"> 13821 Ñ 13822 </div> 13823 <div data-component="char-set__char" class="charset-single-char"> 13824 Ñ 13825 </div> 13826 <div data-component="char-set__char" class="charset-single-char"> 13827 Ñ 13828 </div> 13829 <div data-component="char-set__char" class="charset-single-char"> 13830 Ñ 13831 </div> 13832 <div data-component="char-set__char" class="charset-single-char">
13833 Ñ 13834 </div> 13835 <div data-component="char-set__char" class="charset-single-char"> 13836 Ñ 13837 </div> 13838 <div data-component="char-set__char" class="charset-single-char"> 13839 Ñ£ 13840 </div> 13841 <div data-component="char-set__char" class="charset-single-char"> 13842 ѳ 13843 </div> 13844 <div data-component="char-set__char" class="charset-single-char"> 13845 ѵ 13846 </div> 13847 <div data-component="char-set__char" class="charset-single-char"> 13848 Ò 13849 </div> 13850 <div data-component="char-set__char" class="charset-single-char"> 13851 Ò 13852 </div> 13853 <div data-component="char-set__char" class="charset-single-char"> 13854 Ò 13855 </div> 13856 <div data-component="char-set__char" class="charset-single-char"> 13857 Ò 13858 </div> 13859 <div data-component="char-set__char" class="charset-single-char"> 13860 Ò¡ 13861 </div> 13862 <div data-component="char-set__char" class="charset-single-char"> 13863 Ò£ 13864 </div> 13865 <div data-component="char-set__char" class="charset-single-char"> 13866 Ò« 13867 </div> 13868 <div data-component="char-set__char" class="charset-single-char"> 13869 Ò¯ 13870 </div> 13871 <div data-component="char-set__char" class="charset-single-char"> 13872 Ò± 13873 </div> 13874 <div data-component="char-set__char" class="charset-single-char"> 13875 Ò³ 13876 </div> 13877 <div data-component="char-set__char" class="charset-single-char"> 13878 Ò· 13879 </div> 13880 <div data-component="char-set__char" class="charset-single-char"> 13881 Ò» 13882 </div> 13883 <div data-component="char-set__char" class="charset-single-char"> 13884 Ó 13885 </div> 13886 <div data-component="char-set__char" class="charset-single-char"> 13887 Ó 13888 </div> 13889 <div data-component="char-set__char" class="charset-single-char"> 13890 Ó 13891 </div> 13892 <div data-component="char-set__char" class="charset-single-char"> 13893 Ó 13894 </div> 13895 <div data-component="char-set__char" class="charset-single-char"> 13896 Ó 13897 </div> 13898 <div data-component="char-set__char" class="charset-single-char"> 13899 Ó 13900 </div> 13901 <div data-component="char-set__char" class="charset-single-char"> 13902 Ó£ 13903 </div> 13904 <div data-component="char-set__char" class="charset-single-char"> 13905 Ó§ 13906 </div> 13907 <div data-component="char-set__char" class="charset-single-char"> 13908 Ó© 13909 </div> 13910 <div data-component="char-set__char" class="charset-single-char"> 13911 Ó¯ 13912 </div> 13913 <div data-component="char-set__char" class="charset-single-char"> 13914 Ó³ 13915 </div> 13916 </div> 13917 </div> 13918 </div> 13919 </div> 13920 <!-- End of Charset Section --> 13921 <!-- Start of one single Charset Section --> 13922 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Cyrillic" data-char-set-subset="Bulgarian Alternates"> 13923 <div class="flex flex-row justify-between"> 13924 <div class="">Bulgarian Alternates</div> 13925 <div data-component="char-set__subset-size" class=""></div> 13926 </div> 13927 <div> 13928 <div class="character-set-section mt-4"> 13929 <div class="character-set-container text-rg"> 13930 <div data-component="char-set__char" class="charset-single-char" lang="bg"> 13931 Ð 13932 </div> 13933 <div data-component="char-set__char" class="charset-single-char" lang="bg"> 13934 Ð 13935 </div> 13936 13937 <div data-component="char-set__char" class="charset-single-char" lang="bg"> 13938 в 13939 </div> 13940 <div data-component="char-set__char" class="charset-single-char" lang="bg"> 13941 г 13942 </div> 13943 <div data-component="char-set__char" class="charset-single-char" lang="bg"> 13944 д 13945 </div> 13946 <div data-component="char-set__char" class="charset-single-char" lang="bg"> 13947 ж 13948 </div> 13949 <div data-component="char-set__char" class="charset-single-char" lang="bg"> 13950 и 13951 </div> 13952 <div data-component="char-set__char" class="charset-single-char" lang="bg"> 13953 л 13954 </div> 13955 <div data-component="char-set__char" class="charset-single-char" lang="bg"> 13956 Ñ 13957 </div> 13958 <div data-component="char-set__char" class="charset-single-char" lang="bg"> 13959 Ñ 13960 </div> 13961 </div> 13962 </div> 13963 </div> 13964 </div> 13965 <!-- End of Charset Section --> 13966 <!-- Start of one single Charset Section --> 13967 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Cyrillic" data-char-set-subset="Serbian / Macedonian Alternate"> 13968 <div class="flex flex-row justify-between"> 13969 <div class="">Serbian / Macedonian Alternate</div> 13970 <div data-component="char-set__subset-size" class=""></div> 13971 </div> 13972 <div> 13973 <div class="character-set-section mt-4"> 13974 <div class="character-set-container text-rg"> 13975 <div data-component="char-set__char" class="charset-single-char" lang="sr"> 13976 б 13977 </div> 13978 </div> 13979 </div> 13980 </div> 13981 </div> 13982 13983 <!-- End of Charset Section --> 13984 <!-- Start of one single Charset Section --> 13985 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Cyrillic" data-char-set-subset="Ukrainian Alternate"> 13986 <div class="flex flex-row justify-between"> 13987 <div class="">Ukrainian Alternate</div> 13988 <div data-component="char-set__subset-size" class=""></div> 13989 </div> 13990 <div> 13991 <div class="character-set-section mt-4"> 13992 <div class="character-set-container text-rg"> 13993 <div data-component="char-set__char" class="charset-single-char" lang="uk"> 13994 Ð 13995 </div> 13996 </div> 13997 </div> 13998 </div> 13999 </div> 14000 <!-- End of Charset Section --> 14001</div> 14002 14003 <!-- Start of one single Charset Section --> 14004<div class="col-span-5" data-component="show-hide-section__section" data-show-hide-section-name="greek">
14005 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Greek" data-char-set-subset="Uppercase"> 14006 <div class="flex flex-row justify-between"> 14007 <div class="">Uppercase</div> 14008 <div data-component="char-set__subset-size" class=""></div> 14009 </div> 14010 <div> 14011 <div class="character-set-section mt-4"> 14012 <div class="character-set-container text-rg"> 14013 <div data-component="char-set__char" class="charset-single-char"> 14014 Î 14015 </div> 14016 <div data-component="char-set__char" class="charset-single-char"> 14017 Î 14018 </div> 14019 <div data-component="char-set__char" class="charset-single-char"> 14020 Î 14021 </div> 14022 <div data-component="char-set__char" class="charset-single-char"> 14023 Î 14024 </div> 14025 <div data-component="char-set__char" class="charset-single-char"> 14026 Î 14027 </div> 14028 <div data-component="char-set__char" class="charset-single-char"> 14029 Î 14030 </div> 14031 <div data-component="char-set__char" class="charset-single-char"> 14032 Î 14033 </div> 14034 <div data-component="char-set__char" class="charset-single-char"> 14035 Î 14036 </div> 14037 <div data-component="char-set__char" class="charset-single-char"> 14038 Î 14039 </div> 14040 <div data-component="char-set__char" class="charset-single-char"> 14041 Î 14042 </div> 14043 <div data-component="char-set__char" class="charset-single-char"> 14044 Î 14045 </div> 14046 <div data-component="char-set__char" class="charset-single-char"> 14047 Î 14048 </div> 14049 <div data-component="char-set__char" class="charset-single-char"> 14050 Î 14051 </div> 14052 <div data-component="char-set__char" class="charset-single-char"> 14053 Î 14054 </div> 14055 <div data-component="char-set__char" class="charset-single-char"> 14056 Î 14057 </div> 14058 <div data-component="char-set__char" class="charset-single-char"> 14059 Î 14060 </div> 14061 <div data-component="char-set__char" class="charset-single-char"> 14062 Ρ 14063 </div> 14064 <div data-component="char-set__char" class="charset-single-char"> 14065 Σ 14066 </div> 14067 <div data-component="char-set__char" class="charset-single-char"> 14068 Τ 14069 </div> 14070 <div data-component="char-set__char" class="charset-single-char"> 14071 Î¥ 14072 </div> 14073 <div data-component="char-set__char" class="charset-single-char"> 14074 Φ 14075 </div> 14076 <div data-component="char-set__char" class="charset-single-char"> 14077 Χ 14078 </div> 14079 <div data-component="char-set__char" class="charset-single-char"> 14080 Ψ 14081 </div> 14082 <div data-component="char-set__char" class="charset-single-char"> 14083 Ω 14084 </div> 14085 </div> 14086 </div> 14087 </div> 14088 </div> 14089 <!-- End of Charset Section --> 14090 <!-- Start of one single Charset Section --> 14091 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Greek" data-char-set-subset="Lowercase"> 14092 <div class="flex flex-row justify-between"> 14093 <div class="">Lowercase</div> 14094 <div data-component="char-set__subset-size" class=""></div> 14095 </div> 14096 <div> 14097 <div class="character-set-section mt-4"> 14098 <div class="character-set-container text-rg"> 14099 <div data-component="char-set__char" class="charset-single-char"> 14100 α 14101 </div> 14102 <div data-component="char-set__char" class="charset-single-char"> 14103 β 14104 </div> 14105 <div data-component="char-set__char" class="charset-single-char"> 14106 γ 14107 </div> 14108 <div data-component="char-set__char" class="charset-single-char"> 14109 δ 14110 </div> 14111 <div data-component="char-set__char" class="charset-single-char"> 14112 ε 14113 </div> 14114 <div data-component="char-set__char" class="charset-single-char"> 14115 ζ 14116 </div> 14117 <div data-component="char-set__char" class="charset-single-char"> 14118 η 14119 </div> 14120 <div data-component="char-set__char" class="charset-single-char"> 14121 θ 14122 </div> 14123 <div data-component="char-set__char" class="charset-single-char"> 14124 ι 14125 </div> 14126 <div data-component="char-set__char" class="charset-single-char"> 14127 κ 14128 </div> 14129 <div data-component="char-set__char" class="charset-single-char"> 14130 λ 14131 </div> 14132 <div data-component="char-set__char" class="charset-single-char"> 14133 μ 14134 </div> 14135 <div data-component="char-set__char" class="charset-single-char"> 14136 ν 14137 </div> 14138 <div data-component="char-set__char" class="charset-single-char"> 14139 ξ 14140 </div> 14141 <div data-component="char-set__char" class="charset-single-char"> 14142 ο 14143 </div> 14144 <div data-component="char-set__char" class="charset-single-char"> 14145 Ï
14146 </div> 14147 <div data-component="char-set__char" class="charset-single-char"> 14148 Ï 14149 </div> 14150 <div data-component="char-set__char" class="charset-single-char"> 14151 Ï 14152 </div> 14153 <div data-component="char-set__char" class="charset-single-char"> 14154 Ï 14155 </div> 14156 <div data-component="char-set__char" class="charset-single-char"> 14157 Ï 14158 </div> 14159 <div data-component="char-set__char" class="charset-single-char"> 14160 Ï 14161 </div> 14162 <div data-component="char-set__char" class="charset-single-char"> 14163 Ï 14164 </div> 14165 <div data-component="char-set__char" class="charset-single-char"> 14166 Ï 14167 </div> 14168 <div data-component="char-set__char" class="charset-single-char"> 14169 Ï 14170 </div> 14171 <div data-component="char-set__char" class="charset-single-char"> 14172 Ï 14173 </div> 14174 </div> 14175 </div> 14176 </div> 14177 </div> 14178 <!-- End of Charset Section --> 14179 <!-- Start of one single Charset Section --> 14180 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Greek" data-char-set-subset="Diacritics"> 14181 <div class="flex flex-row justify-between"> 14182 <div class="">Diacritics</div> 14183 <div data-component="char-set__subset-size" class=""></div> 14184 </div> 14185 <div> 14186 <div class="character-set-section mt-4"> 14187 <div class="character-set-container text-rg"> 14188 <div data-component="char-set__char" class="charset-single-char"> 14189 Î 14190 </div> 14191 <div data-component="char-set__char" class="charset-single-char"> 14192 Î 14193 </div> 14194 <div data-component="char-set__char" class="charset-single-char"> 14195 Î 14196 </div> 14197 <div data-component="char-set__char" class="charset-single-char"> 14198 Î 14199 </div> 14200 <div data-component="char-set__char" class="charset-single-char"> 14201 Î 14202 </div> 14203 <div data-component="char-set__char" class="charset-single-char"> 14204 Î 14205 </div> 14206 <div data-component="char-set__char" class="charset-single-char"> 14207 Î 14208 </div> 14209 <div data-component="char-set__char" class="charset-single-char"> 14210 Ϊ 14211 </div> 14212 <div data-component="char-set__char" class="charset-single-char"> 14213 Ϋ 14214 </div> 14215 <div data-component="char-set__char" class="charset-single-char"> 14216 ί 14217 </div> 14218 <div data-component="char-set__char" class="charset-single-char"> 14219 Ï 14220 </div> 14221 <div data-component="char-set__char" class="charset-single-char"> 14222 Î 14223 </div> 14224 <div data-component="char-set__char" class="charset-single-char"> 14225 Ï 14226 </div> 14227 <div data-component="char-set__char" class="charset-single-char"> 14228 Ï 14229 </div> 14230 <div data-component="char-set__char" class="charset-single-char"> 14231 ΰ 14232 </div> 14233 <div data-component="char-set__char" class="charset-single-char"> 14234 Ï 14235 </div> 14236 <div data-component="char-set__char" class="charset-single-char"> 14237 Ï 14238 </div> 14239 <div data-component="char-set__char" class="charset-single-char"> 14240 ά 14241 </div> 14242 <div data-component="char-set__char" class="charset-single-char"> 14243 Î 14244 </div> 14245 <div data-component="char-set__char" class="charset-single-char"> 14246 ή 14247 </div> 14248 </div> 14249 </div> 14250 </div> 14251 </div> 14252 <!-- End of Charset Section --> 14253</div> 14254 14255 <!-- Start of one single Charset Section --> 14256<div class="col-span-5" data-component="show-hide-section__section" data-show-hide-section-name="vietnamese"> 14257 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Vietnamese" data-char-set-subset="Uppercase"> 14258 <div class="flex flex-row justify-between"> 14259 <div class="">Uppercase</div> 14260 <div data-component="char-set__subset-size" class=""></div> 14261 </div> 14262 <div> 14263 <div class="character-set-section mt-4"> 14264 <div class="character-set-container text-rg"> 14265 <div data-component="char-set__char" class="charset-single-char"> 14266 à 14267 </div> 14268 <div data-component="char-set__char" class="charset-single-char"> 14269 Ä 14270 </div> 14271 <div data-component="char-set__char" class="charset-single-char"> 14272 à 14273 </div> 14274 <div data-component="char-set__char" class="charset-single-char"> 14275 à 14276 </div> 14277 <div data-component="char-set__char" class="charset-single-char"> 14278 à 14279 </div> 14280 <div data-component="char-set__char" class="charset-single-char"> 14281 Ắ 14282 </div> 14283 <div data-component="char-set__char" class="charset-single-char"> 14284 Ặ 14285 </div> 14286 <div data-component="char-set__char" class="charset-single-char"> 14287 Ằ 14288 </div> 14289 <div data-component="char-set__char" class="charset-single-char"> 14290 Ẳ 14291 </div> 14292 <div data-component="char-set__char" class="charset-single-char"> 14293 Ẵ 14294 </div> 14295 <div data-component="char-set__char" class="charset-single-char"> 14296 Ấ 14297 </div> 14298 <div data-component="char-set__char" class="charset-single-char"> 14299 Ậ 14300 </div> 14301 <div data-component="char-set__char" class="charset-single-char"> 14302 Ầ 14303 </div> 14304 <div data-component="char-set__char" class="charset-single-char"> 14305 Ẩ 14306 </div> 14307 <div data-component="char-set__char" class="charset-single-char"> 14308 Ẫ 14309 </div> 14310 <div data-component="char-set__char" class="charset-single-char"> 14311 Ạ14312 </div> 14313 <div data-component="char-set__char" class="charset-single-char"> 14314 Ả 14315 </div> 14316 <div data-component="char-set__char" class="charset-single-char"> 14317 Ä 14318 </div> 14319 <div data-component="char-set__char" class="charset-single-char"> 14320 à 14321 </div> 14322 <div data-component="char-set__char" class="charset-single-char"> 14323 à 14324 </div> 14325 <div data-component="char-set__char" class="charset-single-char"> 14326 à 14327 </div> 14328 <div data-component="char-set__char" class="charset-single-char"> 14329 Ế 14330 </div> 14331 <div data-component="char-set__char" class="charset-single-char"> 14332 á» 14333 </div> 14334 <div data-component="char-set__char" class="charset-single-char"> 14335 á» 14336 </div> 14337 14338 <div data-component="char-set__char" class="charset-single-char"> 14339 á» 14340 </div> 14341 <div data-component="char-set__char" class="charset-single-char"> 14342 á» 14343 </div> 14344 <div data-component="char-set__char" class="charset-single-char"> 14345 Ẹ 14346 </div> 14347 <div data-component="char-set__char" class="charset-single-char"> 14348 Ẻ 14349 </div> 14350 <div data-component="char-set__char" class="charset-single-char"> 14351 Ẽ 14352 </div> 14353 <div data-component="char-set__char" class="charset-single-char"> 14354 à 14355 </div> 14356 <div data-component="char-set__char" class="charset-single-char"> 14357 à 14358 </div> 14359 <div data-component="char-set__char" class="charset-single-char"> 14360 Ĩ 14361 </div> 14362 <div data-component="char-set__char" class="charset-single-char"> 14363 á» 14364 </div> 14365 <div data-component="char-set__char" class="charset-single-char"> 14366 á» 14367 </div> 14368 <div data-component="char-set__char" class="charset-single-char"> 14369 à 14370 </div> 14371 <div data-component="char-set__char" class="charset-single-char"> 14372 Ã
14373 </div> 14374 <div data-component="char-set__char" class="charset-single-char"> 14375 à 14376 </div> 14377 <div data-component="char-set__char" class="charset-single-char"> 14378 à 14379 </div> 14380 <div data-component="char-set__char" class="charset-single-char"> 14381 á» 14382 </div> 14383 <div data-component="char-set__char" class="charset-single-char"> 14384 á» 14385 </div> 14386 <div data-component="char-set__char" class="charset-single-char"> 14387 á» 14388 </div> 14389 <div data-component="char-set__char" class="charset-single-char"> 14390 á» 14391 </div> 14392 <div data-component="char-set__char" class="charset-single-char"> 14393 á» 14394 </div> 14395 <div data-component="char-set__char" class="charset-single-char"> 14396 á» 14397 </div> 14398 <div data-component="char-set__char" class="charset-single-char"> 14399 á» 14400 </div> 14401 <div data-component="char-set__char" class="charset-single-char"> 14402 Æ 14403 </div> 14404 <div data-component="char-set__char" class="charset-single-char"> 14405 á» 14406 </div> 14407 <div data-component="char-set__char" class="charset-single-char"> 14408 Ợ 14409 </div> 14410 <div data-component="char-set__char" class="charset-single-char"> 14411 á» 14412 </div> 14413 <div data-component="char-set__char" class="charset-single-char"> 14414 á» 14415 </div> 14416 <div data-component="char-set__char" class="charset-single-char"> 14417 á» 14418 </div> 14419 <div data-component="char-set__char" class="charset-single-char"> 14420 à 14421 </div> 14422 <div data-component="char-set__char" class="charset-single-char"> 14423 à 14424 </div> 14425 <div data-component="char-set__char" class="charset-single-char"> 14426 Ũ 14427 </div> 14428 <div data-component="char-set__char" class="charset-single-char"> 14429 Ụ 14430 </div> 14431 <div data-component="char-set__char" class="charset-single-char"> 14432 Ủ 14433 </div> 14434 <div data-component="char-set__char" class="charset-single-char"> 14435 Ư 14436 </div> 14437 <div data-component="char-set__char" class="charset-single-char"> 14438 Ứ 14439 </div> 14440 <div data-component="char-set__char" class="charset-single-char"> 14441 á»° 14442 </div> 14443 <div data-component="char-set__char" class="charset-single-char"> 14444 Ừ 14445 </div> 14446 <div data-component="char-set__char" class="charset-single-char"> 14447 Ử 14448 </div> 14449 <div data-component="char-set__char" class="charset-single-char"> 14450 á»® 14451 </div> 14452 <div data-component="char-set__char" class="charset-single-char"> 14453 à 14454 </div> 14455 <div data-component="char-set__char" class="charset-single-char"> 14456 Ỳ 14457 </div> 14458 <div data-component="char-set__char" class="charset-single-char"> 14459 á»´ 14460 </div> 14461 <div data-component="char-set__char" class="charset-single-char"> 14462 á»¶ 14463 </div> 14464 <div data-component="char-set__char" class="charset-single-char"> 14465 Ỹ 14466 </div> 14467 </div> 14468 </div> 14469 </div> 14470 </div> 14471 <!-- End of Charset Section --> 14472 <!-- Start of one single Charset Section --> 14473 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Vietnamese" data-char-set-subset="Lowercase"> 14474 <div class="flex flex-row justify-between"> 14475 <div class="">Lowercase</div> 14476 <div data-component="char-set__subset-size" class=""></div> 14477 </div> 14478 <div> 14479 <div class="character-set-section mt-4"> 14480 <div class="character-set-container text-rg"> 14481 <div data-component="char-set__char" class="charset-single-char"> 14482 á 14483 </div> 14484 <div data-component="char-set__char" class="charset-single-char"> 14485 Ä 14486 </div> 14487 <div data-component="char-set__char" class="charset-single-char"> 14488 â 14489 </div> 14490 <div data-component="char-set__char" class="charset-single-char"> 14491 à 14492 </div> 14493 <div data-component="char-set__char" class="charset-single-char"> 14494 ã 14495 </div> 14496 <div data-component="char-set__char" class="charset-single-char"> 14497 ắ 14498 </div> 14499 <div data-component="char-set__char" class="charset-single-char"> 14500 ặ 14501 </div> 14502 <div data-component="char-set__char" class="charset-single-char"> 14503 ằ 14504 </div> 14505 <div data-component="char-set__char" class="charset-single-char"> 14506 ẳ 14507 </div> 14508 <div data-component="char-set__char" class="charset-single-char"> 14509 ẵ 14510 </div> 14511 <div data-component="char-set__char" class="charset-single-char"> 14512 ấ 14513 </div> 14514 <div data-component="char-set__char" class="charset-single-char"> 14515 Ạ14516 </div> 14517 <div data-component="char-set__char" class="charset-single-char"> 14518 ầ 14519 </div> 14520 <div data-component="char-set__char" class="charset-single-char"> 14521 ẩ 14522 </div> 14523 <div data-component="char-set__char" class="charset-single-char"> 14524 ẫ 14525 </div> 14526 <div data-component="char-set__char" class="charset-single-char"> 14527 ạ 14528 </div> 14529 <div data-component="char-set__char" class="charset-single-char"> 14530 ả 14531 </div> 14532 <div data-component="char-set__char" class="charset-single-char"> 14533 Ä 14534 </div> 14535 <div data-component="char-set__char" class="charset-single-char"> 14536 é 14537 </div> 14538 <div data-component="char-set__char" class="charset-single-char"> 14539 ê 14540 </div> 14541 <div data-component="char-set__char" class="charset-single-char"> 14542 è 14543 </div> 14544 <div data-component="char-set__char" class="charset-single-char"> 14545 ế 14546 </div> 14547 <div data-component="char-set__char" class="charset-single-char"> 14548 á» 14549 </div> 14550 <div data-component="char-set__char" class="charset-single-char"> 14551 á» 14552 </div> 14553 <div data-component="char-set__char" class="charset-single-char"> 14554 á» 14555 </div> 14556 <div data-component="char-set__char" class="charset-single-char"> 14557 á» 14558 </div> 14559 <div data-component="char-set__char" class="charset-single-char"> 14560 ẹ 14561 </div> 14562 <div data-component="char-set__char" class="charset-single-char"> 14563 ẻ 14564 </div> 14565 <div data-component="char-set__char" class="charset-single-char"> 14566 ẽ 14567 </div> 14568 <div data-component="char-set__char" class="charset-single-char"> 14569 à 14570 </div> 14571 <div data-component="char-set__char" class="charset-single-char"> 14572 ì 14573 </div> 14574 <div data-component="char-set__char" class="charset-single-char"> 14575 Ä© 14576 </div> 14577 <div data-component="char-set__char" class="charset-single-char"> 14578 á» 14579 </div> 14580 <div data-component="char-set__char" class="charset-single-char"> 14581 á» 14582 </div> 14583 <div data-component="char-set__char" class="charset-single-char"> 14584 ó 14585 </div> 14586 <div data-component="char-set__char" class="charset-single-char"> 14587 ô 14588 </div> 14589 <div data-component="char-set__char" class="charset-single-char"> 14590 ò 14591 </div> 14592 <div data-component="char-set__char" class="charset-single-char"> 14593 õ 14594 </div> 14595 <div data-component="char-set__char" class="charset-single-char"> 14596 á» 14597 </div> 14598 <div data-component="char-set__char" class="charset-single-char"> 14599 á» 14600 </div> 14601 <div data-component="char-set__char" class="charset-single-char"> 14602 á» 14603 </div> 14604 <div data-component="char-set__char" class="charset-single-char"> 14605 á» 14606 </div> 14607 <div data-component="char-set__char" class="charset-single-char"> 14608 á» 14609 </div> 14610 <div data-component="char-set__char" class="charset-single-char"> 14611 á» 14612 </div> 14613 <div data-component="char-set__char" class="charset-single-char"> 14614 á» 14615 </div> 14616 <div data-component="char-set__char" class="charset-single-char"> 14617 Æ¡ 14618 </div> 14619 <div data-component="char-set__char" class="charset-single-char"> 14620 á» 14621 </div> 14622 <div data-component="char-set__char" class="charset-single-char"> 14623 ợ 14624 </div> 14625 <div data-component="char-set__char" class="charset-single-char"> 14626 á» 14627 </div> 14628 <div data-component="char-set__char" class="charset-single-char"> 14629 á» 14630 </div> 14631 <div data-component="char-set__char" class="charset-single-char"> 14632 ỡ 14633 </div> 14634 <div data-component="char-set__char" class="charset-single-char"> 14635 ú 14636 </div> 14637 <div data-component="char-set__char" class="charset-single-char"> 14638 ù 14639 </div> 14640 <div data-component="char-set__char" class="charset-single-char"> 14641 Å© 14642 </div> 14643 14644 <div data-component="char-set__char" class="charset-single-char"> 14645 ụ 14646 </div> 14647 <div data-component="char-set__char" class="charset-single-char"> 14648 á»§ 14649 </div> 14650 <div data-component="char-set__char" class="charset-single-char"> 14651 ư 14652 </div> 14653 <div data-component="char-set__char" class="charset-single-char"> 14654 ứ 14655 </div> 14656 <div data-component="char-set__char" class="charset-single-char"> 14657 á»± 14658 </div> 14659 <div data-component="char-set__char" class="charset-single-char"> 14660 ừ 14661 </div> 14662 <div data-component="char-set__char" class="charset-single-char"> 14663 á» 14664 </div> 14665 <div data-component="char-set__char" class="charset-single-char"> 14666 ữ 14667 </div> 14668 <div data-component="char-set__char" class="charset-single-char"> 14669 ý 14670 </div> 14671 <div data-component="char-set__char" class="charset-single-char"> 14672 ỳ 14673 </div> 14674 <div data-component="char-set__char" class="charset-single-char"> 14675 ỵ 14676 </div> 14677 <div data-component="char-set__char" class="charset-single-char"> 14678 á»· 14679 </div> 14680 <div data-component="char-set__char" class="charset-single-char"> 14681 ỹ 14682 </div> 14683 </div> 14684 </div> 14685 </div> 14686 </div> 14687 <!-- End of Charset Section --> 14688</div> 14689 14690 <!-- Start of one single Charset Section --> 14691<div class="col-span-5" data-component="show-hide-section__section" data-show-hide-section-name="arabic"> 14692 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Arabic" data-char-set-subset="Arabic"> 14693 <div class="flex flex-row justify-between"> 14694 <div data-component="char-set__subset-size" class=""></div> 14695 <div class="">Arabic</div> 14696 </div> 14697 <div> 14698 <div class="character-set-section mt-4"> 14699 <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override"> 14700 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14701 ا 14702 </div> 14703 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14704 ÙØ§ 14705 </div> 14706 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14707 Ø£ 14708 </div> 14709 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14710 ÙØ£ 14711 </div> 14712 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14713 Ø¥ 14714 </div> 14715 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14716 ÙØ¥ 14717 </div> 14718 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14719 Ø¢ 14720 </div> 14721 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14722 ÙØ¢ 14723 </div> 14724 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14725 Ù± 14726 </div> 14727 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14728 ÙÙ± 14729 </div> 14730 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14731 ب 14732 </div> 14733 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14734 ب٠14735 </div> 14736 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14737 ÙØ¨Ù 14738 </div> 14739 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14740 ÙØ¨ 14741 </div> 14742 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14743 ت 14744 </div> 14745 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14746 ت٠14747 </div> 14748 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14749 ÙØªÙ 14750 </div> 14751 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14752 ÙØª 14753 </div> 14754 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14755 Ø« 14756 </div> 14757 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14758 ث٠14759 </div> 14760 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14761 ÙØ«Ù 14762 </div> 14763 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14764 ÙØ« 14765 </div> 14766 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14767 ج٠14768 </div> 14769 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14770 ÙØ¬Ù 14771 </div> 14772 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14773 ÙØ¬ 14774 </div> 14775 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14776 ج 14777 </div> 14778 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14779 ØÙ 14780 </div> 14781 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14782 ÙØÙ 14783 </div> 14784 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14785 ÙØ 14786 </div> 14787 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14788 Ø 14789 </div> 14790 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14791 خ٠14792 </div> 14793 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14794 ÙØ®Ù 14795 </div> 14796 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14797 ÙØ® 14798 </div> 14799 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14800 Ø® 14801 </div> 14802 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14803 د 14804 </div> 14805 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14806 ÙØ¯ 14807 </div> 14808 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14809 ذ 14810 </div> 14811 <div data-component="char-set__char" class="charset-single-char" lan
14811g="ar"> 14812 ÙØ° 14813 </div> 14814 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14815 ر 14816 </div> 14817 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14818 ÙØ± 14819 </div> 14820 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14821 ز 14822 </div> 14823 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14824 ÙØ² 14825 </div> 14826 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14827 س 14828 </div> 14829 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14830 س٠14831 </div> 14832 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14833 ÙØ³Ù 14834 </div> 14835 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14836 ÙØ³ 14837 </div> 14838 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14839 Ø´ 14840 </div> 14841 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14842 Ø´Ù 14843 </div> 14844 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14845 ÙØ´Ù 14846 </div> 14847 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14848 ÙØ´ 14849 </div> 14850 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14851 ص 14852 </div> 14853 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14854 ص٠14855 </div> 14856 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14857 ÙØµÙ 14858 </div> 14859 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14860 ÙØµ 14861 </div> 14862 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14863 ض 14864 </div> 14865 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14866 ض٠14867 </div> 14868 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14869 ÙØ¶Ù 14870 </div> 14871 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14872 ÙØ¶ 14873 </div> 14874 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14875 Ø· 14876 </div> 14877 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14878 Ø·Ù 14879 </div> 14880 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14881 ÙØ·Ù 14882 </div> 14883 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14884 ÙØ· 14885 </div> 14886 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14887 ظ 14888 </div> 14889 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14890 ظ٠14891 </div> 14892 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14893 ÙØ¸Ù 14894 </div> 14895 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14896 ÙØ¸ 14897 </div> 14898 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14899 ع٠14900 </div> 14901 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14902 ÙØ¹Ù 14903 </div> 14904 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14905 ÙØ¹ 14906 </div> 14907 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14908 ع 14909 </div> 14910 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14911 غ٠14912 </div> 14913 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14914 ÙØºÙ 14915 </div> 14916 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14917 ÙØº 14918 </div> 14919 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14920 غ 14921 </div> 14922 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14923 Ù 14924 </div> 14925 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14926 ÙÙ 14927 </div> 14928 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14929 ÙÙÙ 14930 </div> 14931 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14932 ÙÙÙ 14933 </div> 14934 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14935 ÙÙ 14936 </div> 14937 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14938 Ú¤Ù 14939 </div> 14940 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14941 ÙÚ¤Ù 14942 </div> 14943 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14944 ÙÚ¤ 14945 </div> 14946 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14947 Ú¤ 14948 </div> 14949 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14950 Ù 14951 </div> 14952 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14953 ÙÙ 14954 </div> 14955 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14956 ÙÙÙ 14957 </div> 14958 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14959 ÙÙ 14960 </div> 14961 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14962 Ù 14963 </div> 14964 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14965 ÙÙ 14966 </div> 14967 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14968 ÙÙÙ 14969 </div> 14970 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14971 ÙÙ 14972 </div> 14973 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14974 Ù 14975 </div> 14976 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14977 ÙÙ 14978 </div> 14979 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14980 ÙÙÙ 14981 </div> 14982 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14983 ÙÙ 14984 </div> 14985 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14986 Ù Ù 14987 </div> 14988 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14989 ÙÙ Ù 14990 </div> 14991 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14992 ÙÙ 14993 </div> 14994 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14995 Ù 14996 </div> 14997 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 14998 ÙÙ 14999 </div> 15000 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15001 ÙÙÙÙ 15002 </div> 15003 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15004 ÙÙ 15005 </div> 15006 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15007 Ù 15008 </div> 15009 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15010 Ù 15011 </div> 15012 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15013 ÙÙÙ 15014 </div> 15015 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15016 ÙÙ 15017 </div> 15018 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15019 Û 15020 </div> 15021 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15022 Ø© 15023 </div> 15024 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15025 ÙØ© 15026 </div> 15027 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15028 Ù 15029 </div> 15030 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15031 ÙÙ 15032 </div> 15033 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15034 ؤ 15035 </div> 15036 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15037 ÙØ¤ 15038 </div> 15039 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15040 Ù 15041 </div> 15042 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15043 ÙÙ 15044 </div> 15045 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15046 ÙÙÙ 15047 </div> 15048 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15049 ÙÙ 15050 </div> 15051 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15052 Ù 15053 </div> 15054 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15055 ÙÙ 15056 </div> 15057 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15058 ئ 15059 </div> 15060 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15061 ئ٠15062 </div> 15063 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15064 ÙØ¦Ù 15065 </div> 15066 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15067 ÙØ¦ 15068 </div> 15069 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15070 Ø¡ 15071 </div> 15072 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15073 ÙØ§ 15074 </div> 15075 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15076 ÙØ£ 15077 </div> 15078 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15079 ÙØ¥ 15080 </div> 15081 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15082 ÙØ¢ 15083 </div> 15084 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15085 ÙÙØ§ 15086 </div> 15087 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15088 ÙÙØ£ 15089 </div> 15090 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15091 ÙÙØ¥ 15092 </div> 15093 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15094 ÙÙØ¢ 15095 </div> 15096 </div> 15097 </div> 15098 </div> 15099 </div> 15100 <!-- End of Charset Section --> 15101 <!-- Start of one single Charset Section --> 15102 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Arabic" data-char-set-subset="Farsi Extension"> 15103 <div class="flex flex-row justify-between"> 15104 <div data-component="char-set__subset-size" class=""></div> 15105 <div class="">Farsi Extension</div> 15106 </div> 15107 <div> 15108 <div class="character-set-section mt-4"> 15109 <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override"> 15110 <div data-component="char-set__char" class="charset-single-char" lang="fa"> 15111 Ù¾ 15112 </div> 15113 <div data-component="char-set__char" class="charset-single-char" lang="fa"> 15114 Ù¾Ù 15115 </div> 15116 <div data-component="char-set__char" class="charset-single-char" lang="fa"> 15117 ÙÙ¾Ù 15118 </div> 15119 <div data-component="char-set__char" class="charset-single-char" lang="fa"> 15120 ÙÙ¾ 15121 </div> 15122 <div data-component="char-set__char" class="charset-single-char" lang="fa"> 15123 ÚÙ 15124 </div> 15125 <div data-component="char-set__char" class="charset-single-char" lang="fa"> 15126 ÙÚÙ 15127 </div> 15128 <div data-component="char-set__char" class="charset-single-char" lang="fa"> 15129 ÙÚ 15130 </div> 15131 <div data-component="char-set__char" class="charset-single-char" lang="fa"> 15132 Ú 15133 </div> 15134 <div data-component="char-set__char" class="charset-single-char" lang="fa"> 15135 ÚÙÚ 15136 </div> 15137 <div data-component="char-set__char" class="charset-single-char" lang="fa"> 15138 Ú©Ù 15139 </div> 15140 <div data-component="char-set__char" class="charset-single-char" lang="fa"> 15141 ÙÚ©Ù 15142 </div> 15143 <div data-component="char-set__char" class="charset-single-char" lang="fa"> 15144 ÙÚ© 15145 </div> 15146 <div data-component="char-set__char" class="charset-single-char" lang="fa"> 15147 Ú© 15148 </div> 15149 <div data-component="char-set__char" class="charset-single-char" lang="fa"> 15150 Ú¯Ù 15151 </div> 15152 <div data-component="char-set__char" class="charset-single-char" lang="fa"> 15153 ÙÚ¯Ù 15154 </div> 15155 <div data-component="char-set__char" class="charset-single-char" lang="fa"> 15156 ÙÚ¯ 15157 </div> 15158 <div data-component="char-set__char" class="charset-single-char" lang="fa"> 15159 Ú¯ 15160 </div> 15161 </div> 15162 </div> 15163 </div> 15164 </div> 15165 <!-- End of Charset Section --> 15166 <!-- Start of one single Charset Section --> 15167 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Arabic" data-char-set-subset="Kurdish Extension"> 15168 <div class="flex flex-row justify-between"> 15169 <div data-component="char-set__subset-size" class=""></div> 15170 <div class="">Kurdish Extension</div> 15171 </div> 15172 <div> 15173 <div class="character-set-section mt-4"> 15174 <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override"> 15175 <div data-component="char-set__char" class="charset-single-char" lang="ku"> 15176 ÙÛ 15177 </div> 15178 <div data-component="char-set__char" class="charset-single-char" lang="ku"> 15179 ÙÛ 15180 </div> 15181 <div data-component="char-set__char" class="charset-single-char" lang="ku"> 15182 ÚÙÚÚµÙ 15183 </div> 15184 <div data-component="char-set__char" class="charset-single-char" lang="ku"> 15185 ÙÚµÙ 15186 </div> 15187 <div data-component="char-set__char" class="charset-single-char" lang="ku"> 15188 ÙÚµ 15189 </div> 15190 <div data-component="char-set__char" class="charset-single-char" lang="ku"> 15191 Úµ 15192 </div> 15193 <div data-component="char-set__char" class="charset-single-char" lang="ku"> 15194 ÛÙÛ 15195 </div> 15196 <div data-component="char-set__char" class="charset-single-char" lang="ku"> 15197 ÛÙ 15198 </div> 15199 <div data-component="char-set__char" class="charset-single-char" lang="ku"> 15200 ÙÛÙ 15201 </div> 15202 <div data-component="char-set__char" class="charset-single-char" lang="ku"> 15203 ÙÛ 15204 </div> 15205 <div data-component="char-set__char" class="charset-single-char" lang="ku"> 15206 Û 15207 </div> 15208 </div> 15209 </div> 15210 </div> 15211 </div> 15212 <!-- End of Charset Section --> 15213 15214 <!-- Start of one single Charset Section --> 15215 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Arabic" data-char-set-subset="Urdu Extension"> 15216 <div class="flex flex-row justify-between"> 15217 <div data-component="char-set__subset-size" class=""></div> 15218 <div class="">Urdu Extension</div> 15219 </div> 15220 <div> 15221 <div class="character-set-section mt-4"> 15222 <div class="character-set-contain
15222er text-rg" dir="rtl" style="unicode-bidi: bidi-override"> 15223 <div data-component="char-set__char" class="charset-single-char" lang="ur"> 15224 Ù¹Ù 15225 </div> 15226 <div data-component="char-set__char" class="charset-single-char" lang="ur"> 15227 ÙÙ¹Ù 15228 </div> 15229 <div data-component="char-set__char" class="charset-single-char" lang="ur"> 15230 ÙÙ¹ 15231 </div> 15232 <div data-component="char-set__char" class="charset-single-char" lang="ur"> 15233 ÚÙÚ 15234 </div> 15235 <div data-component="char-set__char" class="charset-single-char" lang="ur"> 15236 Ú 15237 </div> 15238 <div data-component="char-set__char" class="charset-single-char" lang="ur"> 15239 ÙÚ 15240 </div> 15241 <div data-component="char-set__char" class="charset-single-char" lang="ur"> 15242 Úº 15243 </div> 15244 <div data-component="char-set__char" class="charset-single-char" lang="ur"> 15245 ÙÚº 15246 </div> 15247 <div data-component="char-set__char" class="charset-single-char" lang="ur"> 15248 Ú¾ 15249 </div> 15250 <div data-component="char-set__char" class="charset-single-char" lang="ur"> 15251 ÙÙÚ¾Ù 15252 </div> 15253 <div data-component="char-set__char" class="charset-single-char" lang="ur"> 15254 ÙÚ¾ 15255 </div> 15256 <div data-component="char-set__char" class="charset-single-char" lang="ur"> 15257 ÛÙ 15258 </div> 15259 <div data-component="char-set__char" class="charset-single-char" lang="ur"> 15260 ÙÛÙ 15261 </div> 15262 <div data-component="char-set__char" class="charset-single-char" lang="ur"> 15263 ÙÛ 15264 </div> 15265 <div data-component="char-set__char" class="charset-single-char" lang="ur"> 15266 Û 15267 </div> 15268 <div data-component="char-set__char" class="charset-single-char" lang="ur"> 15269 ÙÛ 15270 </div> 15271 <div data-component="char-set__char" class="charset-single-char" lang="ur"> 15272 Û 15273 </div> 15274 <div data-component="char-set__char" class="charset-single-char" lang="ur"> 15275 Û 15276 </div> 15277 </div> 15278 </div> 15279 </div> 15280 </div> 15281 <!-- End of Charset Section --> 15282 15283 <!-- Start of one single Charset Section --> 15284 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Arabic" data-char-set-subset="Figures"> 15285 <div class="flex flex-row justify-between"> 15286 <div data-component="char-set__subset-size" class=""></div> 15287 <div class="">Figures</div> 15288 </div> 15289 <div> 15290 <div class="character-set-section mt-4"> 15291 <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override"> 15292 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15293 Ù 15294 </div> 15295 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15296 Ù¡ 15297 </div> 15298 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15299 Ù¢ 15300 </div> 15301 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15302 Ù£ 15303 </div> 15304 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15305 Ù¤ 15306 </div> 15307 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15308 Û´ 15309 </div> 15310 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15311 Ù¥ 15312 </div> 15313 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15314 Ûµ 15315 </div> 15316 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15317 Ù¦ 15318 </div> 15319 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15320 Û¶ 15321 </div> 15322 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15323 Ù§ 15324 </div> 15325 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15326 Ù¨ 15327 </div> 15328 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15329 Ù© 15330 </div> 15331 </div> 15332 </div> 15333 </div> 15334 </div> 15335 <!-- End of Charset Section --> 15336 <!-- Start of one single Charset Section --> 15337 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Arabic" data-char-set-subset="Required Ligatures"> 15338 <div class="flex flex-row justify-between"> 15339 <div data-component="char-set__subset-size" class=""></div> 15340 <div class="">Required Ligatures</div> 15341 </div> 15342 <div> 15343 <div class="character-set-section mt-4"> 15344 <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override"> 15345 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15346 ÙØ§ 15347 </div> 15348 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15349 ÙÙØ§ 15350 </div> 15351 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15352 ÙØ¢ 15353 </div> 15354 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15355 ÙÙØ¢ 15356 </div> 15357 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15358 ÙØ£ 15359 </div> 15360 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15361 ÙÙØ£ 15362 </div> 15363 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15364 ÙØ¥ 15365 </div> 15366 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15367 ÙÙØ¥ 15368 </div> 15369 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15370 ÙØ§ 15371 </div> 15372 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15373 ÙÙØ§ 15374 </div> 15375 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15376 ÙØ¢ 15377 </div> 15378 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15379 ÙÙØ¢ 15380 </div> 15381 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15382 ÙØ¨Ø± 15383 </div> 15384 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15385 Ùپر 15386 </div> 15387 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15388 ÙØªØ± 15389 </div> 15390 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15391 ÙØ«Ø± 15392 </div> 15393 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15394 Ùٹر 15395 </div> 15396 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15397 ÙÙØ± 15398 </div> 15399 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15400 ÙØ¦Ø± 15401 </div> 15402 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15403 ÙØ¨Ø² 15404 </div> 15405 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15406 Ùپز 15407 </div> 15408 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15409 ÙØªØ² 15410 </div> 15411 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15412 ÙØ«Ø² 15413 </div> 15414 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15415 Ùٹز 15416 </div> 15417 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15418 ÙÙØ² 15419 </div> 15420 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15421 ÙØ¦Ø² 15422 </div> 15423 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15424 ÙØ¨Ù 15425 </div> 15426 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15427 ÙÙ¾Ù 15428 </div> 15429 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15430 ÙØªÙ 15431 </div> 15432 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15433 ÙØ«Ù 15434 </div> 15435 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15436 ÙÙ¹Ù 15437 </div> 15438 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15439 ÙÙÙ 15440 </div> 15441 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15442 ÙØ¦Ù 15443 </div> 15444 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15445 ب٠15446 </div> 15447 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15448 ب٠15449 </div> 15450 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15451 بئ 15452 </div> 15453 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15454 ÙØ¨Ù 15455 </div> 15456 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15457 ÙØ¨Ù 15458 </div> 15459 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15460 ÙØ¨Ø¦ 15461 </div> 15462 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15463 Ù¾Ù 15464 </div> 15465 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15466 Ù¾Ù 15467 </div> 15468 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15469 پئ 15470 </div> 15471 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15472 ÙÙ¾Ù 15473 </div> 15474 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15475 ÙÙ¾Ù 15476 </div> 15477 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15478 Ùپئ 15479 </div> 15480 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15481 ت٠15482 </div> 15483 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15484 تئ 15485 </div> 15486 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15487 ÙØªÙ 15488 </div> 15489 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15490 ÙØªÙ 15491 </div> 15492 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15493 ÙØªØ¦ 15494 </div> 15495 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15496 ت٠15497 </div> 15498 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15499 ث٠15500 </div> 15501 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15502 ثئ 15503 </div> 15504 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15505 ÙØ«Ù 15506 </div> 15507 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15508 ÙØ«Ù 15509 </div> 15510 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15511 ÙØ«Ø¦ 15512 </div> 15513 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15514 Ù¹Ù 15515 </div> 15516 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15517 Ù¹Ù 15518 </div> 15519 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15520 ٹئ 15521 </div> 15522 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15523 ÙÙ¹Ù 15524 </div> 15525 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15526 ÙÙ¹Ù 15527 </div> 15528 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15529 Ùٹئ 15530 </div> 15531 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15532 س٠15533 </div> 15534 15535 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15536 س٠15537 </div> 15538 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15539 سئ 15540 </div> 15541 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15542 ÙØ³Ù 15543 </div> 15544 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15545 ÙØ³Ù 15546 </div> 15547 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15548 ÙØ³Ø¦ 15549 </div> 15550 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15551 Ø´Ù 15552 </div> 15553 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15554 Ø´Ù 15555 </div> 15556 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15557 شئ 15558 </div> 15559 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15560 ÙØ´Ù 15561 </div> 15562 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15563 ÙØ´Ù 15564 </div> 15565 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15566 ÙØ´Ø¦ 15567 </div> 15568 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15569 ص٠15570 </div> 15571 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15572 ص٠15573 </div> 15574 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15575 صئ 15576 </div> 15577 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15578 ÙØµÙ 15579 </div> 15580 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15581 ÙØµÙ 15582 </div> 15583 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15584 ÙØµØ¦ 15585 </div> 15586 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15587 ض٠15588 </div> 15589 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15590 ض٠15591 </div> 15592 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15593 ضئ 15594 </div> 15595 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15596 ÙØ¶Ù 15597 </div> 15598 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15599 ÙØ¶Ù 15600 </div> 15601 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15602 ÙØ¶Ø¦ 15603 </div> 15604 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15605 ÙÙ 15606 </div> 15607 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15608 ÙÙ 15609 </div> 15610 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15611 ÙØ¦ 15612 </div> 15613 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15614 Ú¯Ù 15615 </div> 15616 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15617 Ú¯Ù 15618 </div> 15619 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15620 گئ 15621 </div> 15622 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15623 ÙÙ 15624 </div> 15625 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15626 ÙÙ 15627 </div> 15628 <div data-component="char-set__char" class="charset-single-char" lang="ar">
15628 15629 ÙØ¦ 15630 </div> 15631 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15632 ÙÙÙÙ 15633 </div> 15634 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15635 ÙØ¦ 15636 </div> 15637 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15638 Ú¤Ù 15639 </div> 15640 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15641 Ú¤Ù 15642 </div> 15643 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15644 ڤئ 15645 </div> 15646 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15647 ÙÙÙÙ 15648 </div> 15649 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15650 ÙØ¦ 15651 </div> 15652 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15653 اÙÙÙ 15654 </div> 15655 </div> 15656 </div> 15657 </div> 15658 </div> 15659 <!-- End of Charset Section --> 15660 <!-- Start of one single Charset Section --> 15661 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Arabic" data-char-set-subset="Discretionary Ligatures"> 15662 <div class="flex flex-row justify-between"> 15663 <div data-component="char-set__subset-size" class=""></div> 15664 <div class="">Discretionary Ligatures</div> 15665 </div> 15666 <div> 15667 <div class="character-set-section mt-4"> 15668 <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override"> 15669 <div data-component="char-set__char" class="charset-single-char ot-dlig"> 15670 ÙÙ 15671 </div> 15672 </div> 15673 </div> 15674 </div> 15675 </div> 15676 <!-- End of Charset Section --> 15677 15678 <!-- Start of one single Charset Section --> 15679 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Arabic" data-char-set-subset="Vocalization Marks"> 15680 <div class="flex flex-row justify-between"> 15681 <div data-component="char-set__subset-size" class=""></div> 15682 <div class="">Vocalization Marks</div> 15683 </div> 15684 <div> 15685 <div class="character-set-section mt-4"> 15686 <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override"> 15687 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15688 Ù 15689 </div> 15690 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15691 Ù 15692 </div> 15693 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15694 Ù 15695 </div> 15696 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15697 Ù 15698 </div> 15699 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15700 Ù 15701 </div> 15702 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15703 Ù 15704 </div> 15705 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15706 Ù 15707 </div> 15708 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15709 ÙÙ 15710 </div> 15711 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15712 ÙÙ 15713 </div> 15714 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15715 ÙÙ 15716 </div> 15717 </div> 15718 </div> 15719 </div> 15720 </div> 15721 <!-- End of Charset Section --> 15722 15723 <!-- Start of one single Charset Section --> 15724 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Arabic" data-char-set-subset="Punctuation"> 15725 <div class="flex flex-row justify-between"> 15726 <div data-component="char-set__subset-size" class=""></div> 15727 <div class="">Punctuation</div> 15728 </div> 15729 <div> 15730 <div class="character-set-section mt-4"> 15731 <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override"> 15732 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15733 Û 15734 </div> 15735 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15736 Ø 15737 </div> 15738 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15739 Ø 15740 </div> 15741 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15742 Ø 15743 </div> 15744 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15745 Ù 15746 </div> 15747 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15748 ï´¿ 15749 </div> 15750 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15751 ï´¾ 15752 </div> 15753 <div data-component="char-set__char" class="charset-single-char" lang="ar"> 15754 ï·¼ 15755 </div> 15756 </div> 15757 </div> 15758 </div> 15759 </div> 15760 <!-- End of Charset Section --> 15761</div> 15762 15763 <!-- Start of one single Charset Section --> 15764<div class="col-span-5" data-component="show-hide-section__section" data-show-hide-section-name="devanagari"> 15765 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Devanagari" data-char-set-subset="Independent Vowels"> 15766 <div class="flex flex-row justify-between"> 15767 <div class="">Independent Vowels</div> 15768 <div data-component="char-set__subset-size" class=""></div> 15769 </div> 15770 <div> 15771 <div class="character-set-section mt-4"> 15772 <div class="character-set-container text-rg"> 15773 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15774 ठ15775 </div> 15776 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15777 ठ15778 </div> 15779 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15780 ठ15781 </div> 15782 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15783 ठ15784 </div> 15785 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15786 ठ15787 </div> 15788 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15789 ठ15790 </div> 15791 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15792 ठ15793 </div> 15794 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15795 ठ15796 </div> 15797 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15798 ठ15799 </div> 15800 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15801 ठ15802 </div> 15803 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15804 ठ15805 </div> 15806 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15807 ठ15808 </div> 15809 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15810 ॲ 15811 </div> 15812 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15813 ठ15814 </div> 15815 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15816 ठ15817 </div> 15818 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15819 ठ15820 </div> 15821 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15822 ठ15823 </div> 15824 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15825 ठ15826 </div> 15827 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15828 ॶ 15829 </div> 15830 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15831 ॷ 15832 </div> 15833 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15834 ॳ 15835 </div> 15836 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15837 ॴ 15838 </div> 15839 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15840 ॵ 15841 </div> 15842 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15843 ॡ 15844 </div> 15845 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15846 ॡ 15847 </div> 15848 </div> 15849 </div> 15850 </div> 15851 </div> 15852 <!-- End of Charset Section --> 15853 <!-- Start of one single Charset Section --> 15854 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Devanagari" data-char-set-subset="Consonants"> 15855 <div class="flex flex-row justify-between"> 15856 <div class="">Consonants</div> 15857 <div data-component="char-set__subset-size" class=""></div> 15858 </div> 15859 <div> 15860 <div class="character-set-section mt-4"> 15861 <div class="character-set-container text-rg"> 15862 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15863 ठ15864 </div> 15865 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15866 ठ15867 </div> 15868 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15869 ठ15870 </div> 15871 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15872 ठ15873 </div> 15874 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15875 ठ15876 </div> 15877 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15878 ठ15879 </div> 15880 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15881 ठ15882 </div> 15883 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15884 ठ15885 </div> 15886 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15887 ठ15888 </div> 15889 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15890 ठ15891 </div> 15892 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15893 ठ15894 </div> 15895 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15896 ठ15897 </div> 15898 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15899 ड 15900 </div> 15901 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15902 ढ 15903 </div> 15904 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15905 ण 15906 </div> 15907 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15908 त 15909 </div> 15910 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15911 थ 15912 </div> 15913 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15914 द 15915 </div> 15916 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15917 ध 15918 </div> 15919 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15920 न 15921 </div> 15922 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15923 प 15924 </div> 15925 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15926 फ 15927 </div> 15928 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15929 ब 15930 </div> 15931 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15932 ठ15933 </div> 15934 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15935 म 15936 </div> 15937 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15938 य 15939 </div> 15940 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15941 र 15942 </div> 15943 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15944 लव 15945 </div> 15946 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15947 श 15948 </div> 15949 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15950 ष 15951 </div> 15952 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15953 स 15954 </div> 15955 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15956 ह 15957 </div> 15958 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15959 ळ 15960 </div> 15961 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15962 ॻ 15963 </div> 15964 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15965 ॼ 15966 </div> 15967 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15968 ॾ 15969 </div> 15970 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15971 ॿ 15972 </div> 15973 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15974 ॹ 15975 </div> 15976 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15977 ॺ 15978 </div> 15979 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15980 ॸ 15981 </div> 15982 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15983 à¤à¤¼ 15984 </div> 15985 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15986 à¤à¤¼ 15987 </div> 15988 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15989 à¤à¤¼ 15990 </div> 15991 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15992 à¤à¤¼ 15993 </div> 15994 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15995 ड़ 15996 </div> 15997 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 15998 ढ़ 15999 </div> 16000 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16001 ऩ 16002 </div> 16003 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16004 फ़ 16005 </div> 16006 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16007 य़ 16008 </div> 16009 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16010 ऱ 16011 </div> 16012 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16013 ऴ 16014 </div> 16015 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 16016 ल 16017 </div> 16018 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 16019 श 16020 </div> 16021 </div> 16022 </div> 16023 </div> 16024 </div> 16025 <!-- End of Charset Section --> 16026 <!-- Start of one single Charset Section --> 16027 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Devanagari" data-char-set-subset="Numerals"> 16028 <div class="flex flex-row justify-between"> 16029 <div class="">Numbers, Symbols, Punctuation</div> 16030 <div data-component="char-set__subset-size" class=""></div> 16031 </div> 16032 <div> 16033 <div class="character-set-section mt-4"> 16034 <div class="character-set-container text-rg"> 16035 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16036 ० 16037 </div> 16038 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16039 १ 16040 </div> 16041 <div data-component="char-set__char" class="charset-si
16041ngle-char" lang="hi"> 16042 २ 16043 </div> 16044 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16045 ३ 16046 </div> 16047 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16048 ४ 16049 </div> 16050 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16051 ५ 16052 </div> 16053 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16054 ६ 16055 </div> 16056 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16057 ॠ16058 </div> 16059 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16060 ८ 16061 </div> 16062 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16063 ९ 16064 </div> 16065 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16066 ॠ16067 </div> 16068 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16069 ऽ 16070 </div> 16071 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16072 । 16073 </div> 16074 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16075 ॥ 16076 </div> 16077 </div> 16078 </div> 16079 </div> 16080 </div> 16081 <!-- End of Charset Section --> 16082 <!-- Start of one single Charset Section --> 16083 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Devanagari" data-char-set-subset="Dependent Vowel Signs"> 16084 <div class="flex flex-row justify-between"> 16085 <div class="">Dependent Vowel Signs</div> 16086 <div data-component="char-set__subset-size" class=""></div> 16087 </div> 16088 <div> 16089 <div class="character-set-section mt-4"> 16090 <div class="character-set-container text-rg"> 16091 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16092 âा 16093 </div> 16094 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16095 िâ 16096 </div> 16097 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16098 âॠ16099 </div> 16100 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16101 âॠ16102 </div> 16103 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16104 âॠ16105 </div> 16106 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16107 âॠ16108 </div> 16109 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16110 âॢ 16111 </div> 16112 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16113 âॠ16114 </div> 16115 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16116 âॠ16117 </div> 16118 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16119 âॠ16120 </div> 16121 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16122 âॠ16123 </div> 16124 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16125 âॠ16126 </div> 16127 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16128 âॠ16129 </div> 16130 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16131 âॠ16132 </div> 16133 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16134 âॣ 16135 </div> 16136 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16137 âॠ16138 </div> 16139 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16140 âॠ16141 </div> 16142 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16143 âॠ16144 </div> 16145 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16146 âॠ16147 </div> 16148 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16149 âऺ 16150 </div> 16151 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16152 âऻ 16153 </div> 16154 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16155 âॠ16156 </div> 16157 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16158 ॠ16159 </div> 16160 </div> 16161 </div> 16162 </div> 16163 </div> 16164 <!-- End of Charset Section --> 16165 <!-- Start of one single Charset Section --> 16166 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Devanagari" data-char-set-subset="Modifiers"> 16167 <div class="flex flex-row justify-between"> 16168 <div class="">Modifiers</div> 16169 <div data-component="char-set__subset-size" class=""></div> 16170 </div> 16171 <div> 16172 <div class="character-set-section mt-4"> 16173 <div class="character-set-container text-rg"> 16174 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16175 âठ16176 </div> 16177 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16178 âठ16179 </div> 16180 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16181 âठ16182 </div> 16183 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16184 âॠ16185 </div> 16186 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16187 â़ 16188 </div> 16189 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16190 âà¥à¤° 16191 </div> 16192 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16193 रà¥ââ 16194 </div> 16195 </div> 16196 </div> 16197 </div> 16198 </div> 16199 <!-- End of Charset Section --> 16200 16201 <!-- Start of one single Charset Section --> 16202 <!-- < 16203 Hiding Rakar for now as we canât show them all I think 16204 div 16205 class="pb-7" 16206 data-component="char-set__set-container" 16207 data-char-set-script="Devanagari" 16208 data-char-set-subset="Rakar Forms" 16209 > 16210 <div class="flex flex-row justify-between"> 16211 <div class="">Rakar Forms</div> 16212 <div data-component="char-set__subset-size" class=""></div> 16213 </div> 16214 <div> 16215 <div class="character-set-section mt-4"> 16216 <div class="character-set-container text-rg"> 16217 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16218 à¤à¥à¤° 16219 </div> 16220 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16221 à¤à¥à¤° 16222 </div> 16223 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16224 à¤à¥à¤° 16225 </div> 16226 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16227 à¤à¥à¤° 16228 </div> 16229 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16230 à¤à¥à¤° 16231 </div> 16232 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16233 à¤à¥à¤° 16234 </div> 16235 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16236 à¤à¥à¤° 16237 </div> 16238 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16239 à¤à¥à¤° 16240 </div> 16241 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16242 à¤à¥à¤° 16243 </div> 16244 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16245 à¤à¥à¤° 16246 </div> 16247 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16248 à¤à¥à¤° 16249 </div> 16250 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16251 ठà¥à¤° 16252 </div> 16253 <div data-component="char-set__char" class="charset-single-char" lang="hi">
16254 डà¥à¤° 16255 </div> 16256 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16257 ढà¥à¤° 16258 </div> 16259 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16260 णà¥à¤° 16261 </div> 16262 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16263 तà¥à¤° 16264 </div> 16265 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16266 थà¥à¤° 16267 </div> 16268 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16269 दà¥à¤° 16270 </div> 16271 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16272 धà¥à¤° 16273 </div> 16274 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16275 नà¥à¤° 16276 </div> 16277 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16278 पà¥à¤° 16279 </div> 16280 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16281 फà¥à¤° 16282 </div> 16283 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16284 बà¥à¤° 16285 </div> 16286 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16287 à¤à¥à¤° 16288 </div> 16289 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16290 मà¥à¤° 16291 </div> 16292 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16293 यà¥à¤° 16294 </div> 16295 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16296 लà¥à¤° 16297 </div> 16298 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16299 वà¥à¤° 16300 </div> 16301 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16302 शà¥à¤° 16303 </div> 16304 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16305 षà¥à¤° 16306 </div> 16307 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16308 सà¥à¤° 16309 </div> 16310 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16311 हà¥à¤° 16312 </div> 16313 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16314 ळà¥à¤° 16315 </div> 16316 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16317 à¥à¥à¤° 16318 </div> 16319 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16320 à¥à¥à¤° 16321 </div> 16322 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16323 à¥à¥à¤° 16324 </div> 16325 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16326 à¥à¥à¤° 16327 </div> 16328 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16329 à¥à¥à¤° 16330 </div> 16331 </div> 16332 </div> 16333 </div> 16334 </div> 16335</div> --> 16336 <!-- End of Charset Section --> 16337 <!-- Start of one single Charset Section --> 16338 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Devanagari" data-char-set-subset="Conjuncts"> 16339 <div class="flex flex-row justify-between"> 16340 <div class="">Conjuncts</div> 16341 <div data-component="char-set__subset-size" class=""></div> 16342 </div> 16343 <div> 16344 <div class="character-set-section mt-4"> 16345 <div class="character-set-container text-rg"> 16346 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16347 à¤à¥à¤ 16348 </div> 16349 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16350 à¤à¥à¤ 16351 </div> 16352 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16353 à¤à¥à¤ 16354 </div> 16355 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16356 à¤à¥à¤ 16357 </div> 16358 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16359 à¤à¥à¤ 16360 </div> 16361 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16362 à¤à¥à¤£ 16363 </div> 16364 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16365 à¤à¥à¤¤ 16366 </div> 16367 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16368 à¤à¥à¤¥ 16369 </div> 16370 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16371 à¤à¥à¤¦ 16372 </div> 16373 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16374 à¤à¥à¤¨ 16375 </div> 16376 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16377 à¤à¥à¤ª 16378 </div> 16379 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16380 à¤à¥à¤« 16381 </div> 16382 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16383 à¤à¥à¤® 16384 </div> 16385 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16386 à¤à¥à¤¯ 16387 </div> 16388 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16389 à¤à¥à¤² 16390 </div> 16391 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16392 à¤à¥ 16393 </div> 16394 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16395 à¤à¥à¤¶ 16396 </div> 16397 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16398 à¤à¥à¤· 16399 </div> 16400 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16401 à¤à¥à¤¸ 16402 </div> 16403 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16404 à¤à¥à¤ 16405 </div> 16406 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16407 à¤à¥à¤¤ 16408 </div> 16409 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16410 à¤à¥à¤¨ 16411 </div> 16412 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16413 à¤à¥à¤® 16414 </div> 16415 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16416 à¤à¥à¤¯ 16417 </div> 16418 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16419 à¤à¥à¤µ 16420 </div> 16421 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16422 à¤à¥à¤¶ 16423 </div> 16424 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16425 à¤à¥à¤ 16426 </div> 16427 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16428 à¤à¥à¤ 16429 </div> 16430 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16431 à¤à¥à¤ 16432 </div> 16433 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16434 à¤à¥à¤£ 16435 </div> 16436 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16437 à¤à¥à¤¦ 16438 </div> 16439 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16440 à¤à¥à¤§ 16441 </div> 16442 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16443 à¤à¥à¤¨ 16444 </div> 16445 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16446 à¤à¥à¤¬ 16447 </div> 16448 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16449 à¤à¥à¤ 16450 </div> 16451 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16452 à¤à¥à¤® 16453 </div> 16454 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16455 à¤à¥à¤¯ 16456 </div> 16457 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16458 à¤à¥à¤² 16459 </div> 16460 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16461 à¤à¥à¤µ 16462 </div> 16463 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16464 à¤à¥à¤¸ 16465 </div> 16466 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16467 à¤à¥à¤¨ 16468 </div> 16469 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16470 à¤à¥à¤® 16471 </div> 16472 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16473 à¤à¥à¤¯ 16474 </div> 16475 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16476 à¤à¥à¤ 16477 </div> 16478 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16479 à¤à¥à¤ 16480 </div> 16481 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16482 à¤à¥à¤¨ 16483 </div> 16484 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16485 à¤à¥à¤® 16486 </div> 16487 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16488 à¤à¥à¤¯ 16489 </div> 16490 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16491 à¤à¥à¤¯ 16492 </div> 16493 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16494 à¤à¥à¤µ 16495 </div> 16496 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16497 à¤à¥à¤ 16498 </div> 16499 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16500 à¤à¥à¤ 16501 </div> 16502 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16503 à¤à¥à¤ 16504 </div> 16505 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16506 à¤à¥à¤ 16507 </div> 16508 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16509 à¤à¥à¤ 16510 </div> 16511 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16512 à¤à¥à¤¡ 16513 </div> 16514 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16515 à¤à¥à¤¤ 16516 </div> 16517 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16518 à¤à¥à¤¦ 16519 </div> 16520 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16521 à¤à¥à¤¨ 16522 </div> 16523 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16524 à¤à¥à¤¬ 16525 </div> 16526 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16527 à¤à¥à¤® 16528 </div> 16529 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16530 à¤à¥à¤¯ 16531 </div> 16532 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16533 à¤à¥à¤µ 16534 </div> 16535 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16536 à¤à¥à¤¨ 16537 </div> 16538 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16539 à¤à¥à¤® 16540 </div> 16541 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16542 à¤à¥à¤¯ 16543 </div> 16544 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16545 à¤à¥à¤ 16546 </div> 16547 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16548 à¤à¥à¤ 16549 </div> 16550 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16551 à¤à¥à¤ 16552 </div> 16553 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16554 à¤à¥à¤¶ 16555 </div> 16556 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16557 à¤à¥à¤ 16558 </div> 16559 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16560 à¤à¥à¤ 16561 </div> 16562 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16563 à¤à¥à¤¯ 16564 </div> 16565 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16566 à¤à¥à¤µ 16567 </div> 16568 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16569 ठà¥à¤ 16570 </div> 16571 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16572 ठà¥à¤¯ 16573 </div> 16574 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16575 ठà¥à¤µ 16576 </div> 16577 <div data-component="char-set__char" class="charset-single-char" lang="hi">
16578 डà¥à¤¡ 16579 </div> 16580 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16581 डà¥à¤¢ 16582 </div> 16583 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16584 डà¥à¤¯ 16585 </div> 16586 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16587 डà¥à¤µ 16588 </div> 16589 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16590 ढà¥à¤¢ 16591 </div> 16592 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16593 ढà¥à¤¯ 16594 </div> 16595 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16596 ढà¥à¤µ 16597 </div> 16598 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16599 णà¥à¤ 16600 </div> 16601 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16602 णà¥à¤ 16603 </div> 16604 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16605 णà¥à¤¡ 16606 </div> 16607 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16608 णà¥à¤¢ 16609 </div> 16610 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16611 णà¥à¤£ 16612 </div> 16613 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16614 णà¥à¤® 16615 </div> 16616 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16617 णà¥à¤¯ 16618 </div> 16619 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16620 णà¥à¤µ 16621 </div> 16622 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16623 तà¥à¤ 16624 </div> 16625 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16626 तà¥à¤ 16627 </div> 16628 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16629 तà¥à¤¤ 16630 </div> 16631 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16632 तà¥à¤¥ 16633 </div> 16634 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16635 तà¥à¤¨ 16636 </div> 16637 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16638 तà¥à¤ª 16639 </div> 16640 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16641 तà¥à¤« 16642 </div> 16643 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16644 तà¥à¤® 16645 </div> 16646 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16647 तà¥à¤¯ 16648 </div> 16649 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16650 तà¥à¤² 16651 </div> 16652 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16653 तà¥à¤µ 16654 </div> 16655 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16656 तà¥à¤¸ 16657 </div> 16658 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16659 थà¥à¤¨ 16660 </div> 16661 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16662 थà¥à¤¯ 16663 </div> 16664 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16665 थà¥à¤µ 16666 </div> 16667 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16668 दà¥à¤ 16669 </div> 16670 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16671 दà¥à¤ 16672 </div> 16673 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16674 दà¥à¤¦ 16675 </div> 16676 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16677 दà¥à¤§ 16678 </div> 16679 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16680 दà¥à¤¨ 16681 </div> 16682 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16683 दà¥à¤¬ 16684 </div> 16685 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16686 दà¥à¤ 16687 </div> 16688 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16689 दà¥à¤® 16690 </div> 16691 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16692 दà¥à¤¯ 16693 </div> 16694 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16695 दà¥à¤µ 16696 </div> 16697 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16698 धà¥à¤¨ 16699 </div> 16700 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16701 धà¥à¤® 16702 </div> 16703 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16704 धà¥à¤¯ 16705 </div> 16706 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16707 धà¥à¤µ 16708 </div> 16709 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16710 नà¥à¤ 16711 </div> 16712 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16713 नà¥à¤ 16714 </div> 16715 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16716 नà¥à¤ 16717 </div> 16718 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16719 नà¥à¤ 16720 </div> 16721 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16722 नà¥à¤¡ 16723 </div> 16724 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16725 नà¥à¤¤ 16726 </div> 16727 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16728 नà¥à¤¥ 16729 </div> 16730 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16731 नà¥à¤¦ 16732 </div> 16733 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16734 नà¥à¤§ 16735 </div> 16736 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16737 नà¥à¤¨ 16738 </div> 16739 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16740 नà¥à¤ª 16741 </div> 16742 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16743 नà¥à¤« 16744 </div> 16745 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16746 नà¥à¤ 16747 </div> 16748 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16749 नà¥à¤® 16750 </div> 16751 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16752 नà¥à¤¯ 16753 </div> 16754 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16755 नà¥à¤µ 16756 </div> 16757 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16758 नà¥à¤¸ 16759 </div> 16760 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16761 नà¥à¤¹ 16762 </div> 16763 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16764 पà¥à¤ 16765 </div> 16766 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16767 पà¥à¤ 16768 </div> 16769 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16770 पà¥à¤¤ 16771 </div> 16772 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16773 पà¥à¤¨ 16774 </div> 16775 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16776 पà¥à¤ª 16777 </div> 16778 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16779 पà¥à¤« 16780 </div> 16781 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16782 पà¥à¤® 16783 </div> 16784 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16785 पà¥à¤¯ 16786 </div> 16787 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16788 पà¥à¤² 16789 </div> 16790 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16791 पà¥à¤µ 16792 </div> 16793 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16794 पà¥à¤¸ 16795 </div> 16796 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16797 फà¥à¤ 16798 </div> 16799 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16800 फà¥à¤ 16801 </div> 16802 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16803 फà¥à¤¤ 16804 </div> 16805 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16806 फà¥à¤¨ 16807 </div> 16808 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16809 फà¥à¤« 16810 </div> 16811 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16812 फà¥à¤¯ 16813 </div> 16814 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16815 फà¥à¤² 16816 </div> 16817 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16818 फà¥à¤¶ 16819 </div> 16820 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16821 बà¥à¤ 16822 </div> 16823 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16824 बà¥à¤à¤¼ 16825 </div> 16826 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16827 बà¥à¤ 16828 </div> 16829 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16830 बà¥à¤¤ 16831 </div> 16832 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16833 बà¥à¤¦ 16834 </div> 16835 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16836 बà¥à¤§ 16837 </div> 16838 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16839 बà¥à¤¨ 16840 </div> 16841 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16842 बà¥à¤¬ 16843 </div> 16844 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16845 बà¥à¤ 16846 </div> 16847 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16848 बà¥à¤¯ 16849 </div> 16850 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16851 बà¥à¤² 16852 </div> 16853 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16854 बà¥à¤µ 16855 </div> 16856 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16857 बà¥à¤¶ 16858 </div> 16859 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16860 बà¥à¤¸ 16861 </div> 16862 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16863 à¤à¥à¤¨ 16864 </div> 16865 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16866 à¤à¥à¤¯ 16867 </div> 16868 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16869 à¤à¥à¤² 16870 </div> 16871 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16872 à¤à¥à¤µ 16873 </div> 16874 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16875 मà¥à¤¤ 16876 </div> 16877 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16878 मà¥à¤¦ 16879 </div> 16880 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16881 मà¥à¤¨ 16882 </div> 16883 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16884 मà¥à¤ª 16885 </div> 16886 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16887 मà¥à¤¬ 16888 </div> 16889 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16890 मà¥à¤ 16891 </div> 16892 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16893 मà¥à¤® 16894 </div> 16895 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16896 मà¥à¤¯ 16897 </div> 16898 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16899 मà¥à¤² 16900 </div> 16901 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16902 मà¥à¤µ 16903 </div> 16904 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16905 मà¥à¤¶ 16906 </div> 16907 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16908 मà¥à¤¸ 16909 </div> 16910 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16911 मà¥à¤¹ 16912 </div> 16913 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16914 यà¥à¤¨ 16915 </div> 16916 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16917 यà¥à¤¯ 16918 </div> 16919 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16920 ऱà¥à¤¯ 16921 </div> 16922 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16923 ऱà¥à¤¹ 16924 </div> 16925 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16926 लà¥à¤ 16927 </div> 16928 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16929 लà¥à¤ 16930 </div> 16931 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16932 लà¥à¤ 16933 </div> 16934 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16935 लà¥à¤ 16936 </div> 16937 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16938 लà¥à¤ 16939 </div> 16940 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16941 लà¥à¤ 16942 </div> 16943 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16944 लà¥à¤¡ 16945 </div> 16946 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16947 लà¥à¤¢ 16948 </div> 16949 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16950 लà¥à¤¤ 16951 </div> 16952 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16953 लà¥à¤¥ 16954 </div> 16955 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16956 लà¥à¤¦ 16957 </div> 16958 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16959 लà¥à¤ª 16960 </div> 16961 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16962 लà¥à¤« 16963 </div> 16964 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16965 लà¥à¤¬ 16966 </div> 16967 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16968 लà¥à¤ 16969 </div> 16970 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16971
16971 लà¥à¤® 16972 </div> 16973 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16974 लà¥à¤¯ 16975 </div> 16976 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16977 लà¥à¤² 16978 </div> 16979 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16980 लà¥à¤µ 16981 </div> 16982 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16983 लà¥à¤¸ 16984 </div> 16985 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16986 लà¥à¤¹ 16987 </div> 16988 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16989 वà¥à¤¨ 16990 </div> 16991 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16992 वà¥à¤¯ 16993 </div> 16994 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16995 वà¥à¤² 16996 </div> 16997 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 16998 वà¥à¤µ 16999 </div> 17000 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17001 वà¥à¤¹ 17002 </div> 17003 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17004 शà¥à¤ 17005 </div> 17006 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17007 शà¥à¤ 17008 </div> 17009 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17010 शà¥à¤ 17011 </div> 17012 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17013 शà¥à¤¤ 17014 </div> 17015 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17016 शà¥à¤¨ 17017 </div> 17018 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17019 शà¥à¤® 17020 </div> 17021 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17022 शà¥à¤¯ 17023 </div> 17024 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17025 शà¥à¤² 17026 </div> 17027 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17028 शà¥à¤µ 17029 </div> 17030 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17031 शà¥à¤¶ 17032 </div> 17033 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17034 षà¥à¤ 17035 </div> 17036 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17037 षà¥à¤ 17038 </div> 17039 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17040 षà¥à¤ 17041 </div> 17042 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17043 षà¥à¤£ 17044 </div> 17045 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17046 षà¥à¤ª 17047 </div> 17048 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17049 षà¥à¤« 17050 </div> 17051 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17052 षà¥à¤® 17053 </div> 17054 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17055 षà¥à¤¯ 17056 </div> 17057 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17058 षà¥à¤µ 17059 </div> 17060 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17061 षà¥à¤· 17062 </div> 17063 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17064 सà¥à¤ 17065 </div> 17066 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17067 सà¥à¤ 17068 </div> 17069 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17070 सà¥à¤ 17071 </div> 17072 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17073 सà¥à¤ 17074 </div> 17075 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17076 सà¥à¤¤ 17077 </div> 17078 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17079 सà¥à¤¥ 17080 </div> 17081 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17082 सà¥à¤¦ 17083 </div> 17084 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17085 सà¥à¤¨ 17086 </div> 17087 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17088 सà¥à¤ª 17089 </div> 17090 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17091 सà¥à¤« 17092 </div> 17093 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17094 सà¥à¤¬ 17095 </div> 17096 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17097 सà¥à¤® 17098 </div> 17099 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17100 सà¥à¤¯ 17101 </div> 17102 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17103 सà¥à¤² 17104 </div> 17105 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17106 सà¥à¤µ 17107 </div> 17108 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17109 सà¥à¤¸ 17110 </div> 17111 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17112 हà¥à¤£ 17113 </div> 17114 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17115 हà¥à¤¨ 17116 </div> 17117 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17118 हà¥à¤® 17119 </div> 17120 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17121 हà¥à¤¯ 17122 </div> 17123 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17124 हà¥à¤² 17125 </div> 17126 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17127 हà¥à¤µ 17128 </div> 17129 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17130 ळà¥à¤¯ 17131 </div> 17132 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17133 à¤à¥à¤¤à¥à¤¯ 17134 </div> 17135 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17136 à¤à¥à¤¤à¥à¤° 17137 </div> 17138 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17139 à¤à¥à¤¤à¥à¤µ 17140 </div> 17141 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17142 à¤à¥à¤ªà¥à¤° 17143 </div> 17144 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17145 à¤à¥à¤µà¥à¤¯ 17146 </div> 17147 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17148 à¤à¥à¤·à¥à¤® 17149 </div> 17150 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17151 à¤à¥à¤·à¥à¤¯ 17152 </div> 17153 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17154 à¤à¥à¤·à¥à¤µ 17155 </div> 17156 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17157 à¤à¥à¤¸à¥à¤ 17158 </div> 17159 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17160 à¤à¥à¤¸à¥à¤¡ 17161 </div> 17162 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17163 à¤à¥à¤¸à¥à¤¤ 17164 </div> 17165 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17166 à¤à¥à¤§à¥à¤¯ 17167 </div> 17168 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17169 à¤à¥à¤§à¥à¤µ 17170 </div> 17171 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17172 à¤à¥à¤¨à¥à¤¯ 17173 </div> 17174 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17175 à¤à¥à¤à¥à¤¯ 17176 </div> 17177 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17178 à¤à¥à¤°à¥à¤¯ 17179 </div> 17180 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17181 à¤à¥à¤à¥à¤µ 17182 </div> 17183 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17184 à¤à¥à¤°à¥à¤¯ 17185 </div> 17186 <div data-component="char-set__char" class="charset-single-char" lang="hi">
17187 à¤à¥à¤à¥à¤ 17188 </div> 17189 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17190 à¤à¥à¤à¥à¤¯ 17191 </div> 17192 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17193 à¤à¥à¤à¥à¤µ 17194 </div> 17195 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17196 à¤à¥à¤à¥à¤¯ 17197 </div> 17198 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17199 तà¥à¤à¥à¤¯ 17200 </div> 17201 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17202 तà¥à¤à¥à¤° 17203 </div> 17204 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17205 तà¥à¤à¥à¤µ 17206 </div> 17207 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17208 तà¥à¤à¥à¤· 17209 </div> 17210 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17211 तà¥à¤à¥à¤° 17212 </div> 17213 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17214 तà¥à¤¤à¥à¤¯ 17215 </div> 17216 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17217 तà¥à¤¤à¥à¤µ 17218 </div> 17219 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17220 तà¥à¤¨à¥à¤¯ 17221 </div> 17222 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17223 तà¥à¤ªà¥à¤° 17224 </div> 17225 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17226 तà¥à¤ªà¥à¤² 17227 </div> 17228 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17229 तà¥à¤®à¥à¤¯ 17230 </div> 17231 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17232 तà¥à¤°à¥à¤¯ 17233 </div> 17234 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17235 तà¥à¤¸à¥à¤¨ 17236 </div> 17237 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17238 तà¥à¤¸à¥à¤¯ 17239 </div> 17240 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17241 तà¥à¤¸à¥à¤µ 17242 </div> 17243 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17244 दà¥à¤à¥à¤° 17245 </div> 17246 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17247 दà¥à¤¦à¥à¤¯ 17248 </div> 17249 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17250 दà¥à¤§à¥à¤¯ 17251 </div> 17252 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17253 दà¥à¤¬à¥à¤° 17254 </div> 17255 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17256 धà¥à¤¨à¥à¤¯ 17257 </div> 17258 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17259 नà¥à¤à¥à¤¸ 17260 </div> 17261 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17262 नà¥à¤¤à¥à¤¯ 17263 </div> 17264 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17265 नà¥à¤¤à¥à¤° 17266 </div> 17267 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17268 नà¥à¤¤à¥à¤¸ 17269 </div> 17270 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17271 नà¥à¤¥à¥à¤¯ 17272 </div> 17273 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17274 नà¥à¤¥à¥à¤µ 17275 </div> 17276 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17277 नà¥à¤¦à¥à¤° 17278 </div> 17279 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17280 नà¥à¤¦à¥à¤µ 17281 </div> 17282 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17283 नà¥à¤§à¥à¤¯ 17284 </div> 17285 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17286 नà¥à¤§à¥à¤° 17287 </div> 17288 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17289 नà¥à¤§à¥à¤µ 17290 </div> 17291 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17292 नà¥à¤¨à¥à¤¯ 17293 </div> 17294 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17295 नà¥à¤ªà¥à¤° 17296 </div> 17297 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17298 नà¥à¤«à¥à¤° 17299 </div> 17300 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17301 नà¥à¤à¥à¤¯ 17302 </div> 17303 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17304 नà¥à¤à¥à¤µ 17305 </div> 17306 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17307 नà¥à¤®à¥à¤¯ 17308 </div> 17309 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17310 नà¥à¤¸à¥à¤ 17311 </div> 17312 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17313 नà¥à¤¸à¥à¤¯ 17314 </div> 17315 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17316 पà¥à¤¤à¥à¤¯ 17317 </div> 17318 <div data-component="char-set__char" class="charset-single-char" lang="hi">
17319 बà¥à¤à¥à¤¯ 17320 </div> 17321 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17322 बà¥à¤§à¥à¤µ 17323 </div> 17324 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17325 बà¥à¤à¥à¤° 17326 </div> 17327 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17328 बà¥à¤²à¥à¤¯ 17329 </div> 17330 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17331 à¤à¥à¤°à¥à¤¯ 17332 </div> 17333 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17334 मà¥à¤ªà¥à¤² 17335 </div> 17336 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17337 मà¥à¤ªà¥à¤° 17338 </div> 17339 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17340 मà¥à¤¬à¥à¤¯ 17341 </div> 17342 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17343 मà¥à¤¬à¥à¤° 17344 </div> 17345 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17346 मà¥à¤à¥à¤¯ 17347 </div> 17348 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17349 मà¥à¤à¥à¤° 17350 </div> 17351 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17352 मà¥à¤à¥à¤µ 17353 </div> 17354 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17355 लà¥à¤à¥à¤¯ 17356 </div> 17357 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17358 लà¥à¤¥à¥à¤¯ 17359 </div> 17360 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17361 लà¥à¤¦à¥à¤° 17362 </div> 17363 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17364 लà¥à¤²à¥à¤¯ 17365 </div> 17366 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17367 लà¥à¤µà¥à¤¡ 17368 </div> 17369 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17370 षà¥à¤à¥à¤° 17371 </div> 17372 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17373 षà¥à¤à¥à¤¯ 17374 </div> 17375 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17376 षà¥à¤à¥à¤° 17377 </div> 17378 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17379 षà¥à¤à¥à¤µ 17380 </div> 17381 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17382 षà¥à¤ à¥à¤¯ 17383 </div> 17384 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17385 षà¥à¤ à¥à¤° 17386 </div> 17387 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17388 षà¥à¤£à¥à¤¯ 17389 </div> 17390 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17391 षà¥à¤ªà¥à¤° 17392 </div> 17393 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17394 षà¥à¤®à¥à¤¯ 17395 </div> 17396 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17397 सà¥à¤à¥à¤° 17398 </div> 17399 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17400 सà¥à¤à¥à¤µ 17401 </div> 17402 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17403 सà¥à¤¤à¥à¤¯ 17404 </div> 17405 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17406 सà¥à¤¤à¥à¤° 17407 </div> 17408 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17409 सà¥à¤¤à¥à¤µ 17410 </div> 17411 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17412 सà¥à¤¥à¥à¤¯ 17413 </div> 17414 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17415 सà¥à¤ªà¥à¤° 17416 </div> 17417 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17418 सà¥à¤®à¥à¤¯ 17419 </div> 17420 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17421 सà¥à¤ª 17422 </div> 17423 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17424 à¤à¥à¤·à¥à¤®à¥à¤¯ 17425 </div> 17426 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17427 à¤à¥à¤¸à¥à¤ªà¥à¤° 17428 </div> 17429 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17430 à¤à¥à¤¸à¥à¤ªà¥à¤² 17431 </div> 17432 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17433 नà¥à¤¸à¥à¤®à¥à¤¯ 17434 </div> 17435 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17436 à¤à¤¼à¥à¤à¤¼ 17437 </div> 17438 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17439 लà¥à¤à¤¼ 17440 </div> 17441 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17442 शà¥à¤à¤¼ 17443 </div> 17444 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17445 à¤à¤¼à¥à¤¤ 17446 </div> 17447 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17448 à¤à¤¼à¥à¤« 17449 </div> 17450 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17451 à¤à¤¼à¥à¤«à¤¼ 17452 </div> 17453 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17454 à¤à¤¼à¥à¤¬ 17455 </div> 17456 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17457 à¤à¤¼à¥à¤® 17458 </div> 17459 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17460 à¤à¤¼à¥à¤¤ 17461 </div> 17462 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17463 à¤à¤¼à¥à¤® 17464 </div> 17465 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17466 à¤à¤¼à¥à¤µ 17467 </div> 17468 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17469 à¤à¤¼à¥à¤¯ 17470 </div> 17471 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17472 à¤à¤¼à¥à¤¶ 17473 </div> 17474 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17475 à¤à¤¼à¥à¤¸ 17476 </div> 17477 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17478 à¤à¤¼à¥à¤à¤¼ 17479 </div> 17480 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17481 à¤à¤¼à¥à¤¯ 17482 </div> 17483 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17484 फ़à¥à¤à¤¼ 17485 </div> 17486 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17487 फ़à¥à¤¤ 17488 </div> 17489 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17490 फ़à¥à¤«à¤¼ 17491 </div> 17492 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17493 फ़à¥à¤¸ 17494 </div> 17495 17496 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17497 à¤à¥à¤² 17498 </div> 17499 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17500 à¤à¥à¤¶ 17501 </div> 17502 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17503 à¤à¥à¤¸à¥à¤ªà¥à¤² 17504 </div> 17505 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17506 à¤à¥à¤¶ 17507 </div> 17508 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17509 à¤à¥à¤² 17510 </div> 17511 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17512 à¤à¥à¤¶ 17513 </div> 17514 <div data-component="char-set__char" class="charset-single-char" lang="mr">
17515 तà¥à¤ªà¥à¤² 17516 </div> 17517 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17518 तà¥à¤² 17519 </div> 17520 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17521 पà¥à¤² 17522 </div> 17523 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17524 फà¥à¤² 17525 </div> 17526 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17527 फà¥à¤¶ 17528 </div> 17529 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17530 बà¥à¤² 17531 </div> 17532 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17533 बà¥à¤¶ 17534 </div> 17535 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17536 à¤à¥à¤² 17537 </div> 17538 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17539 मà¥à¤ªà¥à¤² 17540 </div> 17541 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17542 मà¥à¤² 17543 </div> 17544 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17545 मà¥à¤¶ 17546 </div> 17547 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17548 लà¥à¤² 17549 </div> 17550 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17551 वà¥à¤² 17552 </div> 17553 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17554 शà¥à¤ 17555 </div> 17556 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17557 शà¥à¤ 17558 </div> 17559 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17560 शà¥à¤ 17561 </div> 17562 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17563 शà¥à¤ 17564 </div> 17565 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17566 शà¥à¤¤ 17567 </div> 17568 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17569 शà¥à¤¨ 17570 </div> 17571 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17572 शà¥à¤® 17573 </div> 17574 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17575 शà¥à¤¯ 17576 </div> 17577 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17578 शà¥à¤² 17579 </div> 17580 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17581 शà¥à¤µ 17582 </div> 17583 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17584 शà¥à¤¶ 17585 </div> 17586 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17587 सà¥à¤² 17588 </div> 17589 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17590 सà¥à¤ª 17591 </div> 17592 <div data-component="char-set__char" class="charset-single-char" lang="mr"> 17593 हà¥à¤² 17594 </div> 17595 </div> 17596 </div> 17597 </div> 17598 </div> 17599 <!-- End of Charset Section --> 17600 <!-- Start of one single Charset Section --> 17601 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Devanagari" data-char-set-subset="Ligatures"> 17602 <div class="flex flex-row justify-between"> 17603 <div class="">Ligatures</div> 17604 <div data-component="char-set__subset-size" class=""></div> 17605 </div> 17606 <div> 17607 <div class="character-set-section mt-4"> 17608 <div class="character-set-container text-rg"> 17609 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17610 à¤à¤ 17611 </div> 17612 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17613 à¤à¤ 17614 </div> 17615 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17616 दॠ17617 </div> 17618 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17619 रॠ17620 </div> 17621 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17622 रॠ17623 </div> 17624 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17625 शॠ17626 </div> 17627 <div data-component="char-set__char" class="charset-single-char" lang="hi"> 17628 ह 17629 </div> 17630 </div> 17631 </div> 17632 </div> 17633 </div> 17634 <!-- End of Charset Section --> 17635</div> 17636 17637 <!-- Start of one single Charset Section --> 17638<div class="col-span-5" data-component="show-hide-section__section" data-show-hide-section-name="hebrew"> 17639 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Hebrew" data-char-set-subset="Basic Alphabet"> 17640 <div class="flex flex-row justify-between"> 17641 <div data-component="char-set__subset-size" class=""></div> 17642 <div class="">Basic Alphabet</div> 17643 </div> 17644 <div> 17645 <div class="character-set-section mt-4"> 17646 <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override"> 17647 <div data-component="char-set__char" class="charset-single-char"> 17648 × 17649 </div> 17650 <div data-component="char-set__char" class="charset-single-char"> 17651 × 17652 </div> 17653 <div data-component="char-set__char" class="charset-single-char"> 17654 × 17655 </div> 17656 <div data-component="char-set__char" class="charset-single-char"> 17657 × 17658 </div> 17659 <div data-component="char-set__char" class="charset-single-char"> 17660 × 17661 </div> 17662 <div data-component="char-set__char" class="charset-single-char"> 17663 × 17664 </div> 17665 <div data-component="char-set__char" class="charset-single-char"> 17666 × 17667 </div> 17668 <div data-component="char-set__char" class="charset-single-char"> 17669 × 17670 </div> 17671 <div data-component="char-set__char" class="charset-single-char"> 17672 × 17673 </div> 17674 <div data-component="char-set__char" class="charset-single-char"> 17675 × 17676 </div> 17677 <div data-component="char-set__char" class="charset-single-char"> 17678 × 17679 </div> 17680 <div data-component="char-set__char" class="charset-single-char"> 17681 × 17682 </div> 17683 <div data-component="char-set__char" class="charset-single-char"> 17684 × 17685 </div> 17686 <div data-component="char-set__char" class="charset-single-char"> 17687 × 17688 </div> 17689 <div data-component="char-set__char" class="charset-single-char"> 17690 × 17691 </div> 17692 <div data-component="char-set__char" class="charset-single-char"> 17693 × 17694 </div> 17695 <div data-component="char-set__char" class="charset-single-char"> 17696 × 17697 </div> 17698 <div data-component="char-set__char" class="charset-single-char"> 17699 ס 17700 </div> 17701 <div data-component="char-set__char" class="charset-single-char"> 17702 ×¢ 17703 </div> 17704 <div data-component="char-set__char" class="charset-single-char"> 17705 פ 17706 </div> 17707 <div data-component="char-set__char" class="charset-single-char"> 17708 ×£ 17709 </div> 17710 <div data-component="char-set__char" class="charset-single-char"> 17711 צ 17712 </div> 17713 <div data-component="char-set__char" class="charset-single-char"> 17714 ×¥ 17715 </div> 17716 <div data-component="char-set__char" class="charset-single-char"> 17717 ×§ 17718 </div> 17719 <div data-component="char-set__char" class="charset-single-char"> 17720 ר 17721 </div> 17722 <div data-component="char-set__char" class="charset-single-char"> 17723 ש 17724 </div> 17725 <div data-component="char-set__char" class="charset-single-char"> 17726 ת 17727 </div> 17728 </div> 17729 </div> 17730 </div> 17731 </div> 17732 <!-- End of Charset Section --> 17733 <!-- Start of one single Charset Section --> 17734 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Hebrew" data-char-set-subset="Nikud"> 17735 <div class="flex flex-row justify-between"> 17736 <div data-component="char-set__subset-size" class=""></div> 17737 <div class="">Nikud</div> 17738 </div> 17739 <div> 17740 <div class="character-set-section mt-4"> 17741 <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override"> 17742 <div data-component="char-set__char" class="charset-single-char"> 17743 ×Ö· 17744 </div> 17745 <div data-component="char-set__char" class="charset-single-char"> 17746 ×Ö¸ 17747 </div> 17748 <div data-component="char-set__char" class="charset-single-char"> 17749 ×Ö¼ 17750 </div> 17751 <div data-component="char-set__char" class="charset-single-char"> 17752 ×Ö¼ 17753 </div> 17754 <div data-component="char-set__char" class="charset-single-char"> 17755 ×Ö¼ 17756 </div> 17757 <div data-component="char-set__char" class="charset-single-char"> 17758 ×Ö¼ 17759 </div> 17760 <div data-component="char-set__char" class="charset-single-char"> 17761 ×Ö¼ 17762 </div> 17763 <div data-component="char-set__char" class="charset-single-char"> 17764 ×Ö¹ 17765 </div> 17766 <div data-component="char-set__char" class="charset-single-char"> 17767 ×Ö¼ 17768 </div> 17769 <div data-component="char-set__char" class="charset-single-char"> 17770 ×Ö¼ 17771 </div> 17772 <div data-component="char-set__char" class="charset-single-char"> 17773 ×Ö¼ 17774 </div> 17775 <div data-component="char-set__char" class="charset-single-char"> 17776 ×Ö¼ 17777 </div> 17778 <div data-component="char-set__char" class="charset-single-char"> 17779 ×Ö¼
17780 </div> 17781 <div data-component="char-set__char" class="charset-single-char"> 17782 ×Ö¼ 17783 </div> 17784 <div data-component="char-set__char" class="charset-single-char"> 17785 ×Ö¼ 17786 </div> 17787 <div data-component="char-set__char" class="charset-single-char"> 17788 ×Ö¼ 17789 </div> 17790 <div data-component="char-set__char" class="charset-single-char"> 17791 × Ö¼ 17792 </div> 17793 <div data-component="char-set__char" class="charset-single-char"> 17794 סּ 17795 </div> 17796 <div data-component="char-set__char" class="charset-single-char"> 17797 ×©Ö¼× 17798 </div> 17799 <div data-component="char-set__char" class="charset-single-char"> 17800 ×©Ö¼× 17801 </div> 17802 <div data-component="char-set__char" class="charset-single-char"> 17803 תּ 17804 </div> 17805 <div data-component="char-set__char" class="charset-single-char"> 17806 פּ 17807 </div> 17808 <div data-component="char-set__char" class="charset-single-char"> 17809 ×£Ö¼ 17810 </div> 17811 <div data-component="char-set__char" class="charset-single-char"> 17812 צּ 17813 </div> 17814 <div data-component="char-set__char" class="charset-single-char"> 17815 ×§Ö¼ 17816 </div> 17817 <div data-component="char-set__char" class="charset-single-char"> 17818 רּ 17819 </div> 17820 <div data-component="char-set__char" class="charset-single-char"> 17821 שּ 17822 </div> 17823 <div data-component="char-set__char" class="charset-single-char"> 17824 ×©× 17825 </div> 17826 <div data-component="char-set__char" class="charset-single-char"> 17827 ×©× 17828 </div> 17829 <div data-component="char-set__char" class="charset-single-char"> 17830 ×Ö¿ 17831 </div> 17832 <div data-component="char-set__char" class="charset-single-char"> 17833 ×Ö¿ 17834 </div> 17835 <div data-component="char-set__char" class="charset-single-char"> 17836 פֿ 17837 </div> 17838 </div> 17839 </div> 17840 </div> 17841 </div> 17842 <!-- End of Charset Section --> 17843 <!-- Start of one single Charset Section --> 17844 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Hebrew" data-char-set-subset="Alternative Forms"> 17845 <div class="flex flex-row justify-between"> 17846 <div data-component="char-set__subset-size" class=""></div> 17847 <div class="">Alternative Forms</div> 17848 </div> 17849 <div> 17850 <div class="character-set-section mt-4"> 17851 <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override"> 17852 <div data-component="char-set__char" class="charset-single-char"> 17853 ײ 17854 </div> 17855 <div data-component="char-set__char" class="charset-single-char"> 17856 ×± 17857 </div> 17858 <div data-component="char-set__char" class="charset-single-char"> 17859 ×° 17860 </div> 17861 </div> 17862 </div> 17863 </div> 17864 </div> 17865 <!-- End of Charset Section --> 17866 <!-- Start of one single Charset Section --> 17867 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Hebrew" data-char-set-subset="Punctuation"> 17868 <div class="flex flex-row justify-between"> 17869 <div data-component="char-set__subset-size" class=""></div> 17870 <div class="">Punctuation</div> 17871 </div> 17872 <div> 17873 <div class="character-set-section mt-4"> 17874 <div class="character-set-container text-rg" dir="rtl" style="unicode-bidi: bidi-override"> 17875 <div data-component="char-set__char" class="charset-single-char"> 17876 Ö¾ 17877 </div> 17878 <div data-component="char-set__char" class="charset-single-char"> 17879 ׳ 17880 </div> 17881 <div data-component="char-set__char" class="charset-single-char"> 17882 ×´ 17883 </div> 17884 </div> 17885 </div> 17886 </div> 17887 </div> 17888 <!-- End of Charset Section --> 17889</div> 17890 17891 <!-- Start of one single Charset Section --> 17892<div class="col-span-5" data-component="show-hide-section__section" data-show-hide-section-name="korean"> 17893 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Korean" data-char-set-subset="Jamo"> 17894 <div class="flex flex-row justify-between"> 17895 <div class="">Jamo</div> 17896 <div data-component="char-set__subset-size" class=""></div> 17897 </div> 17898 <div> 17899 <div class="character-set-section mt-4"> 17900 <div class="character-set-container text-rg"> 17901 <div data-component="char-set__char" class="charset-single-char"> 17902 á 17903 </div> 17904 <div data-component="char-set__char" class="charset-single-char"> 17905 á 17906 </div> 17907 <div data-component="char-set__char" class="charset-single-char"> 17908 á 17909 </div> 17910 <div data-component="char-set__char" class="charset-single-char"> 17911 á 17912 </div> 17913 <div data-component="char-set__char" class="charset-single-char"> 17914 á 17915 </div> 17916 <div data-component="char-set__char" class="charset-single-char"> 17917 á 17918 </div> 17919 <div data-component="char-set__char" class="charset-single-char"> 17920 á 17921 </div> 17922 <div data-component="char-set__char" class="charset-single-char"> 17923 á 17924 </div> 17925 <div data-component="char-set__char" class="charset-single-char"> 17926 á 17927 </div> 17928 <div data-component="char-set__char" class="charset-single-char"> 17929 á 17930 </div> 17931 <div data-component="char-set__char" class="charset-single-char"> 17932 á 17933 </div> 17934 <div data-component="char-set__char" class="charset-single-char"> 17935 á 17936 </div> 17937 <div data-component="char-set__char" class="charset-single-char"> 17938 á 17939 </div> 17940 <div data-component="char-set__char" class="charset-single-char"> 17941 á 17942 </div> 17943 <div data-component="char-set__char" class="charset-single-char"> 17944 á ¡ 17945 </div> 17946 <div data-component="char-set__char" class="charset-single-char"> 17947 á £ 17948 </div> 17949 <div data-component="char-set__char" class="charset-single-char"> 17950 á ¥ 17951 </div> 17952 <div data-component="char-set__char" class="charset-single-char"> 17953 á § 17954 </div> 17955 <div data-component="char-set__char" class="charset-single-char"> 17956 á © 17957 </div> 17958 <div data-component="char-set__char" class="charset-single-char"> 17959 á 17960 </div> 17961 <div data-component="char-set__char" class="charset-single-char"> 17962 á ® 17963 </div> 17964 <div data-component="char-set__char" class="charset-single-char"> 17965 á ² 17966 </div> 17967 <div data-component="char-set__char" class="charset-single-char"> 17968 á ³ 17969 </div> 17970 <div data-component="char-set__char" class="charset-single-char"> 17971 á µ 17972 </div> 17973 <div data-component="char-set__char" class="charset-single-char"> 17974 á 17975 </div> 17976 <div data-component="char-set__char" class="charset-single-char"> 17977 ᪠17978 </div> 17979 <div data-component="char-set__char" class="charset-single-char"> 17980 ᬠ17981 </div> 17982 <div data-component="char-set__char" class="charset-single-char"> 17983 á 17984 </div> 17985 <div data-component="char-set__char" class="charset-single-char"> 17986 á 17987 </div> 17988 <div data-component="char-set__char" class="charset-single-char"> 17989 á° 17990 </div> 17991 <div data-component="char-set__char" class="charset-single-char"> 17992 á± 17993 </div> 17994 <div data-component="char-set__char" class="charset-single-char"> 17995 á² 17996 </div> 17997 <div data-component="char-set__char" class="charset-single-char"> 17998 á³ 17999 </div> 18000 <div data-component="char-set__char" class="charset-single-char"> 18001 á´ 18002 </div> 18003 <div data-component="char-set__char" class="charset-single-char"> 18004 áµ 18005 </div> 18006 <div data-component="char-set__char" class="charset-single-char"> 18007 á 18008 </div> 18009 <div data-component="char-set__char" class="charset-single-char"> 18010 á 18011 </div> 18012 <div data-component="char-set__char" class="charset-single-char"> 18013 á¡ 18014 </div> 18015 <div data-component="char-set__char" class="charset-single-char"> 18016 á 18017 </div> 18018 <div data-component="char-set__char" class="charset-single-char"> 18019 á 18020 </div> 18021 <div data-component="char-set__char" class="charset-single-char"> 18022 á ¢ 18023 </div> 18024 <div data-component="char-set__char" class="charset-single-char"> 18025 á ¤ 18026 </div> 18027 <div data-component="char-set__char" class="charset-single-char"> 18028 á ¦ 18029 </div> 18030 <div data-component="char-set__char" class="charset-single-char"> 18031 á ¨ 18032 </div> 18033 <div data-component="char-set__char" class="charset-single-char"> 18034 á ª 18035 </div> 18036 <div data-component="char-set__char" class="charset-single-char"> 18037 á « 18038 </div> 18039 <div data-component="char-set__char" class="charset-single-char"> 18040 á ¬ 18041 </div> 18042 <div data-component="char-set__char" class="charset-single-char"> 18043 á ¯ 18044 </div> 18045 <div data-component="char-set__char" class="charset-single-char"> 18046 á ° 18047 </div> 18048 <div data-component="char-set__char" class="charset-single-char"> 18049 á ± 18050 </div> 18051 <div data-component="char-set__char" class="charset-single-char"> 18052 á ´ 18053 </div> 18054 </div> 18055 </div> 18056 </div> 18057 </div> 18058 <!-- End of Charset Section --> 18059 <!-- Start of one single Charset Section --> 18060 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Korean" data-char-set-subset="Syllabic Blocks"> 18061 <div class="flex flex-row justify-between"> 18062 <div class="">Syllabic Blocks</div> 18063 <!-- <div data-component="char-set__subset-size" class=""></div> --> 18064 <div class="">Showing 380 of 2663</div> 18065 </div> 18066 <div> 18067 <div class="character-set-section mt-4"> 18068 <div class="character-set-container text-rg"> 18069 <div data-component="char-set__char" class="charset-single-char"> 18070 ê° 18071 </div> 18072 <div data-component="char-set__char" class="charset-single-char"> 18073 ê° 18074 </div> 18075 <div data-component="char-set__char" class="charset-single-char"> 18076 ê° 18077 </div> 18078 <div data-component="char-set__char" class="charset-single-char"> 18079 ê° 18080 </div> 18081 <div data-component="char-set__char" class="charset-single-char"> 18082 ê° 18083 </div> 18084 <div data-component="char-set__char" class="charset-single-char"> 18085 ê° 18086 </div> 18087 <div data-component="char-set__char" class="charset-single-char"> 18088 ê° 18089 </div> 18090 <div data-component="char-set__char" class="charset-single-char"> 18091 ê° 18092 </div> 18093 <div data-component="char-set__char" class="charset-single-char"> 18094 ê° 18095 </div> 18096 <div data-component="char-set__char" class="charset-single-char"> 18097 ê° 18098 </div> 18099 <div data-component="char-set__char" class="charset-single-char"> 18100 ê° 18101 </div> 18102 <div data-component="char-set__char" class="charset-single-char"> 18103 ê° 18104 </div> 18105 <div data-component="char-set__char" class="charset-single-char"> 18106 ê° 18107 </div> 18108 <div data-component="char-set__char" class="charset-single-char"> 18109 ê° 18110 </div> 18111 <div data-component="char-set__char" class="charset-single-char"> 18112 ê° 18113 </div> 18114 <div data-component="char-set__char" class="charset-single-char"> 18115 ê° 18116 </div> 18117 <div data-component="char-set__char" class="charset-single-char"> 18118 ê° 18119 </div> 18120 <div data-component="char-set__char" class="charset-single-char"> 18121 ê° 18122 </div> 18123 <div data-component="char-set__char" class="charset-single-char"> 18124 ê° 18125 </div> 18126 <div data-component="char-set__char" class="charset-single-char"> 18127 ê° 18128 </div> 18129 <div data-component="char-set__char" class="charset-single-char"> 18130 ê° 18131 </div> 18132 <div data-component="char-set__char" class="charset-single-char"> 18133 ê° 18134 </div> 18135 <div data-component="char-set__char" class="charset-single-char"> 18136 ê°£ 18137 </div> 18138 <div data-component="char-set__char" class="charset-single-char"> 18139 ê°¤ 18140 </div> 18141 <div data-component="char-set__char" class="charset-single-char"> 18142 ê°¬ 18143 </div> 18144 <div data-component="char-set__char" class="charset-single-char"> 18145 ê° 18146 </div> 18147 <div data-component="char-set__char" class="charset-single-char"> 18148 ê°¯ 18149 </div> 18150 <div data-component="char-set__char" class="charset-single-char"> 18151 ê°° 18152 </div> 18153 <div data-component="char-set__char" class="charset-single-char"> 18154 ê°± 18155 </div> 18156 <div data-component="char-set__char" class="charset-single-char"> 18157 ê°¸ 18158 </div> 18159 <div data-component="char-set__char" class="charset-single-char"> 18160 ê°¹ 18161 </div> 18162 <div data-component="char-set__char" class="charset-single-char"> 18163 ê°¼ 18164 </div> 18165 <div data-component="char-set__char" class="charset-single-char"> 18166 ê± 18167 </div> 18168 <div data-component="char-set__char" class="charset-single-char"> 18169 ê± 18170 </div> 18171 <div data-component="char-set__char" class="charset-single-char"> 18172 ê± 18173 </div> 18174 <div data-component="char-set__char" class="charset-single-char"> 18175 ê± 18176 </div> 18177 <div data-component="char-set__char" class="charset-single-char"> 18178 ê± 18179 </div> 18180 <div data-component="char-set__char" class="charset-single-char"> 18181 ê± 18182 </div> 18183 <div data-component="char-set__char" class="charset-single-char"> 18184 ê±¥ 18185 </div> 18186 <div data-component="char-set__char" class="charset-single-char"> 18187 ê±° 18188 </div> 18189 <div data-component="char-set__char" class="charset-single-char"> 18190 ê±± 18191 </div> 18192 <div data-component="char-set__char" class="charset-single-char"> 18193 ê±´ 18194 </div> 18195 <div data-component="char-set__char" class="charset-single-char"> 18196 ê±· 18197 </div> 18198 <div data-component="char-set__char" class="charset-single-char"> 18199 걸 18200 </div> 18201 <div data-component="char-set__char" class="charset-single-char"> 18202 걺 18203 </div> 18204 <div data-component="char-set__char" class="charset-single-char"> 18205 ê² 18206 </div> 18207 <div data-component="char-set__char" class="charset-single-char"> 18208 ê² 18209 </div> 18210 <div data-component="char-set__char" class="charset-single-char"> 18211 ê² 18212 </div> 18213 <div data-component="char-set__char" class="charset-single-char"> 18214 ê² 18215 </div> 18216 <div data-component="char-set__char" class="charset-single-char"> 18217 ê² 18218 </div> 18219 <div data-component="char-set__char" class="charset-single-char"> 18220 ê² 18221 </div> 18222 <div data-component="char-set__char" class="charset-single-char"> 18223 ê² 18224 </div> 18225 <
18225div data-component="char-set__char" class="charset-single-char"> 18226 ê² 18227 </div> 18228 <div data-component="char-set__char" class="charset-single-char"> 18229 ê² 18230 </div> 18231 18232 <div data-component="char-set__char" class="charset-single-char"> 18233 ê² 18234 </div> 18235 <div data-component="char-set__char" class="charset-single-char"> 18236 ê² 18237 </div> 18238 <div data-component="char-set__char" class="charset-single-char"> 18239 ê² 18240 </div> 18241 <div data-component="char-set__char" class="charset-single-char"> 18242 ê² 18243 </div> 18244 <div data-component="char-set__char" class="charset-single-char"> 18245 ê² 18246 </div> 18247 <div data-component="char-set__char" class="charset-single-char"> 18248 ê² 18249 </div> 18250 <div data-component="char-set__char" class="charset-single-char"> 18251 ê² 18252 </div> 18253 <div data-component="char-set__char" class="charset-single-char"> 18254 ê² 18255 </div> 18256 <div data-component="char-set__char" class="charset-single-char"> 18257 ê² 18258 </div> 18259 <div data-component="char-set__char" class="charset-single-char"> 18260 겡 18261 </div> 18262 <div data-component="char-set__char" class="charset-single-char"> 18263 겨 18264 </div> 18265 <div data-component="char-set__char" class="charset-single-char"> 18266 격 18267 </div> 18268 <div data-component="char-set__char" class="charset-single-char"> 18269 겪 18270 </div> 18271 <div data-component="char-set__char" class="charset-single-char"> 18272 견 18273 </div> 18274 <div data-component="char-set__char" class="charset-single-char"> 18275 겯 18276 </div> 18277 <div data-component="char-set__char" class="charset-single-char"> 18278 ê²° 18279 </div> 18280 <div data-component="char-set__char" class="charset-single-char"> 18281 ê²· 18282 </div> 18283 <div data-component="char-set__char" class="charset-single-char"> 18284 겸 18285 </div> 18286 <div data-component="char-set__char" class="charset-single-char"> 18287 ê²¹ 18288 </div> 18289 <div data-component="char-set__char" class="charset-single-char"> 18290 ê²» 18291 </div> 18292 <div data-component="char-set__char" class="charset-single-char"> 18293 ê²¼ 18294 </div> 18295 <div data-component="char-set__char" class="charset-single-char"> 18296 ê²½ 18297 </div> 18298 <div data-component="char-set__char" class="charset-single-char"> 18299 겿 18300 </div> 18301 <div data-component="char-set__char" class="charset-single-char"> 18302 겿 18303 </div> 18304 <div data-component="char-set__char" class="charset-single-char"> 18305 ê³ 18306 </div> 18307 <div data-component="char-set__char" class="charset-single-char"> 18308 ê³ 18309 </div> 18310 <div data-component="char-set__char" class="charset-single-char"> 18311 ê³ 18312 </div> 18313 <div data-component="char-set__char" class="charset-single-char"> 18314 ê³ 18315 </div> 18316 <div data-component="char-set__char" class="charset-single-char"> 18317 ê³ 18318 </div> 18319 <div data-component="char-set__char" class="charset-single-char"> 18320 ê³ 18321 </div> 18322 <div data-component="char-set__char" class="charset-single-char"> 18323 ê³ 18324 </div> 18325 <div data-component="char-set__char" class="charset-single-char"> 18326 ê³ 18327 </div> 18328 <div data-component="char-set__char" class="charset-single-char"> 18329 곡 18330 </div> 18331 <div data-component="char-set__char" class="charset-single-char"> 18332 곤 18333 </div> 18334 <div data-component="char-set__char" class="charset-single-char"> 18335 ê³§ 18336 </div> 18337 <div data-component="char-set__char" class="charset-single-char"> 18338 골 18339 </div> 18340 <div data-component="char-set__char" class="charset-single-char"> 18341 곪 18342 </div> 18343 <div data-component="char-set__char" class="charset-single-char"> 18344 곬 18345 </div> 18346 <div data-component="char-set__char" class="charset-single-char"> 18347 곯 18348 </div> 18349 <div data-component="char-set__char" class="charset-single-char"> 18350 ê³° 18351 </div> 18352 <div data-component="char-set__char" class="charset-single-char"> 18353 ê³± 18354 </div> 18355 <div data-component="char-set__char" class="charset-single-char"> 18356 ê³³ 18357 </div> 18358 <div data-component="char-set__char" class="charset-single-char"> 18359 ê³µ 18360 </div> 18361 <div data-component="char-set__char" class="charset-single-char"> 18362 ê³¶ 18363 </div> 18364 <div data-component="char-set__char" class="charset-single-char"> 18365 ê³¹ 18366 </div> 18367 <div data-component="char-set__char" class="charset-single-char"> 18368 ê³¼ 18369 </div> 18370 <div data-component="char-set__char" class="charset-single-char"> 18371 ê³½ 18372 </div> 18373 <div data-component="char-set__char" class="charset-single-char"> 18374 ê´ 18375 </div> 18376 <div data-component="char-set__char" class="charset-single-char"> 18377 ê´ 18378 </div> 18379 <div data-component="char-set__char" class="charset-single-char"> 18380 ê´ 18381 </div> 18382 <div data-component="char-set__char" class="charset-single-char"> 18383 ê´ 18384 </div> 18385 <div data-component="char-set__char" class="charset-single-char"> 18386 ê´ 18387 </div> 18388 <div data-component="char-set__char" class="charset-single-char"> 18389 ê´ 18390 </div> 18391 <div data-component="char-set__char" class="charset-single-char"> 18392 ê´ 18393 </div> 18394 <div data-component="char-set__char" class="charset-single-char"> 18395 ê´ 18396 </div> 18397 <div data-component="char-set__char" class="charset-single-char"> 18398 ê´ 18399 </div> 18400 <div data-component="char-set__char" class="charset-single-char"> 18401 ê´ 18402 </div> 18403 <div data-component="char-set__char" class="charset-single-char"> 18404 ê´ 18405 </div> 18406 <div data-component="char-set__char" class="charset-single-char"> 18407 ê´ 18408 </div> 18409 <div data-component="char-set__char" class="charset-single-char"> 18410 ê´¢ 18411 </div> 18412 <div data-component="char-set__char" class="charset-single-char"> 18413 ê´© 18414 </div> 18415 <div data-component="char-set__char" class="charset-single-char"> 18416 ê´¬ 18417 </div> 18418 <div data-component="char-set__char" class="charset-single-char"> 18419 ê´ 18420 </div> 18421 <div data-component="char-set__char" class="charset-single-char"> 18422 ê´´ 18423 </div> 18424 <div data-component="char-set__char" class="charset-single-char"> 18425 ê´µ 18426 </div> 18427 <div data-component="char-set__char" class="charset-single-char"> 18428 ê´¸ 18429 </div> 18430 <div data-component="char-set__char" class="charset-single-char"> 18431 ê´¼ 18432 </div> 18433 <div data-component="char-set__char" class="charset-single-char"> 18434 êµ 18435 </div> 18436 <div data-component="char-set__char" class="charset-single-char"> 18437 êµ 18438 </div> 18439 <div data-component="char-set__char" class="charset-single-char"> 18440 êµ 18441 </div> 18442 <div data-component="char-set__char" class="charset-single-char"> 18443 êµ 18444 </div> 18445 <div data-component="char-set__char" class="charset-single-char"> 18446 êµ 18447 </div> 18448 <div data-component="char-set__char" class="charset-single-char"> 18449 êµ 18450 </div> 18451 <div data-component="char-set__char" class="charset-single-char"> 18452 êµ 18453 </div> 18454 <div data-component="char-set__char" class="charset-single-char"> 18455 êµ 18456 </div> 18457 <div data-component="char-set__char" class="charset-single-char"> 18458 굡 18459 </div> 18460 <div data-component="char-set__char" class="charset-single-char"> 18461 êµ£ 18462 </div> 18463 <div data-component="char-set__char" class="charset-single-char"> 18464 êµ¥ 18465 </div> 18466 <div data-component="char-set__char" class="charset-single-char"> 18467 구 18468 </div> 18469 <div data-component="char-set__char" class="charset-single-char"> 18470 êµ 18471 </div> 18472 <div data-component="char-set__char" class="charset-single-char"> 18473 êµ° 18474 </div> 18475 <div data-component="char-set__char" class="charset-single-char"> 18476 êµ³ 18477 </div> 18478 <div data-component="char-set__char" class="charset-single-char"> 18479 êµ´ 18480 </div> 18481 <div data-component="char-set__char" class="charset-single-char"> 18482 êµµ 18483 </div> 18484 <div data-component="char-set__char" class="charset-single-char"> 18485 êµ¶ 18486 </div> 18487 <div data-component="char-set__char" class="charset-single-char"> 18488 ê° 18489 </div> 18490 <div data-component="char-set__char" class="charset-single-char"> 18491 ê° 18492 </div> 18493 <div data-component="char-set__char" class="charset-single-char"> 18494 ê° 18495 </div> 18496 <div data-component="char-set__char" class="charset-single-char"> 18497 ê° 18498 </div> 18499 <div data-component="char-set__char" class="charset-single-char"> 18500 ê° 18501 </div> 18502 <div data-component="char-set__char" class="charset-single-char"> 18503 ê° 18504 </div> 18505 <div data-component="char-set__char" class="charset-single-char"> 18506 ê° 18507 </div> 18508 <div data-component="char-set__char" class="charset-single-char"> 18509 ê° 18510 </div> 18511 <div data-component="char-set__char" class="charset-single-char"> 18512 ê° 18513 </div> 18514 <div data-component="char-set__char" class="charset-single-char"> 18515 ê° 18516 </div> 18517 <div data-component="char-set__char" class="charset-single-char"> 18518 ê° 18519 </div> 18520 <div data-component="char-set__char" class="charset-single-char"> 18521 ê° 18522 </div> 18523 <div data-component="char-set__char" class="charset-single-char"> 18524 ê° 18525 </div> 18526 <div data-component="char-set__char" class="charset-single-char"> 18527 ê° 18528 </div> 18529 <div data-component="char-set__char" class="charset-single-char"> 18530 ê° 18531 </div> 18532 <div data-component="char-set__char" class="charset-single-char"> 18533 ê° 18534 </div> 18535 <div data-component="char-set__char" class="charset-single-char"> 18536 ê° 18537 </div> 18538 <div data-component="char-set__char" class="charset-single-char"> 18539 ê° 18540 </div> 18541 <div data-component="char-set__char" class="charset-single-char"> 18542 ê° 18543 </div> 18544 <div data-component="char-set__char" class="charset-single-char"> 18545 ê° 18546 </div> 18547 <div data-component="char-set__char" class="charset-single-char"> 18548 ê° 18549 </div> 18550 <div data-component="char-set__char" class="charset-single-char"> 18551 ê° 18552 </div> 18553 <div data-component="char-set__char" class="charset-single-char"> 18554 ê°£ 18555 </div> 18556 <div data-component="char-set__char" class="charset-single-char"> 18557 ê°¤ 18558 </div> 18559 <div data-component="char-set__char" class="charset-single-char"> 18560 ê°¬ 18561 </div> 18562 <div data-component="char-set__char" class="charset-single-char"> 18563 ê° 18564 </div> 18565 <div data-component="char-set__char" class="charset-single-char"> 18566 ê°¯ 18567 </div> 18568 <div data-component="char-set__char" class="charset-single-char"> 18569 ê°° 18570 </div> 18571 <div data-component="char-set__char" class="charset-single-char"> 18572 ê°± 18573 </div> 18574 <div data-component="char-set__char" class="charset-single-char"> 18575 ê°¸ 18576 </div> 18577 <div data-component="char-set__char" class="charset-single-char"> 18578 ê°¹ 18579 </div> 18580 <div data-component="char-set__char" class="charset-single-char"> 18581 ê°¼ 18582 </div> 18583 <div data-component="char-set__char" class="charset-single-char"> 18584 ê± 18585 </div> 18586 <div data-component="char-set__char" class="charset-single-char"> 18587 êµ» 18588 </div> 18589 <div data-component="char-set__char" class="charset-single-char"> 18590 êµ¼ 18591 </div> 18592 <div data-component="char-set__char" class="charset-single-char"> 18593 êµ½ 18594 </div> 18595 <div data-component="char-set__char" class="charset-single-char"> 18596 굿 18597 </div> 18598 <div data-component="char-set__char" class="charset-single-char"> 18599 ê¶ 18600 </div> 18601 <div data-component="char-set__char" class="charset-single-char"> 18602 ê¶ 18603 </div> 18604 <div data-component="char-set__char" class="charset-single-char"> 18605 ê¶ 18606 </div> 18607 <div data-component="char-set__char" class="charset-single-char"> 18608 ê¶ 18609 </div> 18610 <div data-component="char-set__char" class="charset-single-char"> 18611 ê¶ 18612 </div> 18613 <div data-component="char-set__char" class="charset-single-char"> 18614 ê¶ 18615 </div> 18616 <div data-component="char-set__char" class="charset-single-char"> 18617 ê¶ 18618 </div> 18619 <div data-component="char-set__char" class="charset-single-char"> 18620 ê¶ 18621 </div> 18622 <div data-component="char-set__char" class="charset-single-char"> 18623 ê¶ 18624 </div> 18625 <div data-component="char-set__char" class="charset-single-char"> 18626 궤 18627 </div> 18628 <div data-component="char-set__char" class="charset-single-char"> 18629 ê¶· 18630 </div> 18631 <div data-component="char-set__char" class="charset-single-char"> 18632 궸 18633 </div> 18634 <div data-component="char-set__char" class="charset-single-char"> 18635 ê· 18636 </div> 18637 <div data-component="char-set__char" class="charset-single-char"> 18638 ê· 18639 </div> 18640 <div data-component="char-set__char" class="charset-single-char"> 18641 ê· 18642 </div> 18643 <div data-component="char-set__char" class="charset-single-char"> 18644 ê· 18645 </div> 18646 <div data-component="char-set__char" class="charset-single-char"> 18647 ê· 18648 </div> 18649 <div data-component="char-set__char" class="charset-single-char"> 18650 ê· 18651 </div> 18652 <div data-component="char-set__char" class="charset-single-char"> 18653 ê· 18654 </div> 18655 <div data-component="char-set__char" class="charset-single-char"> 18656 ê· 18657 </div> 18658 <div data-component="char-set__char" class="charset-single-char"> 18659 ê· 18660 </div> 18661 <div data-component="char-set__char" class="charset-single-char"> 18662 ê· 18663 </div> 18664 <div data-component="char-set__char" class="charset-single-char"> 18665 ê·¤ 18666 </div> 18667 <div data-component="char-set__char" class="charset-single-char"> 18668 ê·¬ 18669 </div> 18670 <div data-component="char-set__char" class="charset-single-char"> 18671 ê· 18672 </div> 18673 <div data-component="char-set__char" class="charset-single-char"> 18674 ê·¸ 18675 </div> 18676 <div data-component="char-set__cha
18676r" class="charset-single-char"> 18677 ê·¹ 18678 </div> 18679 <div data-component="char-set__char" class="charset-single-char"> 18680 ê·¼ 18681 </div> 18682 <div data-component="char-set__char" class="charset-single-char"> 18683 ê·¿ 18684 </div> 18685 <div data-component="char-set__char" class="charset-single-char"> 18686 ê¸ 18687 </div> 18688 <div data-component="char-set__char" class="charset-single-char"> 18689 ê¸ 18690 </div> 18691 <div data-component="char-set__char" class="charset-single-char"> 18692 ê¸ 18693 </div> 18694 <div data-component="char-set__char" class="charset-single-char"> 18695 ê¸ 18696 </div> 18697 <div data-component="char-set__char" class="charset-single-char"> 18698 ê¸ 18699 </div> 18700 <div data-component="char-set__char" class="charset-single-char"> 18701 ê¸ 18702 </div> 18703 <div data-component="char-set__char" class="charset-single-char"> 18704 ê¸ 18705 </div> 18706 <div data-component="char-set__char" class="charset-single-char"> 18707 ê¸ 18708 </div> 18709 <div data-component="char-set__char" class="charset-single-char"> 18710 ê¸ 18711 </div> 18712 <div data-component="char-set__char" class="charset-single-char"> 18713 ê¸ 18714 </div> 18715 <div data-component="char-set__char" class="charset-single-char"> 18716 ê¸ 18717 </div> 18718 <div data-component="char-set__char" class="charset-single-char"> 18719 ê¸ 18720 </div> 18721 <div data-component="char-set__char" class="charset-single-char"> 18722 ê¸ 18723 </div> 18724 <div data-component="char-set__char" class="charset-single-char"> 18725 긩 18726 </div> 18727 <div data-component="char-set__char" class="charset-single-char"> 18728 기 18729 </div> 18730 <div data-component="char-set__char" class="charset-single-char"> 18731 긱 18732 </div> 18733 <div data-component="char-set__char" class="charset-single-char"> 18734 긴 18735 </div> 18736 <div data-component="char-set__char" class="charset-single-char"> 18737 긷 18738 </div> 18739 <div data-component="char-set__char" class="charset-single-char"> 18740 길 18741 </div> 18742 <div data-component="char-set__char" class="charset-single-char"> 18743 긺 18744 </div> 18745 <div data-component="char-set__char" class="charset-single-char"> 18746 ê¹ 18747 </div> 18748 <div data-component="char-set__char" class="charset-single-char"> 18749 ê¹ 18750 </div> 18751 <div data-component="char-set__char" class="charset-single-char"> 18752 ê¹ 18753 </div> 18754 <div data-component="char-set__char" class="charset-single-char"> 18755 ê¹ 18756 </div> 18757 <div data-component="char-set__char" class="charset-single-char"> 18758 ê¹ 18759 </div> 18760 <div data-component="char-set__char" class="charset-single-char"> 18761 ê¹ 18762 </div> 18763 <div data-component="char-set__char" class="charset-single-char"> 18764 ê¹ 18765 </div> 18766 <div data-component="char-set__char" class="charset-single-char"> 18767 ê¹ 18768 </div> 18769 <div data-component="char-set__char" class="charset-single-char"> 18770 ê¹ 18771 </div> 18772 <div data-component="char-set__char" class="charset-single-char"> 18773 ê¹ 18774 </div> 18775 <div data-component="char-set__char" class="charset-single-char"> 18776 ê¹ 18777 </div> 18778 <div data-component="char-set__char" class="charset-single-char"> 18779 ê¹ 18780 </div> 18781 <div data-component="char-set__char" class="charset-single-char"> 18782 ê¹ 18783 </div> 18784 <div data-component="char-set__char" class="charset-single-char"> 18785 ê¹ 18786 </div> 18787 <div data-component="char-set__char" class="charset-single-char"> 18788 ê¹ 18789 </div> 18790 <div data-component="char-set__char" class="charset-single-char"> 18791 ê¹ 18792 </div> 18793 <div data-component="char-set__char" class="charset-single-char"> 18794 ê± 18795 </div> 18796 <div data-component="char-set__char" class="charset-single-char"> 18797 ê± 18798 </div> 18799 <div data-component="char-set__char" class="charset-single-char"> 18800 ê± 18801 </div> 18802 <div data-component="char-set__char" class="charset-single-char"> 18803 ê± 18804 </div> 18805 <div data-component="char-set__char" class="charset-single-char"> 18806 ê± 18807 </div> 18808 <div data-component="char-set__char" class="charset-single-char"> 18809 ê±¥ 18810 </div> 18811 <div data-component="char-set__char" class="charset-single-char"> 18812 ê±° 18813 </div> 18814 <div data-component="char-set__char" class="charset-single-char"> 18815 ê±± 18816 </div> 18817 <div data-component="char-set__char" class="charset-single-char"> 18818 ê±´ 18819 </div> 18820 <div data-component="char-set__char" class="charset-single-char"> 18821 ê±· 18822 </div> 18823 <div data-component="char-set__char" class="charset-single-char"> 18824 걸 18825 </div> 18826 <div data-component="char-set__char" class="charset-single-char"> 18827 걺 18828 </div> 18829 <div data-component="char-set__char" class="charset-single-char"> 18830 ê² 18831 </div> 18832 <div data-component="char-set__char" class="charset-single-char"> 18833 ê² 18834 </div> 18835 <div data-component="char-set__char" class="charset-single-char"> 18836 ê² 18837 </div> 18838 <div data-component="char-set__char" class="charset-single-char"> 18839 ê² 18840 </div> 18841 <div data-component="char-set__char" class="charset-single-char"> 18842 ê² 18843 </div> 18844 <div data-component="char-set__char" class="charset-single-char"> 18845 ê² 18846 </div> 18847 <div data-component="char-set__char" class="charset-single-char"> 18848 ê² 18849 </div> 18850 <div data-component="char-set__char" class="charset-single-char"> 18851 ê² 18852 </div> 18853 <div data-component="char-set__char" class="charset-single-char"> 18854 ê¹ 18855 </div> 18856 <div data-component="char-set__char" class="charset-single-char"> 18857 깡 18858 </div> 18859 <div data-component="char-set__char" class="charset-single-char"> 18860 ê¹¥ 18861 </div> 18862 <div data-component="char-set__char" class="charset-single-char"> 18863 깨 18864 </div> 18865 <div data-component="char-set__char" class="charset-single-char"> 18866 깩 18867 </div> 18868 <div data-component="char-set__char" class="charset-single-char"> 18869 깬 18870 </div> 18871 <div data-component="char-set__char" class="charset-single-char"> 18872 깯 18873 </div> 18874 <div data-component="char-set__char" class="charset-single-char"> 18875 ê¹° 18876 </div> 18877 <div data-component="char-set__char" class="charset-single-char"> 18878 깸 18879 </div> 18880 <div data-component="char-set__char" class="charset-single-char"> 18881 ê¹¹ 18882 </div> 18883 <div data-component="char-set__char" class="charset-single-char"> 18884 ê¹» 18885 </div> 18886 <div data-component="char-set__char" class="charset-single-char"> 18887 ê¹¼ 18888 </div> 18889 <div data-component="char-set__char" class="charset-single-char"> 18890 ê¹½ 18891 </div> 18892 <div data-component="char-set__char" class="charset-single-char"> 18893 êº 18894 </div> 18895 <div data-component="char-set__char" class="charset-single-char"> 18896 êº 18897 </div> 18898 <div data-component="char-set__char" class="charset-single-char"> 18899 êº 18900 </div> 18901 <div data-component="char-set__char" class="charset-single-char"> 18902 êº 18903 </div> 18904 <div data-component="char-set__char" class="charset-single-char"> 18905 êº 18906 </div> 18907 <div data-component="char-set__char" class="charset-single-char"> 18908 êº 18909 </div> 18910 <div data-component="char-set__char" class="charset-single-char"> 18911 꺤 18912 </div> 18913 <div data-component="char-set__char" class="charset-single-char"> 18914 꺼 18915 </div> 18916 <div data-component="char-set__char" class="charset-single-char"> 18917 꺽 18918 </div> 18919 <div data-component="char-set__char" class="charset-single-char"> 18920 꺾 18921 </div> 18922 <div data-component="char-set__char" class="charset-single-char"> 18923 ê» 18924 </div> 18925 <div data-component="char-set__char" class="charset-single-char"> 18926 ê» 18927 </div> 18928 <div data-component="char-set__char" class="charset-single-char"> 18929 ê» 18930 </div> 18931 <div data-component="char-set__char" class="charset-single-char"> 18932 ê» 18933 </div> 18934 <div data-component="char-set__char" class="charset-single-char"> 18935 ê» 18936 </div> 18937 <div data-component="char-set__char" class="charset-single-char"> 18938 ê» 18939 </div> 18940 <div data-component="char-set__char" class="charset-single-char"> 18941 ê» 18942 </div> 18943 <div data-component="char-set__char" class="charset-single-char"> 18944 ê» 18945 </div> 18946 <div data-component="char-set__char" class="charset-single-char"> 18947 ê» 18948 </div> 18949 <div data-component="char-set__char" class="charset-single-char"> 18950 ê» 18951 </div> 18952 <div data-component="char-set__char" class="charset-single-char"> 18953 ê» 18954 </div> 18955 <div data-component="char-set__char" class="charset-single-char"> 18956 ê» 18957 </div> 18958 <div data-component="char-set__char" class="charset-single-char"> 18959 껨 18960 </div> 18961 <div data-component="char-set__char" class="charset-single-char"> 18962 껫 18963 </div> 18964 <div data-component="char-set__char" class="charset-single-char"> 18965 ê» 18966 </div> 18967 <div data-component="char-set__char" class="charset-single-char"> 18968 ê»´ 18969 </div> 18970 <div data-component="char-set__char" class="charset-single-char"> 18971 껸 18972 </div> 18973 <div data-component="char-set__char" class="charset-single-char"> 18974 껼 18975 </div> 18976 <div data-component="char-set__char" class="charset-single-char"> 18977 ê¼ 18978 </div> 18979 <div data-component="char-set__char" class="charset-single-char"> 18980 ê¼ 18981 </div> 18982 <div data-component="char-set__char" class="charset-single-char"> 18983 ê¼ 18984 </div> 18985 <div data-component="char-set__char" class="charset-single-char"> 18986 ê¼ 18987 </div> 18988 <div data-component="char-set__char" class="charset-single-char"> 18989 ê¼ 18990 </div> 18991 <div data-component="char-set__char" class="charset-single-char"> 18992 꼬 18993 </div> 18994 <div data-component="char-set__char" class="charset-single-char"> 18995 ê¼ 18996 </div> 18997 <div data-component="char-set__char" class="charset-single-char"> 18998 ê¼° 18999 </div> 19000 <div data-component="char-set__char" class="charset-single-char"> 19001 ê¼² 19002 </div> 19003 <div data-component="char-set__char" class="charset-single-char"> 19004 ê¼³ 19005 </div> 19006 <div data-component="char-set__char" class="charset-single-char"> 19007 ê¼´ 19008 </div> 19009 <div data-component="char-set__char" class="charset-single-char"> 19010 ê¼¼ 19011 </div> 19012 <div data-component="char-set__char" class="charset-single-char"> 19013 ê¼½ 19014 </div> 19015 <div data-component="char-set__char" class="charset-single-char"> 19016 꼿 19017 </div> 19018 <div data-component="char-set__char" class="charset-single-char"> 19019 ê½ 19020 </div> 19021 <div data-component="char-set__char" class="charset-single-char"> 19022 ê½ 19023 </div> 19024 <div data-component="char-set__char" class="charset-single-char"> 19025 ê½ 19026 </div> 19027 <div data-component="char-set__char" class="charset-single-char"> 19028 ê½ 19029 </div> 19030 <div data-component="char-set__char" class="charset-single-char"> 19031 ê½ 19032 </div> 19033 <div data-component="char-set__char" class="charset-single-char"> 19034 ê½ 19035 </div> 19036 <div data-component="char-set__char" class="charset-single-char"> 19037 ê½ 19038 </div> 19039 <div data-component="char-set__char" class="charset-single-char"> 19040 ê½ 19041 </div> 19042 <div data-component="char-set__char" class="charset-single-char"> 19043 ê½ 19044 </div> 19045 <div data-component="char-set__char" class="charset-single-char"> 19046 ê½ 19047 </div> 19048 <div data-component="char-set__char" class="charset-single-char"> 19049 꽤 19050 </div> 19051 <div data-component="char-set__char" class="charset-single-char"> 19052 ê½¥ 19053 </div> 19054 <div data-component="char-set__char" class="charset-single-char"> 19055 꽨 19056 </div> 19057 <div data-component="char-set__char" class="charset-single-char"> 19058 꽸 19059 </div> 19060 <div data-component="char-set__char" class="charset-single-char"> 19061 ê² 19062 </div> 19063 <div data-component="char-set__char" class="charset-single-char"> 19064 ê² 19065 </div> 19066 <div data-component="char-set__char" class="charset-single-char"> 19067 ê² 19068 </div> 19069 <div data-component="char-set__char" class="charset-single-char"> 19070 ê² 19071 </div> 19072 <div data-component="char-set__char" class="charset-single-char"> 19073 ê² 19074 </div> 19075 <div data-component="char-set__char" class="charset-single-char"> 19076 ê² 19077 </div> 19078 <div data-component="char-set__char" class="charset-single-char"> 19079 ê² 19080 </div> 19081 <div data-component="char-set__char" class="charset-single-char"> 19082 ê² 19083 </div> 19084 <div data-component="char-set__char" class="charset-single-char"> 19085 ê² 19086 </div> 19087 <div data-component="char-set__char" class="charset-single-char"> 19088 ê² 19089 </div> 19090 <div data-component="char-set__char" class="charset-single-char"> 19091 겡 19092 </div> 19093 <div data-component="char-set__char" class="charset-single-char"> 19094 겨 19095 </div> 19096 <div data-component="char-set__char" class="charset-single-char"> 19097 격 19098 </div> 19099 <div data-component="char-set__char" class="charset-single-char"> 19100 겪 19101 </div> 19102 <div data-component="char-set__char" class="charset-single-char"> 19103 견 19104 </div> 19105 <div data-component="char-set__char" class="charset-single-char"> 19106 겯 19107 </div> 19108 <div data-component="char-set__char" class="charset-single-char"> 19109 ê²° 19110 </div> 19111 <div data-component="char-set__char" class="charset-single-char"> 19112 ê²· 19113 </div> 19114 <div data-component="char-set__char" class="charset-single-char"> 19115 겸 19116 </div> 19117 <div data-component="char-set__char" class="charset-single-char"> 19118 ê²¹ 19119 </div> 19120 <div data-component="char-set__char" class="charset-single-char"> 19121 ê²» 19122 </div> 19123 <div data-component="char-set__char" class="charset-single-char"> 19124 ê²¼ 19125 </div> 19126 <div data-component="char-set__char" class="charset-single-char"> 19127
19127 ê²½ 19128 </div> 19129 <div data-component="char-set__char" class="charset-single-char"> 19130 겿 19131 </div> 19132 <div data-component="char-set__char" class="charset-single-char"> 19133 ê³ 19134 </div> 19135 <div data-component="char-set__char" class="charset-single-char"> 19136 ê³ 19137 </div> 19138 <div data-component="char-set__char" class="charset-single-char"> 19139 ê³ 19140 </div> 19141 <div data-component="char-set__char" class="charset-single-char"> 19142 ê³ 19143 </div> 19144 <div data-component="char-set__char" class="charset-single-char"> 19145 ê½¹ 19146 </div> 19147 <div data-component="char-set__char" class="charset-single-char"> 19148 ê¾ 19149 </div> 19150 <div data-component="char-set__char" class="charset-single-char"> 19151 ê¾ 19152 </div> 19153 <div data-component="char-set__char" class="charset-single-char"> 19154 ê¾ 19155 </div> 19156 <div data-component="char-set__char" class="charset-single-char"> 19157 ê¾ 19158 </div> 19159 <div data-component="char-set__char" class="charset-single-char"> 19160 ê¾ 19161 </div> 19162 <div data-component="char-set__char" class="charset-single-char"> 19163 ê¾ 19164 </div> 19165 <div data-component="char-set__char" class="charset-single-char"> 19166 ê¾ 19167 </div> 19168 <div data-component="char-set__char" class="charset-single-char"> 19169 꾸 19170 </div> 19171 <div data-component="char-set__char" class="charset-single-char"> 19172 ê¾¹ 19173 </div> 19174 <div data-component="char-set__char" class="charset-single-char"> 19175 ê¾¼ 19176 </div> 19177 <div data-component="char-set__char" class="charset-single-char"> 19178 ê¿ 19179 </div> 19180 <div data-component="char-set__char" class="charset-single-char"> 19181 ê¿ 19182 </div> 19183 <div data-component="char-set__char" class="charset-single-char"> 19184 ê¿ 19185 </div> 19186 <div data-component="char-set__char" class="charset-single-char"> 19187 ê¿ 19188 </div> 19189 <div data-component="char-set__char" class="charset-single-char"> 19190 ê¿ 19191 </div> 19192 <div data-component="char-set__char" class="charset-single-char"> 19193 ê¿ 19194 </div> 19195 <div data-component="char-set__char" class="charset-single-char"> 19196 ê¿ 19197 </div> 19198 <div data-component="char-set__char" class="charset-single-char"> 19199 ê¿ 19200 </div> 19201 <div data-component="char-set__char" class="charset-single-char"> 19202 ê¿ 19203 </div> 19204 <div data-component="char-set__char" class="charset-single-char"> 19205 ê¿ 19206 </div> 19207 <div data-component="char-set__char" class="charset-single-char"> 19208 ê¿ 19209 </div> 19210 </div> 19211 </div> 19212 </div> 19213 </div> 19214 <!-- End of Charset Section --> 19215</div> 19216 19217 <!-- Start of one single Charset Section --> 19218<div class="col-span-5" data-component="show-hide-section__section" data-show-hide-section-name="thai-loopless"> 19219 <div class="pb-7 thai-loopless-fonts" data-component="char-set__set-container" data-char-set-script="Thai Loopless" data-char-set-subset="Characters"> 19220 <div class="flex flex-row justify-between"> 19221 <div class="">Characters</div> 19222 <div data-component="char-set__subset-size" class=""></div> 19223 </div> 19224 <div> 19225 <div class="character-set-section mt-4"> 19226 <div class="character-set-container text-rg thai-loopless-fonts"> 19227 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19228 ภ19229 </div> 19230 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19231 ภ19232 </div> 19233 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19234 ภ19235 </div> 19236 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19237 ภ19238 </div> 19239 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19240 ภ19241 </div> 19242 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19243 ภ19244 </div> 19245 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19246 ภ19247 </div> 19248 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19249 ภ19250 </div> 19251 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19252 ภ19253 </div> 19254 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19255 ภ19256 </div> 19257 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19258 ภ19259 </div> 19260 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19261 ภ19262 </div> 19263 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19264 ภ19265 </div> 19266 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19267 ภ19268 </div> 19269 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19270 ภ19271 </div> 19272 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19273 ภ19274 </div> 19275 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19276 ภ19277 </div> 19278 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19279 ภ19280 </div> 19281 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19282 ภ19283 </div> 19284 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19285 ภ19286 </div> 19287 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19288 ภ19289 </div> 19290 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19291 ภ19292 </div> 19293 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19294 ภ19295 </div> 19296 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19297 ภ19298 </div> 19299 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19300 ภ19301 </div> 19302 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19303 ภ19304 </div> 19305 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19306 ภ19307 </div> 19308 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19309 ภ19310 </div> 19311 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19312 ภ19313 </div> 19314 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19315 ภ19316 </div> 19317 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19318 ภ19319 </div> 19320 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19321 ภ19322 </div> 19323 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19324 ม 19325 </div> 19326 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19327 ย 19328 </div> 19329 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19330 ร 19331 </div> 19332 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19333 ฤ 19334 </div> 19335 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19336 ล 19337 </div> 19338 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19339 ฦ 19340 </div> 19341 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19342 ว 19343 </div> 19344 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19345 ศ 19346 </div> 19347 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19348 ษ 19349 </div> 19350 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19351 ส 19352 </div> 19353 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19354 ห 19355 </div> 19356 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19357 ฬ 19358 </div> 19359 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19360 ภ19361 </div> 19362 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19363 ฮ 19364 </div> 19365 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19366 ๠19367 </div> 19368 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19369 ๠19370 </div> 19371 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19372 ๠19373 </div> 19374 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19375 ๠19376 </div> 19377 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19378 ๠19379 </div> 19380 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19381 ๠19382 </div> 19383 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19384 ๠19385 </div> 19386 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19387 ๠19388 </div> 19389 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19390 ๠19391 </div> 19392 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19393 ๠19394 </div> 19395 </div> 19396 </div> 19397 </div> 19398 </div> 19399 <!-- End of Charset Section --> 19400 <!-- Start of one single Charset Section --> 19401 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Thai" data-char-set-subset="Vowel and Tonemarks"> 19402 <div class="flex flex-row justify-between"> 19403 <div class="">Vowel and Tonemarks</div> 19404 <div data-component="char-set__subset-size" class=""></div> 19405 </div> 19406 <div> 19407 <div class="character-set-section mt-4"> 19408 <div class="character-set-container text-rg thai-loopless-fonts"> 19409 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19410 à¸à¸° 19411 </div> 19412 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19413 à¸à¸² 19414 </div> 19415 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19416 ฤ๠19417 </div> 19418 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19419 à¸à¸´ 19420 </div> 19421 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19422 à¸à¸µ 19423 </div> 19424 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19425 à¸à¸¶ 19426 </div> 19427 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19428 à¸à¸· 19429 </div> 19430 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19431 à¸à¸´ 19432 </div> 19433 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19434 à¸à¸µ 19435 </div> 19436 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19437 à¸à¸¶ 19438 </div> 19439 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19440 à¸à¸· 19441 </div> 19442 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19443 à¸à¸¸ 19444 </div> 19445 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19446 à¸à¸¹ 19447 </div> 19448 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19449 à¸à¸º 19450 </div> 19451 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19452 à¸à¸¸ 19453 </div> 19454 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19455 à¸à¸¹ 19456 </div> 19457 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19458 à¸à¸º 19459 </div> 19460 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19461 à¹à¸ 19462 </div> 19463 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19464 à¹à¸ 19465 </div> 19466 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19467 à¹à¸ 19468 </div> 19469 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19470 à¹à¸ 19471 </div> 19472 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19473 à¹à¸ 19474 </div> 19475 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19476 à¸à¸³ 19477 </div> 19478 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19479 à¸à¹ 19480 </div> 19481 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19482 à¸à¹ 19483 </div> 19484 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19485 à¸à¹ 19486 </div> 19487 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19488 à¸à¹ 19489 </div> 19490 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19491 à¸à¹ 19492 </div> 19493 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19494 à¸à¹ 19495 </div> 19496 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19497 à¸à¹ 19498 </div> 19499 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19500 à¸à¹ 19501 </div> 19502 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19503 à¸à¹ 19504 </div> 19505 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19506 à¸à¹ 19507 </div> 19508 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19509 à¸à¹ 19510 </div> 19511 <div data-component="char-set__char" class="charset-single-char" lang="thll"> 19512 à¸à¹ 19513 </div> 19514 <div data-component="char-set__char" class="charset-single-char"> 19515 à¸à¹ 19516 </div> 19517 </div> 19518 </div> 19519 </div> 19520 </div> 19521 <!-- End of Charset Section --> 19522</div> 19523 19524 <!-- Start of one single Charset Section --> 19525<div class="col-span-5" data-component="show-hide-section__section" data-show-hide-section-name="thai-looped"> 19526 <div class="pb-7 thai-looped-fonts" data-component="char-set__set-container" data-char-set-script="Thai Looped" data-char-set-subset="Characters"> 19527 <div class="flex flex-row justify-between"> 19528 <div class="">Characters</div> 19529 <div data-component="char-set__subset-size" class=""></div> 19530 </div> 19531 <div> 19532 <div class="character-set-section mt-4"> 19533 <div class="character-set-container text-rg thai-looped-fonts"> 19534 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19535 ภ19536 </div> 19537 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19538 ภ19539
19539 </div> 19540 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19541 ภ19542 </div> 19543 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19544 ภ19545 </div> 19546 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19547 ภ19548 </div> 19549 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19550 ภ19551 </div> 19552 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19553 ภ19554 </div> 19555 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19556 ภ19557 </div> 19558 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19559 ภ19560 </div> 19561 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19562 ภ19563 </div> 19564 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19565 ภ19566 </div> 19567 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19568 ภ19569 </div> 19570 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19571 ภ19572 </div> 19573 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19574 ภ19575 </div> 19576 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19577 ภ19578 </div> 19579 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19580 ภ19581 </div> 19582 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19583 ภ19584 </div> 19585 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19586 ภ19587 </div> 19588 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19589 ภ19590 </div> 19591 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19592 ภ19593 </div> 19594 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19595 ภ19596 </div> 19597 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19598 ภ19599 </div> 19600 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19601 ภ19602 </div> 19603 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19604 ภ19605 </div> 19606 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19607 ภ19608 </div> 19609 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19610 ภ19611 </div> 19612 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19613 ภ19614 </div> 19615 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19616 ภ19617 </div> 19618 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19619 ภ19620 </div> 19621 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19622 ภ19623 </div> 19624 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19625 ภ19626 </div> 19627 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19628 ภ19629 </div> 19630 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19631 ม 19632 </div> 19633 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19634 ย 19635 </div> 19636 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19637 ร 19638 </div> 19639 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19640 ฤ 19641 </div> 19642 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19643 ล 19644 </div> 19645 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19646 ฦ 19647 </div> 19648 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19649 ว 19650 </div> 19651 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19652 ศ 19653 </div> 19654 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19655 ษ 19656 </div> 19657 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19658 ส 19659 </div> 19660 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19661 ห 19662 </div> 19663 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19664 ฬ 19665 </div> 19666 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19667 ภ19668 </div> 19669 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19670 ฮ 19671 </div> 19672 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19673 ๠19674 </div> 19675 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19676 ๠19677 </div> 19678 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19679 ๠19680 </div> 19681 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19682 ๠19683 </div> 19684 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19685 ๠19686 </div> 19687 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19688 ๠19689 </div> 19690 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19691 ๠19692 </div> 19693 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19694 ๠19695 </div> 19696 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19697 ๠19698 </div> 19699 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19700 ๠19701 </div> 19702 </div> 19703 </div> 19704 </div> 19705 </div> 19706 <!-- End of Charset Section --> 19707 <!-- Start of one single Charset Section --> 19708 <div class="pb-7" data-component="char-set__set-container" data-char-set-script="Thai" data-char-set-subset="Vowel and Tonemarks"> 19709 <div class="flex flex-row justify-between"> 19710 <div class="">Vowel and Tonemarks</div> 19711 <div data-component="char-set__subset-size" class=""></div> 19712 </div> 19713 <div> 19714 <div class="character-set-section mt-4"> 19715 <div class="character-set-container text-rg thai-looped-fonts"> 19716 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19717 à¸à¸° 19718 </div> 19719 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19720 à¸à¸² 19721 </div> 19722 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19723 ฤ๠19724 </div> 19725 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19726 à¸à¸´ 19727 </div> 19728 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19729 à¸à¸µ 19730 </div> 19731 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19732 à¸à¸¶ 19733 </div> 19734 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19735 à¸à¸· 19736 </div> 19737 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19738 à¸à¸´ 19739 </div> 19740 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19741 à¸à¸µ 19742 </div> 19743 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19744 à¸à¸¶ 19745 </div> 19746 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19747 à¸à¸· 19748 </div> 19749 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19750 à¸à¸¸ 19751 </div> 19752 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19753 à¸à¸¹ 19754 </div> 19755 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19756 à¸à¸º 19757 </div> 19758 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19759 à¸à¸¸ 19760 </div> 19761 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19762 à¸à¸¹ 19763 </div> 19764 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19765 à¸à¸º 19766 </div> 19767 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19768 à¹à¸ 19769 </div> 19770 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19771 à¹à¸ 19772 </div> 19773 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19774 à¹à¸ 19775 </div> 19776 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19777 à¹à¸ 19778 </div> 19779 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19780 à¹à¸ 19781 </div> 19782 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19783 à¸à¸³ 19784 </div> 19785 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19786 à¸à¹ 19787 </div> 19788 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19789 à¸à¹ 19790 </div> 19791 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19792 à¸à¹ 19793 </div> 19794 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19795 à¸à¹ 19796 </div> 19797 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19798 à¸à¹ 19799 </div> 19800 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19801 à¸à¹ 19802 </div> 19803 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19804 à¸à¹ 19805 </div> 19806 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19807 à¸à¹ 19808 </div> 19809 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19810 à¸à¹ 19811 </div> 19812 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19813 à¸à¹ 19814 </div> 19815 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19816 à¸à¹ 19817 </div> 19818 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19819 à¸à¹ 19820 </div> 19821 <div data-component="char-set__char" class="charset-single-char" lang="thlp"> 19822 à¸à¹ 19823 </div> 19824 </div> 19825 </div> 19826 </div> 19827 </div> 19828 <!-- End of Charset Section --> 19829</div> 19830 19831</div> 19832 19833 </section> 19834 19835 <!-- Detailed Information --> 19836<section class="md:ml-[132px] px-4 flex mb-8 md:mb-12"> 19837 <!-- Partial Width Content Area With Section Nav --> 19838 <!-- Section Nav Area --> 19839 <div class="hidden md:block ml-4 w-[120px] h-1/2 text-xs sticky" data-component="sticky-subnav"> 19840 <div class="flex flex-col justify-center h-full"> 19841 <h3 class="text-lg">Detailed Information</h3> 19842 <div class="flex flex-col items-start pt-5"> 19843 GT American Intl supports 183 languages across its 10 scripts. 19844 </div> 19845 <div class="flex flex-col items-start pt-5"> 19846 All script extensions include support for Latin-alphabet languages. 19847 </div> 19848 </div> 19849 </div> 19850 <!-- Main Content Area --> 19851 <div class="md:ml-[35px] md:mr-4 w-full grid-setup"> 19852 <!-- Latin Extended --> 19853 <div class="col-span-4 md:col-span-12 border-y py-5 grid-setup"> 19854 <div class="col-span-4 md:col-span-3 pb-3"> 19855 <div class="text-s mb-4">Latin</div> 19856 <div class="text-xs pr-4">
19857 Typeface design by Noël Leu, with Seb McLauchlan. 19858 </div> 19859 </div> 19860 <div class="col-span-4 md:col-span-3 grid-flow-row md:grid-flow-col text-xs md:pt-7 pb-3"> 19861 <div class="grid-setup mb-4"> 19862 <div class="col-span-4 md:col-span-4">Variable Axes</div> 19863 <div class="col-span-4 md:col-span-8">Width<br>Weight</div> 19864 </div> 19865 <div class="grid-setup mb-4"> 19866 <div class="col-span-4 md:col-span-4">Proportional</div> 19867 <div class="col-span-4 md:col-span-8"> 19868 5 Widths<br>7 Weights<br>Upright and Italic 19869 </div> 19870 </div> 19871 <div class="grid-setup"> 19872 <div class="col-span-4 md:col-span-4">Monospace</div> 19873 <div class="col-span-4 md:col-span-8"> 19874 7 Weights<br>Upright and Italic 19875 </div> 19876 </div> 19877 </div> 19878 <div class="col-span-4 md:col-span-6 text-xs md:pt-7 pb-3"> 19879 Afaan, Afar, Afrikaans, Albanian, Alsatian, Amis, Anuta, Aragonese, 19880 Aranese, Aromanian, Arrernte, Asturian, Atayal, Aymara, Azerbaijani, 19881 Basque, Belarusian, Bemba, Bikol, Bislama, Bosnian, Breton, Cape Verdean 19882 Creole, Catalan, Cebuano, Chamorro, Chavacano, Chichewa, Chickasaw, 19883 Cimbrian, Cofán, Cornish, Corsican, Creek, Croatian, Czech, Danish, 19884 Dawan, Dholuo, Drehu, Dutch, English, Estonian, Faroese, Fijian, 19885 Filipino, Finnish, French, Frisian, Friulian, Galician, Ganda, Genoese, 19886 German, Gikuyu, Gooniyandi, Greenlandic (Kalaallisut), Guadeloupean 19887 Creole, Gwichâin, Haitian Creole, Hawaiian, Hiligaynon, Hopi, Hungarian, 19888 Icelandic, Ido, Igbo, Ilocano, Indonesian , Irish, Istro-Romanian, 19889 Italian, Jamaican, Javanese, Jèrriais, Kaingang, Kala Lagaw Ya, 19890 Kapampangan, Kaqchikel, Kashubian, Kikongo, Kinyarwanda, Kiribati, 19891 Kirundi, Kurdish, Ladin, Latin, Latvian, Lithuanian, Lombard, Low Saxon, 19892 Luxembourgish, Maasai, Makhuwa, Malay, Maltese, Manx, MÄori, Marquesan, 19893 Megleno-Romanian, Meriam Mir, Mirandese, Mohawk, Moldovan, Montagnais, 19894 Montenegrin, Murrinh-Patha, Nagamese Creole, Nahuatl, Ndebele, 19895 Neapolitan, Niuean, Noongar, Norwegian, Occitan, Old Icelandic, Old 19896 Norse, Oshiwambo, Palauan, Papiamento, Piedmontese, Polish, Portuguese, 19897 Qâeqchiâ, Quechua, Rarotongan, Romanian, Romansh, Rotokas, Inari Sami, 19898 Lule Sami, Northern Sami, Southern Sami, Samoan, Sango, Saramaccan, 19899 Sardinian, Scottish Gaelic, Seri, Seychellois Creole, Shawnee, Shona, 19900 Sicilian, Silesian, Slovak, Slovenian, Somali, Upper and Lower Sorbian, 19901 Northern and Southern Sotho, Spanish, Sranan, Sundanese, Swahili, Swazi, 19902 Swedish, Tagalog, Tahitian, Tetum, Tok Pisin, Tokelauan, Tongan, 19903 Tshiluba, Tsonga, Tswana, Tumbuka, Turkish, Tuvaluan, Tzotzil, Venetian, 19904 Vepsian, Võro, Wallisian, Walloon, Waray-Waray, Warlpiri, Wayuu, Welsh, 19905 Wik-Mungkan, Wolof, Xavante, Xhosa, Yapese, Yindjibarndi, Zapotec, 19906 Zarma, Zazaki, Zulu, Zuni 19907 </div> 19908 </div> 19909 19910 <!-- Cyrillic --> 19911 <div class="col-span-4 md:col-span-12 border-b py-5 grid-setup"> 19912 <div class="col-span-4 md:col-span-3 pb-3"> 19913 <div class="text-s mb-4">Cyrillic</div> 19914 <div class="text-xs pr-4"> 19915 РаÑÑиÑÐµÐ½Ð¸Ñ ÐºÐ¸ÑиллиÑÑ, гÑеÑеÑкого и вÑеÑнамÑкого алÑавиÑа, 19916 ÑазÑабоÑаннÑе Grilli Type пÑи конÑÑлÑÑаÑии ÐаÑии ÐоÑеÑли. Cyrillic 19917 designed by Grilli Type with consulting by Maria Doreuli. 19918 </div> 19919 </div> 19920 19921 <div class="col-span-4 md:col-span-3 grid-flow-row md:grid-flow-col text-xs md:pt-7 pb-3"> 19922 <div class="grid-setup mb-4"> 19923 <div class="col-span-4 md:col-span-4">Variable Axes</div> 19924 <div class="col-span-4 md:col-span-8">Width<br>Weight</div> 19925 </div> 19926 <div class="grid-setup mb-4"> 19927 <div class="col-span-4 md:col-span-4">Proportional</div> 19928 <div class="col-span-4 md:col-span-8"> 19929 5 Widths<br>7 Weights<br>Upright and Italic 19930 </div> 19931 </div> 19932 <div class="grid-setup"> 19933 <div class="col-span-4 md:col-span-4">Monospace</div> 19934 <div class="col-span-4 md:col-span-8"> 19935 7 Weights<br>Upright and Italic 19936 </div> 19937 </div> 19938 </div> 19939 <div class="col-span-4 md:col-span-6 text-xs md:pt-7 pb-3"> 19940 Abaza, Adyghe, Aghul, Avar, Bashkir, Balkar, Belarusian, Bosnian, 19941 Bulgarian, Buryat, Chechen, Chuvash, Crimean Tatar, Dargin, Dungan, 19942 Erzya, Ingush, Kabardian, Kalmyk, Karachay, Karakalpak, Kazakh, 19943 Khinalugh, Komi, Kumyk, Kyrgyz, Lak, Lezgian, Macedonian, Moldovan, 19944 Mongolian, Moksha, Nanai, Nogai, Ossetian, Russian, Rusyn, Rutul,
19945 Serbian, Tabasaran, Tajik, Tat, Tatar, Turkmen, Tuvan, Uyghur, 19946 Ukrainian, Uzbek 19947 </div> 19948 </div> 19949 19950 <!-- Greek --> 19951 <div class="col-span-4 md:col-span-12 border-b py-5 grid-setup"> 19952 <div class="col-span-4 md:col-span-3 pb-3"> 19953 <div class="text-s mb-4">Greek</div> 19954 <div class="text-xs pr-4"> 19955 Τα Îλληνικά ÏÏεδιάÏÏηκαν αÏÏ Ïην Grilli Type με ÏÏ Î¼Î²Î¿Ï Î»ÎµÏ Ïική αÏÏ Ïον 19956 ÎαÏίλη ÎεÏÏÎ³Î¯Î¿Ï . Greek designed by Grilli Type, consulting by Vassilis 19957 Georgiou. 19958 </div> 19959 </div> 19960 19961 <div class="col-span-4 md:col-span-3 grid-flow-row md:grid-flow-col text-xs md:pt-7 pb-3"> 19962 <div class="grid-setup mb-4"> 19963 <div class="col-span-4 md:col-span-4">Variable Axes</div> 19964 <div class="col-span-4 md:col-span-8">Width<br>Weight</div> 19965 </div> 19966 <div class="grid-setup mb-4"> 19967 <div class="col-span-4 md:col-span-4">Proportional</div> 19968 <div class="col-span-4 md:col-span-8"> 19969 5 Widths<br>7 Weights<br>Upright and Italic 19970 </div> 19971 </div> 19972 <div class="grid-setup"> 19973 <div class="col-span-4 md:col-span-4">Monospace</div> 19974 <div class="col-span-4 md:col-span-8"> 19975 7 Weights<br>Upright and Italic 19976 </div> 19977 </div> 19978 </div> 19979 <div class="col-span-4 md:col-span-6 text-xs md:pt-7 pb-3">Greek</div> 19980 </div> 19981 19982 <!-- Vietnamese --> 19983 <div class="col-span-4 md:col-span-12 border-b py-5 grid-setup"> 19984 <div class="col-span-4 md:col-span-3 pb-3"> 19985 <div class="text-s mb-4">Vietnamese</div> 19986 <div class="text-xs pr-4"> 19987 Chữ Viá»t thiết kế bá»i Grilli Type vá»i sá»± tham khảo qua Donny Trương. 19988 Vietnamese designed by Grilli Type with consulting by Donny Trương. 19989 </div> 19990 </div> 19991 19992 <div class="col-span-4 md:col-span-3 grid-flow-row md:grid-flow-col text-xs md:pt-7 pb-3"> 19993 <div class="grid-setup mb-4"> 19994 <div class="col-span-4 md:col-span-4">Variable Axes</div> 19995 <div class="col-span-4 md:col-span-8">Width<br>Weight</div> 19996 </div> 19997 <div class="grid-setup mb-4"> 19998 <div class="col-span-4 md:col-span-4">Proportional</div> 19999 <div class="col-span-4 md:col-span-8"> 20000 5 Widths<br>7 Weights<br>Upright and Italic 20001 </div> 20002 </div> 20003 <div class="grid-setup"> 20004 <div class="col-span-4 md:col-span-4">Monospace</div> 20005 <div class="col-span-4 md:col-span-8"> 20006 7 Weights<br>Upright and Italic 20007 </div> 20008 </div> 20009 </div> 20010 <div class="col-span-4 md:col-span-6 text-xs md:pt-7 pb-3"> 20011 Vietnamese 20012 </div> 20013 </div> 20014 20015 <!-- Arabic --> 20016 <div class="col-span-4 md:col-span-12 border-b py-5 grid-setup"> 20017 <div class="col-span-4 md:col-span-3 pb-3"> 20018 <div class="text-s mb-4">Arabic</div> 20019 <div class="text-xs pr-4"> 20020 <div dir="rtl" class="w-full" lang="ar"> 20021 اÙÙØºØ© Ø§ÙØ¹Ø±Ø¨ÙØ© ٠٠تص٠ÙÙ ÙØ§Ø¦Ù Ù Ø±ÙØµ ÙØ®Ø§Ø¬Ø§Ø¬ أبÙÙØ§Ù. 20022 </div> 20023 <div class="w-full" dir="ltr"> 20024 Arabic designed by Waël Morcos and Khajag Apelian. 20025 </div> 20026 </div> 20027 </div> 20028 <div class="col-span-4 md:col-span-3 grid-flow-row md:grid-flow-col text-xs md:pt-7 pb-3"> 20029 <div class="grid-setup mb-4"> 20030 <div class="col-span-4 md:col-span-4">Variable Axes</div> 20031 <div class="col-span-4 md:col-span-8">Weight</div> 20032 </div> 20033 <div class="grid-setup"> 20034 <div class="col-span-4 md:col-span-4">Proportional</div> 20035 <div class="col-span-4 md:col-span-8">7 Weights</div> 20036 </div> 20037 </div> 20038 20039 <div class="col-span-4 md:col-span-6 text-xs md:pt-7 pb-3"> 20040 Arabic, Kurdish, Persian, Urdu 20041 </div> 20042 </div> 20043 20044 <!-- Devanagari --> 20045 <div class="col-span-4 md:col-span-12 border-b pt-5 pb-6 grid-setup"> 20046 <div class="col-span-4 md:col-span-3 pb-3"> 20047 <div class="text-s mb-4">Devanagari</div> 20048 <div class="text-xs pr-4 pb-3"> 20049 दà¥à¤µà¤¨à¤¾à¤à¤°à¥ डिà¤à¤¼à¤¾à¤à¤¨ हितà¥à¤¶ मालविया दà¥à¤µà¤¾à¤°à¤¾, नवà¤à¤¬à¤° à¤à¤° à¤à¥à¤°à¤¿à¤²à¥ à¤à¤¾à¤à¤ª à¤à¥ 20050 à¤à¥à¤°à¤¿à¤à¤à¤¿à¤µ निरà¥à¤¦à¥à¤¶à¤¨ à¤à¥ साथ à¤à¥ à¤à¤¯à¥ हà¥à¥¤ फà¥à¤¨à¥à¤ à¤à¤à¤à¥à¤¨à¤¿à¤¯à¤°à¤¿à¤à¤ à¤à¤° मासà¥à¤à¤°à¤¿à¤à¤ 20051 यà¥à¤¨à¤¿à¤µà¤°à¥à¤¸à¤² थरà¥à¤¸à¥à¤ दà¥à¤µà¤¾à¤°à¤¾ à¤à¤¿à¤¯à¤¾ à¤à¤¯à¤¾ हà¥à¥¤ Devanagari designed by Hitesh 20052 Malaviya, with creative direction from November & Grilli Type. Font 20053 Engineering and mastering by Universal Thirst. 20054 </div> 20055 </div> 20056 <div class="col-span-4 md:col-span-3 grid-flow-row md:grid-flow-col text-xs md:pt-7 pb-3"> 20057 <div class="grid-setup mb-4"> 20058 <div class="col-span-4 md:col-span-4">Variable Axes</div> 20059 <div class="col-span-4 md:col-span-8">Weight</div> 20060 </div> 20061 <div class="grid-setup"> 20062 <div class="col-span-4 md:col-span-4">Proportional</div> 20063 <div class="col-span-4 md:col-span-8">7 Weights</div> 20064 </div> 20065 </div> 20066 <div class="col-span-4 md:col-span-6 text-xs md:pt-7 pb-3"> 20067 Apabhramsha, Angika, Awadhi, Bajjika, Bhili, Bhojpuri, Basic Sanskrit, 20068 Boro, Braj, Chhattisgarhi, Dogri, Garhwali, Haryanvi, Hindi, Kashmiri, 20069 Khandeshi, Konkani, Kumaoni, Magahi, Maithili, Marathi, Marwari, 20070 Mundari, Nagpuri, Newari, Nepali, PÄli, Pahari, Prakrit, Rajasthani, 20071 Santali, Saraiki, Sherpa, Sindhi, Surjapuri 20072 </div> 20073 </div> 20074 20075 <!-- Hebrew --> 20076 <div class="col-span-4 md:col-span-12 border-b py-5 grid-setup"> 20077 <div class="col-span-4 md:col-span-3 pb-3"> 20078 <div class="text-s mb-4">Hebrew</div> 20079 <div class="text-xs pr-4"> 20080 <div class="w-full" dir="rtl" lang="he"> 20081 ×¢×ר×ת ××¢×צ×× ×× ×§ ××× ××£ ××× ××× ×ר××ר, פ×× ××£ ×××עת ××ת××ת 20082 </div> 20083 <div dir="ltr" class="w-full"> 20084 Hebrew designed by Yanek Iontef and Daniel Grumer from Fontef Type 20085 Foundry. 20086 </div> 20087 </div> 20088 </div> 20089 <div class="col-span-4 md:col-span-3 grid-flow-row md:grid-flow-col text-xs md:pt-7 pb-3"> 20090 <div class="grid-setup mb-4"> 20091 <div class="col-span-4 md:col-span-4">Variable Axes</div> 20092 <div class="col-span-4 md:col-span-8">Weight</div> 20093 </div> 20094 <div class="grid-setup"> 20095 <div class="col-span-4 md:col-span-4">Proportional</div> 20096 <div class="col-span-4 md:col-span-8">7 Weights</div> 20097 </div> 20098 </div> 20099 <div class="col-span-4 md:col-span-6 text-xs md:pt-7 pb-3"> 20100 Hebrew, Yiddish 20101 </div> 20102 </div> 20103 20104 <!-- Korean --> 20105 <div class="col-span-4 md:col-span-12 border-b py-5 grid-setup"> 20106 <div class="col-span-4 md:col-span-3 pb-3"> 20107 <div class="text-s mb-4">Korean / Hangeul</div> 20108 <div class="text-xs pr-4">
20109 íê¸ ëìì¸ by í¨ë¯¼ì£¼. Korean designed by Minjoo Ham. 20110 </div> 20111 </div> 20112 20113 <div class="col-span-4 md:col-span-3 grid-flow-row md:grid-flow-col text-xs md:pt-7 pb-3"> 20114 <div class="grid-setup mb-4"> 20115 <div class="col-span-4 md:col-span-4">Variable Axes</div> 20116 <div class="col-span-4 md:col-span-8">Weight</div> 20117 </div> 20118 <div class="grid-setup"> 20119 <div class="col-span-4 md:col-span-4">Proportional</div> 20120 <div class="col-span-4 md:col-span-8">7 Weights</div> 20121 </div> 20122 </div> 20123 <div class="col-span-4 md:col-span-6 text-xs md:pt-7 pb-3">Korean</div> 20124 </div> 20125 20126 <!-- Thai --> 20127 <div class="col-span-4 md:col-span-12 border-b py-5 grid-setup"> 20128 <div class="col-span-4 md:col-span-3 pb-3"> 20129 <div class="text-s mb-4">Thai</div> 20130 <div class="text-xs pr-4"> 20131 à¸à¸±à¸à¸©à¸£à¹à¸à¸¢à¹à¸à¸à¹à¸¡à¹à¸¡à¸µà¸«à¸±à¸§ à¸à¸à¸à¹à¸à¸à¹à¸à¸¢ สมิà¸à¸à¸à¹ สมัà¸à¹à¸¥à¸²à¸° à¹à¸¥à¸°à¸à¸±à¸à¸©à¸£à¹à¸à¸¢à¹à¸à¸à¸¡à¸µà¸«à¸±à¸§ 20132 à¸à¸à¸à¹à¸à¸à¹à¸à¸¢ à¸à¸à¸±à¸ à¸à¸¸à¸¢à¸¢à¸²à¸¡à¸²à¸à¸´à¸à¸´ à¸à¸²à¸ à¸à¸±à¸à¸ªà¸£à¸£ à¸à¸µà¸¡à¸²à¸. Thai designed by Knaz 20133 Uiyamathiti and Smich Smanloh from Cadson Demak. 20134 </div> 20135 </div> 20136 <div class="col-span-4 md:col-span-3 grid-flow-row md:grid-flow-col text-xs md:pt-7 pb-3"> 20137 <div class="grid-setup mb-4"> 20138 <div class="col-span-4 md:col-span-4">Variable Axes</div> 20139 <div class="col-span-4 md:col-span-8">Weight</div> 20140 </div> 20141 <div class="grid-setup mb-4"> 20142 <div class="col-span-4 md:col-span-4">Looped</div> 20143 <div class="col-span-4 md:col-span-8">7 Weights</div> 20144 </div> 20145 <div class="grid-setup"> 20146 <div class="col-span-4 md:col-span-4">Loopless</div> 20147 <div class="col-span-4 md:col-span-8">7 Weights</div> 20148 </div> 20149 </div> 20150 <div class="col-span-4 md:col-span-6 text-xs pt-7 pb-3">Thai</div> 20151 </div> 20152 </div> 20153</section> 20154 20155 <!-- Detailed Information --> 20156<section class="md:ml-[132px] px-4 flex mb-8 md:mb-11"> 20157 <!-- Partial Width Content Area With Section Nav --> 20158 <!-- Section Nav Area --> 20159 <div class="hidden md:block ml-4 w-[120px] h-1/2 text-xs sticky" data-component="sticky-subnav"> 20160 <div class="flex flex-col justify-center h-full"> 20161 <h3 class="text-lg">Colophon</h3> 20162 </div> 20163 </div> 20164 <!-- Main Content Area --> 20165 <div class="md:ml-[35px] md:mr-4 w-full grid-setup"> 20166 <!-- Left Column on Desktop --> 20167 <div class="col-span-4 md:col-span-4 text-xs"> 20168 <div class="w-full"> 20169 <div class="pb-5">Website</div> 20170 <p class="leading-[1.3]"> 20171 Creative direction and artwork by Grilli Type. Website layout designed 20172 by 20173 <a href="https://jacobheftmann.com" class="underline" target="_blank">Jacob Heftmann</a>. 3d scenes modeled and animated by 20174 <a href="https://jonasbaun.com/" class="underline" target="_blank">Jonas Baun</a> 20175 with textures by Grilli Type. Illustrations drawn by Grilli Type and 20176 animated by 20177 <a href="https://www.instagram.com/joshschaub.ch" class="underline" target="_blank">Josh Schaub</a>. Development by Grilli Type with heavy support by 20178 <a href="https://www.isjackwild.com" class="underline" target="_blank">Jack Wild</a>. Many thanks to 20179 <a href="https://www.arphic.com.tw/en/" class="underline" target="_blank">Arphic</a> 20180 and 20181 <a href="https://typeproject.com" class="underline" target="_blank">Type Project</a> 20182 for partnering with us on matching GT America to the Chinese and 20183 Japanese writing systems. 20184 </p> 20185 </div> 20186 </div> 20187 20188 <!-- Middle Column on Desktop --> 20189 <div class="col-span-4 md:col-span-4 text-xs"> 20190 <div class="w-full"> 20191 <div class="pb-5">Licensing</div> 20192 <p class="leading-[1.3]"> 20193 Questions about licensing? Check out 20194 <a href="https://www.grillitype.com/information" class="underline" target="_blank">our FAQ</a> 20195 for more information about our fonts, licensing, and shop. Please 20196 email us for any other questions; for example, to find out about the 20197 worldâs cutest dog. 20198 </p> 20199 </div> 20200 </div> 20201 20202 <!-- Right Column on Desktop --> 20203 <div class="col-span-4 md:col-span-4 text-xs"> 20204 <div class="w-full"> 20205 <div class="pb-5">More Scripts</div> 20206 <p class="leading-[1.3]"> 20207 Are you looking for GT America in even more writing systems? As this 20208 website shows in ample detail, we love to add support for writing 20209 systems from around the globe. You can 20210 <a href="/cdn-cgi/l/email-protection#5a373b33361a3d28333636332e232a3f74393537" class="underline" target="_blank">email us</a> 20211 to inquire about opportunities to cover all languages your project 20212 might require support for. 20213 </p> 20214 </div> 20215 </div> 20216 </div> 20217</section> 20218 20219 <!-- Detailed Information --> 20220<section class="md:ml-[132px] px-4 flex mb-8 md:mb-12"> 20221 <!-- Partial Width Content Area With Section Nav --> 20222 <!-- Section Nav Area --> 20223 <div class="hidden md:block ml-4 w-[120px] h-1/2 text-xs sticky" data-component="sticky-subnav"> 20224 <div class="flex flex-col justify-center h-full"> 20225 <h3 class="text-lg">More from Grilli Type</h3> 20226 </div> 20227 </div> 20228 <!-- Main Content Area --> 20229 <div class="md:ml-[35px] md:mr-4 md:w-2/3"> 20230 <ul class="md:columns-2 text-xl md:text-2xl"> 20231 <li> 20232 <a href="https://www.gt-pressura.com" class="hover:text-black leading-[1.6]"><img src="/flag-1.46b5e2e0.png" class="inline pr-3 pb-2 h-[1.25em]"> 20233 GT Pressura</a> 20234 </li> 20235 <li> 20236 <a href="https://www.gt-planar.com" class="hover:text-black leading-[1.6]"><img src="/flag-2.4ea780a1.png" class="inline pr-3 pb-2 h-[1.25em]"> 20237 GT Planar</a> 20238 </li> 20239 <li>
20240 <a href="https://www.gt-ultra.com" class="hover:text-black leading-[1.6]"><img src="/flag-3.1dda6584.png" class="inline pr-3 pb-2 h-[1.25em]"> 20241 GT Ultra</a> 20242 </li> 20243 <li> 20244 <a href="https://www.gt-maru.com" class="hover:text-black leading-[1.6]"><img src="/flag-4.2c8899c6.png" class="inline pr-3 pb-2 h-[1.25em]"> 20245 GT Maru</a> 20246 </li> 20247 <li> 20248 <a href="https://www.gt-flexa.com" class="hover:text-black leading-[1.6]"><img src="/flag-5.3edc558f.png" class="inline pr-3 pb-2 h-[1.25em]"> 20249 GT Flexa</a> 20250 </li> 20251 <li> 20252 <a href="https://www.gt-alpina.com" class="hover:text-black leading-[1.6]"><img src="/flag-6.fbb301f8.png" class="inline pr-3 pb-2 h-[1.25em]"> 20253 GT Alpina</a> 20254 </li> 20255 <li> 20256 <a href="https://www.gt-zirkon.com" class="hover:text-black leading-[1.6]"><img src="/flag-7.99eb68d4.png" class="inline pr-3 pb-2 h-[1.25em]"> 20257 GT Zirkon</a> 20258 </li> 20259 <li> 20260 <a href="https://www.gt-super.com" class="hover:text-black leading-[1.6]"><img src="/flag-8.2e3e3628.png" class="inline pr-3 pb-2 h-[1.25em]"> 20261 GT Super</a> 20262 </li> 20263 <li> 20264 <a href="https://www.gt-walsheim.com" class="hover:text-black leading-[1.6]"><img src="/flag-9.c7e2bbcc.png" class="inline pr-3 pb-2 h-[1.25em]"> 20265 GT Walsheim</a> 20266 </li> 20267 <li> 20268 <a href="https://www.gt-eesti.com" class="hover:text-black leading-[1.6]"><img src="/flag-10.de8db4f0.png" class="inline pr-3 pb-2 h-[1.25em]"> 20269 GT Eesti</a> 20270 </li> 20271 <li> 20272 <a href="https://www.gt-cinetype.com" class="hover:text-black leading-[1.6]"><img src="/flag-11.32e12044.png" class="inline pr-3 pb-2 h-[1.25em]"> 20273 GT Cinetype</a> 20274 </li> 20275 <li> 20276 <a href="https://www.gt-haptik.com" class="hover:text-black leading-[1.6]"><img src="/flag-12.79e28d2e.png" class="inline pr-3 pb-2 h-[1.25em]"> 20277 GT Haptik</a> 20278 </li> 20279 <li> 20280 <a href="https://www.grillitype.com/typeface/gt-sectra" class="hover:text-black leading-[1.6]"><img src="/flag-13.b27f199c.png" class="inline pr-3 pb-2 h-[1.25em]"> 20281 GT Sectra</a> 20282 </li> 20283 </ul> 20284 </div> 20285</section> 20286 20287<!-- 20288 20289 Other minisite links copied over from Pressura site 20290 20291 <div class="col-span-12 flex flex-row flex-wrap text-xl font-ext-regular text-center mb-8"> 20292 <a 20293 href="https://www.gt-planar.com" 20294 class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]" 20295 >GT Planar</a 20296 > 20297 <a 20298 href="https://www.gt-ultra.com" 20299 class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]" 20300 >GT Ultra</a 20301 > 20302 <a 20303 href="https://www.gt-maru.com" 20304 class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]" 20305 >GT Maru</a 20306 > 20307 <a 20308 href="https://www.gt-flexa.com" 20309 class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]" 20310 >GT Flexa</a 20311 > 20312 <a 20313 href="https://www.gt-alpina.com" 20314 class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]" 20315 >GT Alpina</a 20316 > 20317 <a 20318 href="https://www.gt-zirkon.com" 20319 class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]" 20320 >GT Zirkon</a 20321 > 20322 <a 20323 href="https://www.gt-super.com" 20324 class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]" 20325 >GT Super</a 20326 > 20327 <a 20328 href="https://www.gt-walsheim.com" 20329 class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]" 20330 >GT Walsheim</a 20331 > 20332 <a 20333 href="https://www.gt-america.com" 20334 class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]" 20335 >GT America</a 20336 > 20337 <a 20338 href="https://www.gt-eesti.com" 20339 class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]" 20340 >GT Eesti</a 20341 > 20342 <a 20343 href="https://www.gt-cinetype.com" 20344 class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]" 20345 >GT Cinetype</a 20346 > 20347 <a 20348 href="https://www.gt-haptik.com" 20349 class="w-full md:w-[50%] lg:w-[33%] charset-single-char hover:text-white h-[2em] pt-[0.125em]" 20350 >GT Haptik</a 20351 > 20352 </div> --> 20353 20354 <!-- Final Links Section--> 20355<section class="md:ml-[132px] px-4 mb-9 flex flex-col"> 20356 <a href="https://www.grillitype.com/typeface/gt-america-intl-collection" class="w-full lg:w-5/6 bg-white text-red border-2 border-white md:text-2xl p-4 md:p-9 rounded-full flex justify-between hover:bg-red hover:text-white hover:border-2"> 20357 <span>Buy GT America Intl Licensing</span> 20358 <span>â</span> 20359 </a> 20360 <div class="w-full lg:w-5/6 pt-5 md:pt-7 flex flex-col md:flex-row md:justify-between"> 20361 <a href="https://www.grillitype.com/free-trial-fonts" class="flex-grow bg-red text-white border-2 border-white md:text-xl p-4 md:p-9 rounded-full flex justify-between hover:bg-white hover:text-red hover:border-2 md:mr-5">
20362 <span>Download Free Trial Fonts</span> 20363 <span>â</span> 20364 </a> 20365 <a href="/images/GT-America-Intl-Manual.pdf" class="flex-grow bg-red text-white border-2 border-white md:text-xl p-4 md:p-9 rounded-full flex justify-between hover:bg-white hover:text-red hover:border-2 md:ml-5 mt-5 md:mt-0"> 20366 <span>Download PDF Specimen</span> 20367 <span>â</span> 20368 </a> 20369 </div> 20370</section> 20371 20372<section class="flex self-center pointer-events-none z-50"> 20373 <!-- Full Width Content Area --> 20374 <div data-component="section-scene" data-autoplay-until="0" data-start-scroll-offset="0.33" data-end-scroll-offset="0.33" data-src="/models/footer/footer-v006/footer-v006.gltf" data-src-mobile="/models/footer/footer-mobile-v002/footer-mobile-v002.gltf" class="flex self-center justify-center h-[200vh] md:h-[200vh] w-full -mt-[108vh] md:-mt-[108vh] overflow-visible"></div> 20375</section> 20376 20377</section>
vendor: 112 bytes, lines 20377-20379
20377 20378 20379 <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
20379<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"041031cfa4c948a49d9d2d4106a471bf","r":1,"spa":2}' crossorigin="anonymous"></script>
20379 20380</body> 20381</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.