Thai script loop flowchart
Prompt
``` # The Contemporary Effects of Loops: Studying the implications of this unique feature of the Thai script Research by Héctor Mangas Three experiments were conducted to evaluate the effects of loops in the Thai script. These looked at reading performance (distance reading acuity, continuous reading performance and comprehension), and the explicit perception of text (connotations produced by the loops). The debate over looped and loopless fonts in Thai typography has been a long-standing discussion among designers and font users. At the time of writing, there is no fundamental research to help make a clear decision about how loops affect both legibility and readers' attitudes. Do loops make text easier or harder to read? Does the reader's age influence their readability? Can we map how people feel about them? We decided to conduct a thorough three-fold study to answer these questions. The results provide an in-depth and novel insight into how this unique feature of the Thai script is perceived by its readers. **Three experiments were conducted in Bangkok during early 2024, with the help of 180 native Thai readers.** ## Measuring distance reading acuity (N=41) For this first experiment, we looked at how discernible letters are in the distance depending on the presence of loops. Materials We used three typefaces for this experiments. Two versions of Zed Text Thai were developed by Ekaluck Peanpanawate – one with loops and one without. Both fonts have low-contrast between the thickness of strokes, identical stroke weight, inter-letter spacing, and letter width, to ensure that the main difference between the fonts is absence or presence of the loops. The third test typeface was 'Thonburi', a very popular font in Thailand and Apple's iOS default typeface. We used this font as a control, as people are widely familiarised with it. With the help of Boom Suksumek, a list of 150 non-sense but pronounceable strings was prepared. Three similar-looking alternatives were written for each item using Punsongserm's map of visually similar Thai letterforms as a reference. Procedure Participants were asked to fixate on the centre of the display. A string of letters would appear centered at an initial point size of 1pt, increasing in size at a constant rate, reaching a maximum size of 250pt after 15 seconds. The participant was asked to press a button as soon as they could read the string. Two alternating noise masks would then appear for 0.5 seconds each, before the participant had to correctly choose the string among three similar-looking options. The screen was placed 2.5 metres away from the participant. The sample size was of 41 participants, with an average age of 34.5 years. They were recruited through convenience sampling, and all were native speakers of Thai. Results Our first experiment found that the **presence of loops makes a difference** in how quickly people can read Thai text. A repeated-measures ANOVA study was performed on the data. The main findings from this study were: ● The looped typeface was easier to read than both its loopless alternate and the Thonburi typeface. ● A person's age plays a significant role in how quickly they can read each typeface. But interestingly, age affected reading speed differently for each typeface: ○ Younger readers found Zed Text **Looped** more challenging to read. ○ Older readers had more difficulty with Zed Text **Loopless**. ○ Thonburi typeface seemed to be equally readable for all age groups. These results suggest that when choosing a typeface for distance reading, the age of the expected reader strongly matters. Results suggest looped text is better for older readers, while younger individuals read loopless text more efficiently. ## Measuring continuous reading performance (N=38) Building upon the previous distance reading experiment, the second study introduced a continuous reading task to further investigate the effects of loops on reading performance. This experiment assesses the impact of loops by measuring **reading speed**, **reading comprehension** and **response time** for the comprehension questions. Materials The same two Thai typefaces used in Experiment 1 were used to set the text in Experiment 2. A third very narrow looped Thai typeface was introduced (Typotheque's Greta Compressed), as previous literature shows text set in a very narrow typeface is slower and harder to read. Twenty-four extracts from popular Thai tales were selected by a native speaker. All were written in contemporary and simple-to-understand Thai, and were adapted to have a similar length (between 300 and 350 characters). A comprehension question with four multiple-choice answers was prepared for each passage. Procedure The participants sat one metre away from a larger 45-inch landscape display. The participant was asked to press a controller when they were ready to start reading. A cross would cue them to the first letter of the paragraph. After reading the stimuli, they were asked to press a key again to proceed to the comprehension question. Two noise masks were shown after the text to remove after image, for 0.5 seconds each. This task was repeated for the 24 texts. Additionally, a Tobii Pro Glasses 2 eye-tracker was used to confirm reading times. Results The data used in the analysis was reading time, reading comprehension and response times. Reading time was calculated as the average character reading time. A repeated-measures ANOVA study was performed on the data. The key findings from this study were: ● A small significant difference was found between looped and loopless text, in favour of looped. ● The harder to read typeface, Greta Compressed, was significantly outperformed by both Zed Text Looped and Loopless, proving the method's capacity to appropriately measure difference. ● Age did not affect the results for any typeface. No differences in reading comprehension or response times were found between text conditions. ## Measuring attitude toward loops (N=139) Last, to analyse beyond performance, we were also interested in measuring the perceptual consequences caused by loops. To achieve this, we designed a survey study, which was distributed online, divided in these two parts: ● **Part 1: Implicit measurements.** To understand how individuals feel about loops, _implicitly._ ● **Part 2: Explicit measurements.** To understand if people _explicitly_ prefer looped or loopless text. Materials We expected the attitude toward loops to be influenced by the application of the text. Therefore, it was not appropriate to assess attitude toward loops using text in a vacuum. Six applications of text were chosen: Text in a book, text on a website, text on a poster, text on branding material, text on a car's infotainment user interface and text on a smart watch's user interface. Part 1: Implicit measurements Participants were shown the 12 graphics (six for looped and six for loopless) in a random order. For each graphic, the participant was asked to complete questions about readability (rating 1 to 100) and choose labels that apply to this text from: modern, classical, fun, boring, familiar, youthful, old-fashioned, formal, artistic, elegant, ugly, honest, untrustworthy and unusual. Part 2: Explicit measurements After rating the 12 texts, these were shown again, now in pairs. For this part, looped and loopless sat side by side, and participants were asked to use a 1–100 slider to show their preference for either. Sampling A total of 139 participants (average age of 42.6 years, in the range 20–70 years) completed an online survey. Participants were recruited via convenience sampling, as well as through two direct sources. Results It was observed that loops strongly influence a feeling of readability, regardless of the format of text the looped text is present in. This effect was not mediated by age, indicating that people of all ages perceive text with loops as significantly more readable. We observed that by removing and including loops, the connotations of each text would change. This was particularly interesting where antonyms were used, such as 'modern' and 'classical', which showed strongly opposing results. It was also interesting to see that 'honest' and 'untrustworthy' showed somewhat similar opposing effects, as well as 'familiar' and 'unusual'. ## Final remarks **The results from this research provide a snapshot into the contemporary perception of Thai loops. Remarkably, the findings indicate that users are definitely not indifferent to this feature.** When it comes to paragraph reading, our results strongly support the notion that looped text is beneficial for paragraph reading. Participants read looped text significantly faster than the same text without loops. Moreover, when surveyed, Thai readers reported that the presence of loops eases their reading, and they prefer looped text for longer reading sessions. For paragraph reading, it is therefore strongly recommended to use looped Thai over loopless. But using looped text comes at a cost. Participants surveyed show a solid association with loops: They are strongly linked to tradition. Whilst looped text elicited the use of labels like "classical" and "formal", its loopless counterpart was more often associated with words like "modern" and "unusual". **Preference for looped over loopless text was shown to depend on two factors: The age of the reader and the type of text. For settings where more text is presented, looped is preferred for all users. Loopless was only preferred by younger participants in settings where less text was present.** But the most surprising of our findings pertains to the effects of age in reading acuity. Whilst participants showed overall improved readability in the presence of loops, a different story is told when it comes to reading acuity. Here, our research shows that, whilst older participants decipher looped better than loopless, younger participants discern loopless text better than looped. We believe this is proof of the changing typographic landscape of Thailand, which has seen an increased use of loopless in recent years. We hypothesize that younger readers learnt to read in a typographic landscape with much more presence of loopless text. Older participants did not have the same amount of exposure, as loopless text was popularized in the 90s. What is clear is that this research empirically confirms the general notion that Thai loops are linked to increased readability. The knowledge generated by this study will hopefully help the design community take more informed decisions in regards to loops. Additionally, we hope that this work will spark more legibility research on World scripts, which have been heavily neglected by the normally Latin-centric scientific community. ``` Create a practical flowchart web app for designers to decide when to use looped vs. loopless Thai fonts, based on the findings above.
A system prompt was added to support web rendering
# Thai Font Selection Flowchart
I'll create an interactive flowchart that helps designers choose between looped and loopless Thai fonts based on the research findings. This web app will guide users through a series of questions to recommend the optimal font choice.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thai Font Selection Flowchart</title>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'IBM Plex Sans', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
color: #2c3e50;
line-height: 1.6;
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background: white;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
h1 {
color: #1a5fb4;
margin-bottom: 10px;
font-size: 2.2rem;
}
.subtitle {
color: #5a7a9c;
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
}
.flowchart-container {
background: white;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
padding: 30px;
margin-bottom: 30px;
}
.step {
display: none;
padding: 20px;
border-radius: 10px;
background: #f8fafc;
border-left: 4px solid #1a5fb4;
margin-bottom: 25px;
animation: fadeIn 0.5s ease;
}
.step.active {
display: block;
}
.step h2 {
color: #1a5fb4;
margin-bottom: 15px;
font-size: 1.5rem;
}
.options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
margin-top: 20px;
}
.option-btn {
background: white;
border: 2px solid #e2e8f0;
border-radius: 8px;
padding: 18px 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
font-size: 1rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}
.option-btn:hover {
border-color: #1a5fb4;
background: #f0f7ff;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(26, 95, 180, 0.1);
}
.option-btn:active {
transform: translateY(0);
}
.result {
text-align: center;
padding: 40px 20px;
}
.result h2 {
font-size: 1.8rem;
margin-bottom: 25px;
color: #1a5fb4;
}
.font-display {
font-size: 3rem;
margin: 30px 0;
padding: 20px;
border-radius: 10px;
background: #f0f7ff;
font-weight: bold;
}
.looped {
font-family: "Leelawadee UI", sans-serif;
}
.loopless {
font-family: "Tahoma", sans-serif;
}
.explanation {
background: #e8f4ff;
padding: 25px;
border-radius: 10px;
margin: 30px 0;
text-align: left;
}
.explanation h3 {
color: #1a5fb4;
margin-bottom: 15px;
}
.restart-btn {
background: #1a5fb4;
color: white;
border: none;
padding: 14px 30px;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease;
box-shadow: 0 4px 10px rgba(26, 95, 180, 0.3);
}
.restart-btn:hover {
background: #154a8f;
transform: translateY(-2px);
}
.progress-container {
margin-bottom: 30px;
}
.progress-bar {
height: 10px;
background: #e2e8f0;
border-radius: 5px;
overflow: hidden;
}
.progress {
height: 100%;
background: #1a5fb4;
width: 0%;
transition: width 0.5s ease;
}
.step-indicator {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-size: 0.9rem;
color: #718096;
}
.footer {
text-align: center;
padding: 20px;
color: #718096;
font-size: 0.9rem;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.container {
padding: 10px;
}
.flowchart-container {
padding: 20px;
}
.options {
grid-template-columns: 1fr;
}
.font-display {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Thai Font Selection Flowchart</h1>
<p class="subtitle">Based on "The Contemporary Effects of Loops: Studying the implications of this unique feature of the Thai script" by Héctor Mangas</p>
</header>
<div class="flowchart-container">
<div class="progress-container">
<div class="progress-bar">
<div class="progress" id="progress"></div>
</div>
<div class="step-indicator">
<span>Start</span>
<span>Result</span>
</div>
</div>
<!-- Step 1: Reading Distance -->
<div class="step active" id="step1">
<h2>What is the reading distance?</h2>
<p>Consider where your text will be viewed from:</p>
<div class="options">
<div class="option-btn" data-next="2" data-value="close">Close reading (within 1 meter)</div>
<div class="option-btn" data-next="2" data-value="distance">Distance reading (beyond 1 meter)</div>
</div>
</div>
<!-- Step 2: Amount of Text -->
<div class="step" id="step2">
<h2>How much text will be displayed?</h2>
<p>Consider the typical reading length:</p>
<div class="options">
<div class="option-btn" data-next="3" data-value="short">Short text (few words/sentences)</div>
<div class="option-btn" data-next="3" data-value="long">Long text (paragraphs or pages)</div>
</div>
</div>
<!-- Step 3: Reader Age Group -->
<div class="step" id="step3">
<h2>What is the primary age group of your readers?</h2>
<p>Consider the demographics of your audience:</p>
<div class="options">
<div class="option-btn" data-next="result" data-value="young">Primarily young readers (under 35)</div>
<div class="option-btn" data-next="result" data-value="old">Primarily older readers (35 and above)</div>
<div class="option-btn" data-next="result" data-value="mixed">Mixed age group</div>
</div>
</div>
<!-- Results -->
<div class="step" id="result">
<div class="result">
<h2>Recommended Font Style</h2>
<div class="font-display looped" id="fontExample">Looped Thai Text</div>
<div class="explanation">
<h3>Research-Based Insight</h3>
<p id="explanation">Based on your selections, looped Thai fonts are recommended for better readability and user preference.</p>
</div>
<button class="restart-btn" onclick="restartFlowchart()">Start Over</button>
</div>
</div>
</div>
<div class="footer">
<p>Based on research conducted in Bangkok, 2024 with 180 native Thai readers</p>
</div>
</div>
<script>
// Track user selections
let selections = {};
let currentStep = 1;
const totalSteps = 3;
// Progress bar update
function updateProgress() {
const progress = (currentStep - 1) / totalSteps * 100;
document.getElementById('progress').style.width = `${progress}%`;
}
// Show the next step
function showStep(stepNumber) {
// Hide all steps
document.querySelectorAll('.step').forEach(step => {
step.classList.remove('active');
});
// Show current step
document.getElementById(`step${stepNumber}`).classList.add('active');
currentStep = stepNumber;
updateProgress();
}
// Handle option click
document.querySelectorAll('.option-btn').forEach(button => {
button.addEventListener('click', function() {
const nextStep = this.getAttribute('data-next');
const value = this.getAttribute('data-value');
// Store selection
const step = this.closest('.step').id;
const stepNumber = step.replace('step', '');
selections[stepNumber] = value;
// Navigate to next step or result
if (nextStep === 'result') {
determineResult();
showStep('result');
} else {
showStep(parseInt(nextStep));
}
});
});
// Determine final result based on selections
function determineResult() {
let fontType = 'looped';
let explanation = '';
// Decision logic based on research findings
if (selections[1] === 'distance') {
// Distance reading
if (selections[3] === 'young') {
fontType = 'loopless';
explanation = "For distance reading with younger audiences, loopless fonts are slightly easier to read. However, consider your design context as looped fonts may still be preferred for longer texts.";
} else if (selections[3] === 'old') {
fontType = 'looped';
explanation = "For distance reading with older audiences, looped fonts provide significantly better readability according to research findings.";
} else {
fontType = 'looped';
explanation = "For distance reading with mixed age groups, looped fonts are generally more readable and preferred by users of all ages.";
}
} else {
// Close reading
if (selections[2] === 'long') {
fontType = 'looped';
explanation = "For close reading with longer texts, looped fonts are strongly recommended as they improve reading speed and reduce eye fatigue.";
} else {
// Short text
if (selections[3] === 'young') {
fontType = 'loopless';
explanation = "For short texts with younger readers, loopless fonts are preferred for their modern appearance and slight readability advantage.";
} else if (selections[3] === 'old') {
fontType = 'looped';
explanation = "For short texts with older readers, looped fonts are strongly preferred due to better readability and familiarity.";
} else {
fontType = 'looped';
explanation = "For short texts with mixed age groups, looped fonts are generally preferred by users of all ages for both readability and aesthetic reasons.";
}
}
}
// Update display
const fontExample = document.getElementById('fontExample');
const explanationElement = document.getElementById('explanation');
if (fontType === 'looped') {
fontExample.textContent = 'Looped Thai Text';
fontExample.className = 'font-display looped';
} else {
fontExample.textContent = 'Loopless Thai Text';
fontExample.className = 'font-display loopless';
}
explanationElement.textContent = explanation;
}
// Restart the flowchart
function restartFlowchart() {
selections = {};
currentStep = 1;
updateProgress();
showStep(1);
}
// Initialize progress bar
updateProgress();
</script>
</body>
</html>
```
## Features of this Thai Font Selection Flowchart:
1. **Research-Based Decision Making**: The flowchart logic is based on the actual findings from Héctor Mangas' study
2. **User-Friendly Interface**: Clean design with intuitive navigation
3. **Responsive Design**: Works well on both desktop and mobile devices
4. **Visual Progress Indicator**: Shows users their progress through the decision process
5. **Immediate Visual Feedback**: Shows the recommended font style with a visual example
6. **Contextual Explanations**: Provides research-backed explanations for each recommendation
7. **Three Key Decision Points**:
- Reading distance (close vs. distance)
- Amount of text (short vs. long)
- Reader age group (young vs. old vs. mixed)
The flowchart implements the key findings from the research:
- Looped fonts are better for older readers and distance reading
- Loopless fonts may be preferred by younger readers for short texts
- Looped fonts are generally preferred for longer texts regardless of age
- Users associate looped fonts with tradition and readability
- Users associate loopless fonts with modernity
To use the flowchart, simply answer the three questions about your design context, and the app will recommend the most appropriate Thai font style based on the research findings.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Thai Loops Decision Helper</title>
<!-- Mermaid for the visual flow-chart ------------------------------------>
<script type="module">
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
mermaid.initialize({ startOnLoad:true, theme:"base", securityLevel:"loose"});
</script>
<style>
*{box-sizing:border-box;font-family:system-ui,Helvetica,Arial,sans-serif}
body{margin:0;display:flex;flex-direction:column;height:100vh}
header{background:#181818;color:#fff;padding:0.8rem 1.2rem;font-size:1.2rem}
main{flex:1;display:flex;overflow:hidden}
#chart-area{flex:1 1 60%;min-width:300px;overflow:auto;padding:1rem;border-right:1px solid #ddd}
#wizard-area{flex:1 1 40%;min-width:260px;display:flex;flex-direction:column}
#wizard{padding:1rem;overflow:auto}
.step{display:none}
.step.active{display:block}
.buttons{margin-top:1rem;display:flex;justify-content:space-between}
button{padding:0.5rem 1rem;border:none;border-radius:4px;background:#0057e7;color:#fff;cursor:pointer}
button[disabled]{opacity:.45;cursor:not-allowed}
#result-box{border:2px solid #0057e7;border-radius:6px;padding:1rem;background:#f4faff}
.tag{display:inline-block;margin:2px 4px;padding:2px 6px;font-size:0.75rem;border-radius:4px;background:#0057e7;color:#fff}
footer{padding:.35rem 1rem;font-size:.75rem;background:#f7f7f7;text-align:center;color:#666}
h2{margin-top:0;font-size:1.1rem}
</style>
</head>
<body>
<header>Thai Looped vs Loopless – Practical Decision Helper</header>
<main>
<!-- 1. Flow-chart ------------------------------------------------------->
<div id="chart-area">
<h2>Visual Overview</h2>
<div class="mermaid">
flowchart TD
A([Start]) --> B{Amount of text?}
B -->|Paragraph / Body copy| L1([Use Looped])
B -->|Short / UI / Display| C{Primary audience age?}
C -->|35 or older| L2([Use Looped])
C -->|18–34| D{Desired tone?}
D -->|Modern / Edgy| N1([Use Loopless])
D -->|Formal / Traditional| L3([Use Looped])
click L1 callback "Looped recommended for comfortable paragraph reading."
click L2 callback "Older readers decode loops faster at all distances."
click L3 callback "Loops reinforce formality and readability."
click N1 callback "Loopless supports modern tone and younger preference."
</div>
</div>
<!-- 2. Interactive Wizard --------------------------------------------->
<div id="wizard-area">
<h2>🔧 Interactive Assistant</h2>
<div id="wizard">
<!-- Step 1 -->
<div class="step active" data-step="1">
<p><b>1 / 4 – What will the text mainly be used for?</b></p>
<label><input type="radio" name="amount" value="paragraph"> Long passages (paragraphs, articles, books, signage sentences)</label><br>
<label><input type="radio" name="amount" value="short"> Short fragments (UI labels, headlines, branding, buttons)</label>
</div>
<!-- Step 2 -->
<div class="step" data-step="2">
<p><b>2 / 4 – How far away will it usually be read?</b></p>
<label><input type="radio" name="distance" value="far"> Mostly farther than 2 m (posters, way-finding, billboards)</label><br>
<label><input type="radio" name="distance" value="near"> Mostly closer than 2 m (mobile, desktop, print hand-held)</label>
</div>
<!-- Step 3 -->
<div class="step" data-step="3">
<p><b>3 / 4 – Who is the primary audience?</b></p>
<label><input type="radio" name="age" value="younger"> Predominantly 18–34 years</label><br>
<label><input type="radio" name="age" value="older"> Predominantly 35 years +</label><br>
<label><input type="radio" name="age" value="mixed"> Mixed / unknown</label>
</div>
<!-- Step 4 -->
<div class="step" data-step="4">
<p><b>4 / 4 – Which tone fits the project best?</b></p>
<label><input type="radio" name="tone" value="modern"> Modern, innovative, edgy</label><br>
<label><input type="radio" name="tone" value="formal"> Formal, classical, trustworthy</label>
</div>
<!-- Buttons -->
<div class="buttons">
<button id="prevBtn" disabled>Back</button>
<button id="nextBtn">Next</button>
</div>
<!-- Result -->
<div id="result-box" style="display:none;margin-top:1rem"></div>
</div>
</div>
</main>
<footer>Based on “The Contemporary Effects of Loops” (H. Mangas, 2024). This tool condenses key findings; always prototype and user-test in context.</footer>
<script>
const steps = [...document.querySelectorAll('.step')];
let current = 0;
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const resultBox = document.getElementById('result-box');
function showStep(i){
steps[current].classList.remove('active');
current = i;
steps[current].classList.add('active');
prevBtn.disabled = current === 0;
nextBtn.textContent = current === steps.length-1 ? 'Get recommendation' : 'Next';
}
prevBtn.addEventListener('click',()=>showStep(current-1));
nextBtn.addEventListener('click', ()=>{
// when on last step, evaluate
if(current === steps.length-1){
recommend();
}else{
// ensure selection made
const selected = steps[current].querySelector('input:checked');
if(!selected){alert('Please make a choice to continue.');return;}
showStep(current+1);
}
});
function recommend(){
// gather answers
const amount = document.querySelector('input[name="amount"]:checked')?.value;
const distance = document.querySelector('input[name="distance"]:checked')?.value;
const age = document.querySelector('input[name="age"]:checked')?.value;
const tone = document.querySelector('input[name="tone"]:checked')?.value;
if(!amount||!distance||!age||!tone){alert('Please answer every question.');return;}
// decision logic
let choice = 'looped';
let reasons = [];
if(amount === 'paragraph'){choice='looped';reasons.push('Long passages are read faster with loops (Experiment 2).');}
else{ // short
if(age==='younger' && tone==='modern'){choice='loopless';reasons.push('Younger readers link loopless with modernity and read it well at short lengths (Survey & Experiment 1).');}
else if(age==='younger' && distance==='far'){choice='loopless';reasons.push('At distance, younger readers recognise loopless slightly faster (Experiment 1).');}
else if(age==='older'){choice='looped';reasons.push('Older readers identify looped glyphs quicker, even at distance (Experiment 1).');}
else if(tone==='formal'){choice='looped';reasons.push('Loops convey formal/classical connotations (Survey Part 1).');}
else{choice='loopless';reasons.push('Loopless aligns with requested modern tone.');}
}
// Adjust reasons for mixed/extra
if(age==='mixed'){
if(choice==='loopless'){
reasons.push('Mixed audiences still perceive looped as more readable; consider A/B testing.');
}
}
// build result
resultBox.innerHTML = `
<h3>Recommendation: <span style="color:${choice==='looped'?'#0057e7':'#d6004e'}">${choice==='looped'?'Use LOOPED Thai':'Use LOOPLESS Thai'}</span></h3>
${reasons.map(r=>'<div class="tag">'+r+'</div>').join('<br>')}
<p style="margin-top:0.6rem"><small>Tip: Always verify with real users in your exact context (device, lighting, distance).</small></p>
`;
resultBox.style.display='block';
nextBtn.disabled=true;
prevBtn.disabled=true;
}
// Make Mermaid nodes clickable show alert
function callback(message){alert(message);}
</script>
</body>
</html>
```Drag to resize
An interactive flowchart to help you choose the right Thai font style based on research findings.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thai Font Chooser</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&display=swap" rel="stylesheet">
<style>
:root {
--bg-color: #f4f6f9;
--card-bg: #ffffff;
--text-color: #1a202c;
--light-text-color: #4a5568;
--accent-color: #4299e1;
--accent-light: #ebf8ff;
--looped-color: #38a169;
--loopless-color: #dd6b20;
--border-color: #e2e8f0;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
margin: 0;
padding: 2rem;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
}
.container {
width: 100%;
max-width: 700px;
text-align: center;
}
header h1 {
font-size: 2.5rem;
font-weight: 800;
color: var(--text-color);
margin-bottom: 0.5rem;
}
header p {
font-size: 1.1rem;
color: var(--light-text-color);
margin-bottom: 3rem;
}
.flow-step, .recommendation-card {
background-color: var(--card-bg);
border-radius: 12px;
padding: 2.5rem;
box-shadow: var(--shadow);
border: 1px solid var(--border-color);
margin-bottom: 2rem;
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.question {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 2rem;
}
.options {
display: flex;
flex-direction: column;
gap: 1rem;
}
.btn {
background-color: var(--card-bg);
color: var(--accent-color);
border: 2px solid var(--accent-color);
border-radius: 8px;
padding: 1rem 1.5rem;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease-in-out;
text-align: left;
display: flex;
flex-direction: column;
}
.btn:hover {
background-color: var(--accent-light);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn strong {
font-size: 1.1rem;
}
.btn_desc {
font-size: 0.9rem;
font-weight: 400;
color: var(--light-text-color);
margin-top: 0.25rem;
}
.recommendation-card {
text-align: left;
}
.recommendation-card .rec-title {
font-size: 1.75rem;
font-weight: 800;
margin: 0;
padding: 0.5rem 1rem;
border-radius: 6px;
display: inline-block;
color: #fff;
}
.rec-looped .rec-title { background-color: var(--looped-color); }
.rec-loopless .rec-title { background-color: var(--loopless-color); }
.recommendation-card .rec-subtitle {
margin-top: 1.5rem;
font-weight: 700;
font-size: 1.1rem;
color: var(--text-color);
}
.recommendation-card p {
color: var(--light-text-color);
line-height: 1.6;
}
.recommendation-card ul {
list-style-type: '✓ ';
padding-left: 1.5rem;
}
.recommendation-card li {
padding-left: 0.5rem;
margin-bottom: 0.5rem;
color: var(--light-text-color);
}
#reset-button-container {
display: flex;
justify-content: center;
}
.reset-btn {
background: none;
border: none;
color: var(--light-text-color);
font-weight: 700;
cursor: pointer;
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 1rem;
transition: background-color 0.2s;
}
.reset-btn:hover {
background-color: #e2e8f0;
color: var(--text-color);
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Thai Font Chooser</h1>
<p>Looped vs. Loopless? Make an informed decision for your project based on legibility and perception research.</p>
</header>
<main id="flowchart">
<!-- Step 1: Use Case -->
<div id="step-start" class="flow-step">
<h2 class="question">What is the primary use case for your text?</h2>
<div class="options">
<button class="btn" onclick="selectUseCase('long')">
<strong>Long-form / Paragraph Reading</strong>
<span class="btn_desc">e.g., Books, website articles, reports</span>
</button>
<button class="btn" onclick="selectUseCase('distance')">
<strong>Distance Reading</strong>
<span class="btn_desc">e.g., Signage, billboards, presentations</span>
</button>
<button class="btn" onclick="selectUseCase('short')">
<strong>Short Text / Display UI</strong>
<span class="btn_desc">e.g., Branding, posters, app UIs, smartwatches</span>
</button>
</div>
</div>
<!-- Step 2a: Distance Age -->
<div id="step-distance-age" class="flow-step" style="display: none;">
<h2 class="question">Who is the primary target audience?</h2>
<div class="options">
<button class="btn" onclick="selectDistanceAge('younger')">
<strong>Younger Readers</strong>
</button>
<button class="btn" onclick="selectDistanceAge('older')">
<strong>Older or Mixed-Age Readers</strong>
</button>
</div>
</div>
<!-- Step 2b: Short Text Connotation -->
<div id="step-short-connotation" class="flow-step" style="display: none;">
<h2 class="question">What is the desired brand personality or feeling?</h2>
<div class="options">
<button class="btn" onclick="selectShortConnotation('modern')">
<strong>Modern, Youthful, Artistic</strong>
</button>
<button class="btn" onclick="selectShortConnotation('classic')">
<strong>Classical, Formal, Elegant, Trustworthy</strong>
</button>
</div>
</div>
<!-- Recommendations -->
<div id="recommendations-container">
<div id="rec-long-form" class="recommendation-card rec-looped" style="display: none;">
<h3 class="rec-title">Use a Looped Font</h3>
<h4 class="rec-subtitle">Why?</h4>
<p>For continuous paragraph reading, looped fonts consistently outperform loopless ones.</p>
<ul>
<li><strong>Faster Reading:</strong> Readers process looped text significantly faster in long-form content.</li>
<li><strong>Higher Preference:</strong> Users of all ages report looped text feels easier to read and prefer it for longer sessions.</li>
</ul>
<p><strong>Recommendation:</strong> For paragraph text, it is highly recommended to use a looped Thai font for optimal readability and user comfort.</p>
</div>
<div id="rec-distance-younger" class="recommendation-card rec-loopless" style="display: none;">
<h3 class="rec-title">Use a Loopless Font</h3>
<h4 class="rec-subtitle">Why?</h4>
<p>For distance reading acuity, younger readers perform better with loopless Thai fonts.</p>
<ul>
<li><strong>Better Discernment:</strong> Younger participants could read loopless text from a distance more quickly and easily than looped text.</li>
<li><strong>Changing Landscape:</strong> This may reflect a generational shift, as younger readers grew up in a typographic environment with a greater presence of loopless fonts.</li>
</ul>
<p><strong>Recommendation:</strong> When designing signage or other distant text for a primarily young audience, a loopless font is more effective.</p>
</div>
<div id="rec-distance-older-mixed" class="recommendation-card rec-looped" style="display: none;">
<h3 class="rec-title">Use a Looped Font</h3>
<h4 class="rec-subtitle">Why?</h4>
<p>For distance reading, older readers and mixed-age groups benefit from the clarity of looped fonts.</p>
<ul>
<li><strong>Improved Legibility:</strong> Older readers deciphered looped text significantly better from a distance.</li>
<li><strong>Safe Default:</strong> Looped fonts showed better overall readability in the study, making them a safe and effective choice for a general audience.</li>
</ul>
<p><strong>Recommendation:</strong> For a general or older audience, use looped fonts for distance reading to ensure maximum legibility.</p>
</div>
<div id="rec-short-modern" class="recommendation-card rec-loopless" style="display: none;">
<h3 class="rec-title">Use a Loopless Font</h3>
<h4 class="rec-subtitle">Why?</h4>
<p>Loopless fonts are strongly associated with a modern aesthetic, making them ideal for contemporary branding and UIs.</p>
<ul>
<li><strong>Key Connotations:</strong> Associated with labels like "modern," "youthful," "artistic," and "unusual."</li>
<li><strong>Youth Preference:</strong> Younger users showed a preference for loopless fonts in settings with less text.</li>
</ul>
<p><strong>Recommendation:</strong> For projects aiming for a fresh, modern feel—especially targeting younger demographics—a loopless font is an excellent choice.</p>
</div>
<div id="rec-short-classic" class="recommendation-card rec-looped" style="display: none;">
<h3 class="rec-title">Use a Looped Font</h3>
<h4 class="rec-subtitle">Why?</h4>
<p>Looped fonts carry strong connotations of tradition, formality, and trust.</p>
<ul>
<li><strong>Key Connotations:</strong> Associated with labels like "classical," "formal," "elegant," "familiar," and even "honest."</li>
<li><strong>Perceived Readability:</strong> Across all contexts, users perceive looped text as more readable, which can enhance feelings of trust and stability.</li>
</ul>
<p><strong>Recommendation:</strong> For projects aiming for a sense of establishment, elegance, or trustworthiness, a looped font effectively communicates these values.</p>
</div>
</div>
<div id="reset-button-container" style="display: none;">
<button class="reset-btn" onclick="resetFlow()">Start Over</button>
</div>
</main>
</div>
<script>
function hideAllSteps() {
const steps = document.querySelectorAll('.flow-step');
steps.forEach(step => step.style.display = 'none');
}
function hideAllRecs() {
const recommendations = document.querySelectorAll('.recommendation-card');
recommendations.forEach(rec => rec.style.display = 'none');
}
function showElement(id) {
document.getElementById(id).style.display = 'block';
}
function selectUseCase(useCase) {
hideAllSteps();
if (useCase === 'long') {
showElement('rec-long-form');
showElement('reset-button-container');
} else if (useCase === 'distance') {
showElement('step-distance-age');
} else if (useCase === 'short') {
showElement('step-short-connotation');
}
}
function selectDistanceAge(age) {
hideAllSteps();
if (age === 'younger') {
showElement('rec-distance-younger');
} else { // 'older' or 'mixed'
showElement('rec-distance-older-mixed');
}
showElement('reset-button-container');
}
function selectShortConnotation(connotation) {
hideAllSteps();
if (connotation === 'modern') {
showElement('rec-short-modern');
} else { // 'classic'
showElement('rec-short-classic');
}
showElement('reset-button-container');
}
function resetFlow() {
hideAllSteps();
hideAllRecs();
document.getElementById('reset-button-container').style.display = 'none';
showElement('step-start');
}
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html>
<head>
<title>Thai Font Loop Decision Tool</title>
<style>
body {
font-family: sans-serif;
margin: 20px;
}
.container {
width: 80%;
margin: 0 auto;
border: 1px solid #ccc;
padding: 20px;
border-radius: 5px;
}
h1 {
text-align: center;
}
.question {
margin-bottom: 15px;
}
.answer-group {
margin-bottom: 10px;
}
button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #3e8e41;
}
#result {
margin-top: 20px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>Thai Font Loop Decision Tool</h1>
<div class="question">
<p><strong>1. What is the primary purpose of this text?</strong></p>
<div class="answer-group">
<button onclick="selectPurpose('distance')">Distance Reading (e.g., Signage, Large Format)</button>
</div>
<div class="answer-group">
<button onclick="selectPurpose('continuous')">Continuous Reading (e.g., Books, Articles, Websites)</button>
</div>
<div class="answer-group">
<button onclick="selectPurpose('branding')">Branding/Short Text (e.g., Logos, Headlines)</button>
</div>
</div>
<div id="ageQuestion" style="display:none;">
<div class="question">
<p><strong>2. Who is your target audience's age range?</strong></p>
<div class="answer-group">
<button onclick="selectAge('young')">Primarily under 30</button>
</div>
<div class="answer-group">
<button onclick="selectAge('old')">Primarily over 50</button>
</div>
<div class="answer-group">
<button onclick="selectAge('mixed')">Mixed age range</button>
</div>
</div>
</div>
<div id="result" style="display:none;"></div>
</div>
<script>
let purpose = null;
let age = null;
function selectPurpose(p) {
purpose = p;
document.getElementById("ageQuestion").style.display = "block";
// Hide the first question after selection
document.querySelectorAll('.question')[0].style.display = 'none';
document.querySelectorAll('.answer-group')[0].style.display = 'none';
}
function selectAge(a) {
age = a;
displayResult();
}
function displayResult() {
let recommendation = "";
document.getElementById("ageQuestion").style.display = "none";
document.getElementById("result").style.display = "block";
if (purpose === 'distance') {
if (age === 'young') {
recommendation = "<strong>Loopless font is recommended.</strong> Younger readers find loopless text easier to read at a distance.";
} else if (age === 'old') {
recommendation = "<strong>Looped font is recommended.</strong> Older readers find looped text easier to read at a distance.";
} else {
recommendation = "<strong>Consider testing both looped and loopless fonts with your target audience.</strong> A mixed audience benefits from clarity via testing.";
}
} else if (purpose === 'continuous') {
recommendation = "<strong>Looped font is strongly recommended.</strong> Readers consistently demonstrate faster reading speeds and improved comprehension with looped Thai fonts for continuous text.";
} else if (purpose === 'branding') {
recommendation = "<strong>Consider the desired aesthetic.</strong> Loops convey tradition and formality. Loopless fonts convey modernity and unusual aesthetic. Consider your overall brand identity.";
}
document.getElementById("result").innerHTML = recommendation;
}
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html>
<head>
<title>Thai Font Decision Flowchart</title>
>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 20px auto;
padding: 20px;
}
.question, .result {
background: #f5f5f5;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
}
button {
display: block;
width: 100%;
padding: 10px;
margin: 5px 0;
background: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
.result {
background: #e8f5e9;
}
</style>
>
</head>
<body<body>
<div id="question1" class="question">
<h2>What is the text's primary context??</h2>
<button onclick="selectContext('distance')">Distance Reading (sign, poster))</button>
>
<button onclick="selectContext('continuous')">Continuous Reading (book, article))</button>
>
<button onclick="selectContext('ui')">UI/Display (website, app))</button>
>
<button onclick="selectContext('branding')">Branding/Marketing (poster, logo))</button>
>
</div>
<div id="question2" class="question" style="display: none;">
<h2>Is the target audience mostly younger (under 35) or older (35+)?</h2>
<button onclick="selectAge('young')">Younger</button>
>
<button onclick="selectAge('older')">Older</button>
>
</div>
<div id="question3" class="question" style="display: none;">
<h2>Is a modern connotation important for this text??</h2>
<button onclick="selectConnotation('modern')">Yes</button>
>
<button onclick="selectConnotation('classical')">No</button>
>
</div>
<div id="result" class="result" style="display: none;">
<h2>Recommendation::</h2>
<p id="recommendation"> "></p>
</divdiv>
<script>
let context;
function selectContext(selected) {
context = selected;
document.getElementById('question1').style.display = 'none';
if (context === 'distance') {
document.getElementById('question2').style.display = 'block';
} else {
document.getElementById('question3').style.display = 'block';
}
}
function selectAge(age) {
document.getElementById('question2').style.display = 'none';
const recommendation = (age === 'young') ? 'Loopless' : 'Looped';
showResult(recommendation);
}
function selectConnotation(connotation) {
document.getElementById('question3').style.display = 'none';
const recommendation = (connotation === 'modern') ? 'Loopless' : 'Looped';
showResult(recommendation);
}
function showResult(recommendation) {
document.getElementById('recommendation').textContent = recommendation;
document.getElementById('result').style.display = 'block';
}
</script>
>
</body>
</htmlhtml>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Thai Typeface Decision Flowchart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Fonts for UI -->
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
background: #f8f9fa;
font-family: 'Roboto', Arial, sans-serif;
color: #24292f;
margin: 0;
padding: 0;
}
.wrapper {
max-width: 680px;
margin: 32px auto;
background: #fff;
border-radius: 14px;
box-shadow: 0 4px 26px rgba(24,32,51,0.08);
padding: 32px;
}
h1 {
font-family: 'Kanit', sans-serif;
text-align: center;
font-size: 2.2em;
color: #24292f;
margin-bottom: 18px;
}
.subtitle {
text-align: center;
color: #517088;
margin-bottom: 18px;
font-size: 1.15em;
}
.flow-step {
margin-bottom: 30px;
padding-bottom: 18px;
border-bottom: 1px dashed #eee;
}
.flow-step:last-child {
border-bottom: none;
}
.question {
font-size: 1.15em;
font-weight: 500;
}
.options {
margin-top: 15px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.option-btn {
appearance: none;
padding: 11px 22px;
border: 2px solid #d2d9e6;
border-radius: 9px;
background: #f5f7fa;
font-size: 1em;
cursor: pointer;
font-family: inherit;
color: #32373b;
transition: border 0.2s, background 0.2s;
}
.option-btn.selected,
.option-btn:hover {
border-color: #1754ed;
background: #eaf0fe;
color: #3057a7;
}
.recommendation {
text-align: center;
margin-top: 45px;
}
.recommendation strong {
font-size: 1.22em;
color: #1754ed;
}
.note {
font-size: 0.98em;
color: #7789a1;
margin-top: 12px;
text-align: center;
}
.start-over {
margin: 26px auto 0 auto;
display: block;
padding: 8px 22px;
background: #e7ebf5;
border-radius: 7px;
font-size: 1em;
border: none;
cursor: pointer;
color: #1754ed;
transition: background 0.2s;
font-family: inherit;
}
.start-over:hover {
background: #c8d6fc;
}
@media (max-width: 650px) {
.wrapper {
padding: 15px 6px 27px 6px;
}
.options {
flex-direction: column;
gap: 8px;
}
.option-btn {
width: 100%;
font-size: 1em;
padding: 10px 0;
}
}
/* Thai sample font demo */
.thai-sample {
font-family: 'Kanit', 'Sarabun', sans-serif;
font-size: 2em;
margin-top: 14px;
display: block;
letter-spacing: 0.01em;
}
.looped {
font-feature-settings: "loop" on;
}
.loopless {
font-feature-settings: "loop" off;
font-weight: 600;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Thai Typeface Decision Flowchart</h1>
<div class="subtitle">A practical guide to choosing <b>looped</b> vs <b>loopless</b> Thai fonts.<br>
<small>Based on Héctor Mangas (2024) and contemporary research.</small>
</div>
<div id="flow"></div>
<div id="result"></div>
</div>
<script>
// FLOWCHART LOGIC STRUCTURE
// Each step presents a question, options, and a mapping to next step or result
const FLOW = [
{
id: 'amount',
question: "How much text will the reader encounter?",
options: [
{ label: "Paragraphs/Long reading (e.g. articles, books, infotainment screens)", value: "paragraph" },
{ label: "Short snippets (e.g. buttons, labels, headings, UI, posters, branding)", value: "short" },
]
},
{
id: 'reader_age',
question: "What's the typical age group of your target readers?",
options: [
{ label: "Mostly younger (under ~35)", value: "young" },
{ label: "Mostly older (over ~35)", value: "old" },
{ label: "Mixed or all ages", value: "all" }
]
},
{
id: 'context',
question: "Is a 'traditional' or 'modern' visual tone more important for this project?",
options: [
{ label: "Traditional / Familiar / Elegant", value: "trad" },
{ label: "Modern / Fresh / Minimal", value: "modern" },
{ label: "Neutral / Doesn't matter", value: "neutral" }
]
}
];
// Decision mapping: key is [amount]-[age]-[visual]
// Each outcome includes: recommendation, reason, and a sample
const OUTCOMES = {
// Long text always: Looped recommended for everyone
'paragraph-young-trad': { type: 'looped', reason: "Looped fonts support faster, easier reading for all ages in long-form Thai text.", context: "This suits traditional tone even better." },
'paragraph-young-modern': { type: 'looped', reason: "Looped Thai is empirically superior for long, continuous reading, even for younger readers.", context: "If you wish to experiment with loopless, test reader comprehension carefully." },
'paragraph-young-neutral':{ type: 'looped', reason: "Looped fonts outperform loopless for paragraphs—benefit applies regardless of visual neutrality.", context: "" },
'paragraph-old-trad': { type: 'looped', reason: "Looped fonts are much more readable for older readers in long texts.", context: "" },
'paragraph-old-modern': { type: 'looped', reason: "Even if modernity is important, for older readers, looped is best for paragraphs.", context: "" },
'paragraph-old-neutral': { type: 'looped', reason: "Looped fonts are consistently preferable for all ages for long reading in Thai.", context: "" },
'paragraph-all-trad': { type: 'looped', reason: "Looped text supports broad demographic accessibility and reading fluency for longer texts.", context: "" },
'paragraph-all-modern': { type: 'looped', reason: "Despite the modern tone, for long text looped is better for all ages.", context: "" },
'paragraph-all-neutral': { type: 'looped', reason: "Looped Thai fonts maximize readability when text is long.", context: "" },
// Short text - younger
'short-young-trad': { type: 'looped', reason: "If tradition is valued—even in short contexts—looped may be preferred.", context: "Younger audiences may still appreciate loopless for modern look." },
'short-young-modern': { type: 'loopless', reason: "Younger readers find loopless fonts slightly easier in short contexts, and it aligns with a modern visual identity.", context: "" },
'short-young-neutral':{ type: 'loopless', reason: "If modernity or brevity is key, and audience is young, loopless is both legible and stylistically valid.", context: "" },
// Short text - older
'short-old-trad': { type: 'looped', reason: "Older readers are more comfortable and faster with looped fonts, even in short UI/branding elements.", context: "" },
'short-old-modern': { type: 'looped', reason: "For older readers, looped is still the preferred choice in short text due to readability.", context: "" },
'short-old-neutral':{ type: 'looped', reason: "Legibility for older audiences is stronger in looped fonts.", context: "" },
// Short text - all ages
'short-all-trad': { type: 'looped', reason: "To reinforce familiarity and clarity for all ages, choose looped.", context: "" },
'short-all-modern': { type: 'loopless', reason: "In short text for broad audiences, loopless works for modern tone and younger readers, while still readable for all.", context: "If you expect many older readers, test before committing." },
'short-all-neutral':{ type: 'looped', reason: "Looped is safest for universal comprehension; loopless is OK if most users are young and you want the modern look.", context: "" }
};
// Example Thai phrases for demo (with and without loops)
const THAI_SAMPLES = {
looped: 'เมื่อวานนี้ฉันไปห้องสมุด',
loopless: 'เมื่อวานนี้ฉันไปห้องสมุด'
};
// Keeps state of user choices
let answers = {};
const flowEl = document.getElementById('flow');
const resultEl = document.getElementById('result');
function resetFlow() {
answers = {};
flowEl.innerHTML = '';
resultEl.innerHTML = '';
renderStep(0);
window.scrollTo({top: 0, behavior: 'smooth'});
}
function renderStep(stepIndex) {
const step = FLOW[stepIndex];
if (!step) return;
const stepDiv = document.createElement('div');
stepDiv.className = 'flow-step';
const q = document.createElement('div');
q.className = 'question';
q.innerText = step.question;
stepDiv.appendChild(q);
const optionsDiv = document.createElement('div');
optionsDiv.className = 'options';
step.options.forEach(opt => {
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'option-btn';
btn.innerText = opt.label;
btn.onclick = () => {
// Visually indicate selection
[...optionsDiv.children].forEach(child => child.classList.remove('selected'));
btn.classList.add('selected');
// Record the value
answers[step.id] = opt.value;
// Remove following steps if going back
truncateTo(stepIndex + 1);
// Next step
if (stepIndex < FLOW.length - 1) {
renderStep(stepIndex + 1);
scrollIntoViewMiddle(flowEl.lastChild);
} else {
// Finished, show result
showResult();
scrollIntoViewMiddle(resultEl);
}
}
optionsDiv.appendChild(btn);
});
stepDiv.appendChild(optionsDiv);
// Remove old next steps if re-choosing
truncateTo(stepIndex);
flowEl.appendChild(stepDiv);
}
function truncateTo(num) {
while (flowEl.childNodes.length > num) {
flowEl.removeChild(flowEl.lastChild);
}
}
function scrollIntoViewMiddle(node) {
const y = node.getBoundingClientRect().top + window.scrollY - (window.innerHeight / 3);
window.scrollTo({ top: y, behavior: 'smooth' });
}
function showResult() {
// Construct key
const key = [
answers.amount,
answers.reader_age,
answers.context
].join('-');
let rec = OUTCOMES[key];
// Defensive fallback
if (!rec) {
rec = { type: 'looped', reason: "Default recommendation: use looped fonts for broad accessibility.", context: "" };
}
resultEl.innerHTML = `
<div class="recommendation">
<strong>Recommended: ${rec.type === 'looped' ? 'Looped Thai Font' : 'Loopless Thai Font'}</strong>
<p>${rec.reason}</p>
${rec.context ? `<div class="note">${rec.context}</div>` : ""}
<div style="margin: 16px 0 16px 0;">
<span class="thai-sample ${rec.type}">${THAI_SAMPLES[rec.type]}</span>
<span style="font-size:0.98em;color:#a3adc2;">ตัวอย่างฟอนต์${rec.type === 'looped' ? 'มีหาง' : 'ไม่มีหาง'}</span>
</div>
</div>
<button class="start-over" onclick="resetFlow()">Start Over</button>
`;
}
// On load: render first step
resetFlow();
</script>
</body>
</html>
```
Drag to resize
Here’s a complete HTML implementation of a practical flowchart web app for designers to decide when to use looped vs. loopless Thai fonts, based on the research findings. This app guides users through a series of questions to determine the best font choice for their specific use case.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thai Font Decision Flowchart</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.question {
font-size: 1.2em;
margin-bottom: 20px;
}
.options {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.option-btn {
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
transition: background-color 0.3s;
}
.option-btn:hover {
background-color: #0056b3;
}
.result {
font-size: 1.2em;
margin-top: 20px;
padding: 10px;
background-color: #e9ecef;
border-radius: 5px;
}
.flowchart {
display: none;
margin-top: 20px;
}
.flowchart.active {
display: block;
}
</style>
</head>
<body>
<div class="container">
<h1>Thai Font Decision Flowchart</h1>
<div id="flowchart">
<!-- Step 1: Text Length -->
<div class="step active" id="step1">
<div class="question">Is the text for a long reading session (e.g., paragraphs, books)?</div>
<div class="options">
<button class="option-btn" onclick="nextStep('step2', true)">Yes</button>
<button class="option-btn" onclick="nextStep('step3', false)">No</button>
</div>
</div>
<!-- Step 2: Reader Age (Long Text) -->
<div class="step" id="step2">
<div class="question">Are the readers primarily older (e.g., 40+ years)?</div>
<div class="options">
<button class="option-btn" onclick="showResult('Looped Thai Font (Better readability for older readers in long text)')">Yes</button>
<button class="option-btn" onclick="showResult('Looped Thai Font (Looped is generally better for long text)')">No</button>
</div>
</div>
<!-- Step 3: Text Application (Short Text) -->
<div class="step" id="step3">
<div class="question">What is the primary application of the text?</div>
<div class="options">
<button class="option-btn" onclick="nextStep('step4', 'branding')">Branding/Formal</button>
<button class="option-btn" onclick="nextStep('step4', 'modern')">Modern/Digital (e.g., websites, UI)</button>
</div>
</div>
<!-- Step 4: Reader Age (Short Text) -->
<div class="step" id="step4">
<div class="question" id="step4-question">Are the readers primarily younger (e.g., 20-30 years)?</div>
<div class="options">
<button class="option-btn" onclick="showResult(resultText(application, true))">Yes</button>
<button class="option-btn" onclick="showResult(resultText(application, false))">No</button>
</div>
</div>
<!-- Result Display -->
<div class="result" id="result"></div>
</div>
</div>
<script>
let application = '';
function nextStep(stepId, appType) {
document.querySelectorAll('.step').forEach(step => step.classList.remove('active'));
document.getElementById(stepId).classList.add('active');
if (appType) application = appType;
if (stepId === 'step4') {
document.getElementById('step4-question').innerText = `Are the readers primarily younger (e.g., 20-30 years) for ${application} text?`;
}
}
function resultText(app, isYounger) {
if (app === 'branding') {
return isYounger ? 'Loopless Thai Font (Modern and unusual connotation)' : 'Looped Thai Font (Classical and formal connotation)';
} else if (app === 'modern') {
return isYounger ? 'Loopless Thai Font (Better readability for younger users in modern contexts)' : 'Looped Thai Font (Preferred for readability in modern contexts)';
}
return 'Looped Thai Font (Default recommendation)';
}
function showResult(text) {
document.getElementById('result').innerText = `Recommendation: ${text}`;
document.querySelectorAll('.step').forEach(step => step.classList.remove('active'));
document.getElementById('result').classList.add('active');
}
</script>
</body>
</html>
```
### How It Works:
1. **Step 1**: Determines if the text is for long reading sessions (e.g., paragraphs, books). If yes, proceeds to **Step 2**. If no, proceeds to **Step 3**.
2. **Step 2**: Asks about the age of readers for long text. Recommends **Looped Thai Font** for older readers or as a general preference for long text.
3. **Step 3**: Asks about the primary application of short text (e.g., branding/formal or modern/digital). Proceeds to **Step 4**.
4. **Step 4**: Asks about the age of readers for short text. Recommends **Loopless Thai Font** for younger readers in modern contexts or branding, otherwise **Looped Thai Font**.
This app dynamically updates based on user inputs and provides a clear recommendation at the end. The flowchart logic is embedded in the HTML and JavaScript, making it easy to deploy and use.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Thai Loop Decision Flowchart</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
body{
margin:0;
font-family:'Inter',Helvetica,Arial,sans-serif;
background:#f5f7fa;
display:flex;
flex-direction:column;
align-items:center;
}
h1{
margin:24px 0 8px;
font-size:24px;
font-weight:700;
color:#222;
}
small{color:#888;}
#flowchart{
width:98%;
max-width:920px;
margin:24px auto;
}
.node{
background:#fff;
border:2px solid #ddd;
border-radius:14px;
padding:12px 16px;
font-size:14px;
text-align:center;
box-shadow:0 4px 12px rgba(0,0,0,.04);
cursor:pointer;
transition:transform .15s, box-shadow .15s, border .15s;
position:relative;
}
.node:hover{
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(0,0,0,.07);
}
.start, .question, .age, .audience{
border-width:0;
color:#fff;
}
.start{
background:#2f66ff;
}
.question{
background:#008060;
}
.age{
background:#ff8a00;
}
.audience{
background:#673ab7;
}
.leaf{
background:#f2f4f7;
border-color:#b9c1ce;
font-weight:600;
}
.leaf.looped{border-color:#00b894;}
.leaf.loopless{border-color:#ff5252;}
.tooltip{
font-weight:normal;
color:#444;
max-width:190px;
font-size:12px;
margin:4px auto 0;
line-height:1.3;
}
</style>
</head>
<body>
<h1>Thai Loop / Loopless Decision Helper</h1>
<small>Interactive flowchart based on the 2024 Bangkok reading-study</small>
<div id="flowchart"></div>
<!-- Load flowchart lib -->
<script src="https://cdn.jsdelivr.net/npm/orgchart@2.1.13/dist/js/orgchart.min.js"></script>
<script>
/* Nodes follow the documented findings:
- use loopless only if (a) reader is young AND (b) text display is small OR (c) task is acuity at distance
- otherwise looped is preferred for readability and user preference
*/
const data = [
{ id:'start', text:'Starting point', className:'start' },
/* Primary split */
{ id:'q1', text:'What is the amount of text?', className:'question',
tooltip:'Book, website, long paragraph → much text<br>Poster, brand tag, UI labels → short text' },
{ id:'q2', text:'What is the reader age group?', className:'age',
tooltip:'Distinction ≈ 35 years old from study data' },
{ id:'leaf1', text:'LOO<span style="text-decoration: underline;">PED</span><br>preferred universally', className:'leaf looped',
tooltip:'Large text blocks: all ages prefer loops & read faster (continuous reading study)' },
{ id:'leaf2', text:'LOO<span style="text-decoration: none;">PED</span><br>still preferred by older readers', className:'leaf looped',
tooltip:'Older readers (≥ ~35) need loops for acuity' },
{ id:'leaf3', text:'LOO<span style="text-decoration: none;">PLESS</span><br>can be used', className:'leaf loopless',
tooltip:'Younger readers decipher loopless quicker at distance AND prefer it for tiny snippets' },
{ id:'q3', text:'Is it for distance reading / acuity?', className:'audience',
tooltip:'Billboard or long-distance signage etc.' }
];
/* Connections */
const links = [
['start','q1'],
/* path much text */
['q1','leaf1'],
/* path short text */
['q1','q2'],
['q2','leaf2','1'], // if older
['q2','q3','2'], // if younger
['q3','leaf3','3'], // distance → loopless
['q3','leaf1','4'] // else → looped
];
/* Build JSON tree required by orgChart */
const tree = {};
data.forEach(n=>{ tree[n.id]=n; });
/* Init chart */
OrgChart.templates.simple = Object.assign({}, OrgChart.templates.simple);
OrgChart.templates.simple.node =
'<div class="node {{data.className}}">'+
'<span class="title">{{data.text}}</span><br>'+
'<span class="tooltip"><small>{{data.tooltip}}</small></span></div>';
new OrgChart(document.getElementById('flowchart'),{
template:'simple',
enableSearch:false,
scaleInitial: .9,
mouseScrool: OrgChart.action.none,
nodes: [{ id:'start' },
{ id:'q1', pid:'start' },
{ id:'q2', pid:'q1' },
{ id:'leaf1', pid:'q1' },
{ id:'leaf2', pid:'q2' },
{ id:'q3', pid:'q2' },
{ id:'leaf3', pid:'q3' }
],
links: links
});
/* Style elements outside template after creation */
setTimeout(()=>{
document.querySelectorAll('.leaf').forEach(el=>{
const title=el.querySelector('.title');
if(title) title.innerHTML=title.textContent
.replace('LOO<span style="text-decoration: underline;">PED</span>','<span style="color:#00b894;">LOO<span style="text-decoration:underline;">PED</span></span>')
.replace('LOO<span style="text-decoration: none;">PED</span>','<span style="color:#00b894;">LOOPED</span>')
.replace('LOO<span style="text-decoration: none;">PLESS</span>','<span style="color:#ff5252;">LOOLESS</span>');
});
},150);
</script>
</body>
</html>
```Drag to resize
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Thai Loops Decision Flowchart</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
:root{
--bg: #0f1221;
--panel: #171a2e;
--panel-2: #1e2240;
--ink: #e8ebff;
--sub: #b8bff0;
--accent: #7bd4ff;
--accent-2: #8af5c9;
--muted: #8990c2;
--warn: #ffd37b;
--bad: #ff8a8a;
--good: #8af5c9;
--edge: rgba(255,255,255,.15);
--edge-hi: #7bd4ff;
--shadow: 0 6px 24px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.25);
--radius: 14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
background: radial-gradient(1000px 600px at 15% -10%, #1b1f3f 0%, #0f1221 60%);
color: var(--ink);
}
a{color: var(--accent)}
header{
padding: 24px 24px 8px;
}
header h1{
margin:0 0 6px;
font-size: 22px;
letter-spacing:.2px;
}
header p{
margin:0;
color: var(--sub);
font-size: 14px;
line-height: 1.45;
max-width: 900px;
}
.wrap{
display:grid;
grid-template-columns: 360px 1fr;
gap: 16px;
padding: 16px 16px 24px;
}
@media (max-width: 1024px){
.wrap{grid-template-columns: 1fr}
}
.panel{
background: linear-gradient(180deg, var(--panel) 0%, #14172a 100%);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.panel h2{
margin:0 0 12px;
font-size: 16px;
letter-spacing:.2px;
}
.panel .body{
padding: 16px;
}
.controls .group{
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px dashed rgba(255,255,255,.08);
}
.controls .group:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.group label.legend{
display:block;
margin-bottom:8px;
color: var(--sub);
font-size: 13px;
letter-spacing:.2px;
}
.chips{
display:flex;
flex-wrap: wrap;
gap: 8px;
}
.chip{
border: 1px solid rgba(255,255,255,.12);
background: #14172a;
color: var(--ink);
padding: 8px 10px;
border-radius: 10px;
font-size: 13px;
cursor: pointer;
user-select:none;
transition: .18s ease all;
}
.chip[data-selected="true"]{
background: linear-gradient(180deg, #25305e 0%, #1b2249 100%);
border-color: #3a4aa0;
box-shadow: inset 0 0 0 1px rgba(123,212,255,.3), 0 4px 12px rgba(16,24,80,.45);
}
.chip input{display:none}
.inline{
display:flex;
gap: 8px;
align-items:center;
flex-wrap: wrap;
}
.note{
font-size: 12px;
color: var(--muted);
margin-top: 6px;
}
.switch{
position:relative;
display:inline-flex;
align-items:center;
gap:10px;
font-size:13px;
color: var(--sub);
}
.switch input{display:none}
.switch .track{
width: 42px;height: 24px;border-radius: 24px;background: #2a2e53;position:relative;border:1px solid rgba(255,255,255,.12)
}
.switch .thumb{
position:absolute;top:2px;left:2px;width: 18px;height: 18px;border-radius: 50%;background:#e8ebff;transition:.18s ease all
}
.switch input:checked + .track .thumb{left:22px}
.flow{
padding: 12px 12px 16px;
display:grid;
grid-template-columns: 1fr 380px;
gap: 12px;
}
@media (max-width: 1200px){
.flow{grid-template-columns: 1fr}
}
.flowchart{
background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
border:1px solid rgba(255,255,255,.08);
border-radius: var(--radius);
padding: 18px;
position:relative;
overflow:hidden;
min-height: 460px;
}
.lane{
display:grid;
grid-template-columns: 1fr;
gap: 14px;
position:relative;
}
.node{
background: #14172a;
border:1px solid rgba(255,255,255,.12);
border-radius: 12px;
padding: 12px;
position:relative;
z-index:1;
}
.node .title{
font-size: 13px;
color: var(--sub);
margin-bottom: 8px;
}
.node .options{
display:flex;flex-wrap:wrap;gap:8px
}
.node .opt{
font-size: 12px;
padding: 6px 8px;
border:1px solid rgba(255,255,255,.12);
border-radius: 8px;
color: var(--ink);
opacity:.6;
}
.node .opt.active{
border-color: var(--edge-hi);
background: rgba(123,212,255,.12);
opacity:1;
box-shadow: inset 0 0 0 1px rgba(123,212,255,.25);
}
.arrow{
--c: var(--edge);
height: 24px;
position:relative;
}
.arrow::before{
content:"";
position:absolute;left:26px;right:26px;top:11px;height:2px;background: var(--c);
}
.arrow::after{
content:"";
position:absolute;right:20px;top:7px;border:6px solid transparent;border-left-color: var(--c);
}
.arrow.active{--c: var(--edge-hi)}
.rec{
background: linear-gradient(180deg, #162d35 0%, #0f1f24 100%);
border:1px solid #1a5a6c;
border-radius: 14px;
padding: 14px;
box-shadow: var(--shadow);
}
.rec .badge{
display:inline-flex;align-items:center;gap:8px;
background:#0e3b46;border:1px solid #2c7b8c;color:#9be9ff;
padding:6px 10px;border-radius:999px;font-size:12px;margin-bottom:8px
}
.rec h3{margin:4px 0 6px;font-size:20px}
.rec .explain{font-size:13px;color: var(--sub)}
.rec .bar{
height: 8px;border-radius: 8px;background:#24305c;overflow:hidden;margin:10px 0 6px;border:1px solid rgba(255,255,255,.08)
}
.rec .bar > span{display:block;height:100%;background: linear-gradient(90deg, #7bd4ff, #8af5c9)}
.rec .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tag{
font-size:11px;background:#111634;border:1px solid rgba(255,255,255,.12);color: var(--sub);
padding:6px 8px;border-radius:999px;
}
.tips{
margin-top:10px;
padding:10px;
background:#12162c;border:1px dashed rgba(255,255,255,.12);border-radius:12px;
color: var(--sub)
}
.tips ul{margin:6px 0 0 18px}
.tips li{margin:6px 0}
.side{
display:flex;flex-direction:column;gap:12px;
}
.card{
background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
border:1px solid rgba(255,255,255,.08);
border-radius: var(--radius);
padding: 14px;
}
.card h4{margin:0 0 8px;font-size:14px;color: var(--sub)}
.kv{display:grid;grid-template-columns: 120px 1fr;gap:8px;font-size:13px}
.kv div{color: var(--ink)}
.kv .k{color: var(--muted)}
.small{font-size:12px;color: var(--muted)}
.row{display:flex;gap:8px;flex-wrap:wrap}
button{
appearance:none;border:1px solid rgba(255,255,255,.14);
background:#171d3c;color:var(--ink);
padding:8px 12px;border-radius:10px;font-size:13px;cursor:pointer
}
button.primary{
background: linear-gradient(180deg, #2a3d9f 0%, #1e2f84 100%);
border-color:#4560cf
}
.footer-note{
padding: 0 16px 18px;color: var(--muted);font-size:12px
}
.pill{
background:#111634;border:1px solid rgba(255,255,255,.12);padding:6px 8px;border-radius:999px;font-size:12px;color:var(--sub)
}
.sep{height:10px}
.hint{font-size:12px;color: var(--muted);margin-top:4px}
</style>
</head>
<body>
<header>
<h1>Thai Loops Decision Flowchart</h1>
<p>Turn research on Thai looped vs. loopless letterforms into practical choices. Answer a few questions and follow the highlighted path to a recommendation you can act on.</p>
</header>
<div class="wrap">
<div class="panel controls">
<div class="body">
<h2>1) Choose a use‑case</h2>
<div class="group" id="usecaseGroup">
<div class="chips">
<label class="chip"><input type="radio" name="usecase" value="book">Book</label>
<label class="chip"><input type="radio" name="usecase" value="website">Website</label>
<label class="chip"><input type="radio" name="usecase" value="poster">Poster</label>
<label class="chip"><input type="radio" name="usecase" value="branding">Branding</label>
<label class="chip"><input type="radio" name="usecase" value="car">Car infotainment UI</label>
<label class="chip"><input type="radio" name="usecase" value="watch">Smartwatch UI</label>
</div>
<div class="note">These presets pre-fill typical text amount and distance. You can fine‑tune below.</div>
</div>
<h2>2) Tune project parameters</h2>
<div class="group">
<label class="legend">Amount of text</label>
<div class="chips" id="textAmt">
<label class="chip"><input type="radio" name="textAmt" value="paragraph">Paragraph‑heavy</label>
<label class="chip"><input type="radio" name="textAmt" value="brief">Brief / UI / Display</label>
</div>
<div class="hint">Paragraph reading favors looped Thai. Brief text depends more on age, distance and tone.</div>
</div>
<div class="group">
<label class="legend">Typical reading distance</label>
<div class="chips" id="distance">
<label class="chip"><input type="radio" name="distance" value="near">Near (≤ 1 m)</label>
<label class="chip"><input type="radio" name="distance" value="far">Far (≥ 2 m)</label>
<label class="chip"><input type="radio" name="distance" value="varied">Varied / unsure</label>
</div>
</div>
<div class="group">
<label class="legend">Audience age profile</label>
<div class="chips" id="age">
<label class="chip"><input type="radio" name="age" value="younger">Mostly younger (≈ 20–35)</label>
<label class="chip"><input type="radio" name="age" value="mixed">Mixed / general public</label>
<label class="chip"><input type="radio" name="age" value="older">Mostly older (≈ 40+)</label>
</div>
</div>
<div class="group">
<label class="legend">Desired tone</label>
<div class="chips" id="tone">
<label class="chip"><input type="radio" name="tone" value="neutral">Neutral / readability first</label>
<label class="chip"><input type="radio" name="tone" value="modern">Modern / youthful / unusual</label>
<label class="chip"><input type="radio" name="tone" value="classical">Classical / formal / traditional</label>
</div>
</div>
<div class="group">
<div class="inline">
<label class="switch">
<input id="narrow" type="checkbox" />
<span class="track"><span class="thumb"></span></span>
</label>
<div>Are you considering a very narrow/condensed font for paragraphs?</div>
</div>
<div class="note">Narrow faces slow continuous reading regardless of loops; prefer normal widths for body text.</div>
</div>
<div class="group">
<div class="row">
<button id="reset">Reset</button>
<button id="share" class="primary">Copy sharable link</button>
</div>
<div id="copied" class="hint" style="display:none">Link copied.</div>
</div>
</div>
</div>
<div class="panel">
<div class="body flow">
<div class="flowchart">
<div class="lane" id="lane">
<div class="node" id="node-start">
<div class="title">Start</div>
<div class="options">
<div class="opt active">Choose use‑case & parameters</div>
</div>
</div>
<div class="arrow" id="arrow-1"></div>
<div class="node" id="node-amount">
<div class="title">How much text?</div>
<div class="options">
<div class="opt" data-opt="paragraph">Paragraph‑heavy</div>
<div class="opt" data-opt="brief">Brief / UI / Display</div>
</div>
</div>
<div class="arrow" id="arrow-2"></div>
<div class="node" id="node-distance">
<div class="title">Reading distance (if brief)</div>
<div class="options">
<div class="opt" data-opt="near">Near (≤ 1 m)</div>
<div class="opt" data-opt="far">Far (≥ 2 m)</div>
<div class="opt" data-opt="varied">Varied / unsure</div>
</div>
</div>
<div class="arrow" id="arrow-3"></div>
<div class="node" id="node-age">
<div class="title">Audience age (if brief)</div>
<div class="options">
<div class="opt" data-opt="younger">Mostly younger</div>
<div class="opt" data-opt="mixed">Mixed</div>
<div class="opt" data-opt="older">Mostly older</div>
</div>
</div>
<div class="arrow" id="arrow-4"></div>
<div class="node" id="node-tone">
<div class="title">Desired tone (ties / fine‑tuning)</div>
<div class="options">
<div class="opt" data-opt="neutral">Neutral</div>
<div class="opt" data-opt="modern">Modern</div>
<div class="opt" data-opt="classical">Classical</div>
</div>
</div>
<div class="arrow" id="arrow-5"></div>
<div class="node" id="node-result">
<div class="title">Recommendation</div>
<div class="rec" id="rec">
<div class="badge" id="badge">Live decision</div>
<h3 id="recTitle">—</h3>
<div class="bar"><span id="confBar" style="width:0%"></span></div>
<div class="small">Confidence based on your inputs</div>
<div class="explain" id="recExplain" style="margin-top:8px"></div>
<div class="tags" id="recTags"></div>
<div class="tips" id="tips" style="display:none">
<strong>Implementation tips</strong>
<ul id="tipsList"></ul>
</div>
</div>
</div>
</div>
</div>
<div class="side">
<div class="card">
<h4>Preset summary</h4>
<div class="kv">
<div class="k">Use‑case</div><div id="kv-use">—</div>
<div class="k">Text amount</div><div id="kv-amt">—</div>
<div class="k">Distance</div><div id="kv-dist">—</div>
<div class="k">Audience</div><div id="kv-age">—</div>
<div class="k">Tone</div><div id="kv-tone">—</div>
</div>
<div class="sep"></div>
<div class="small">You can override any preset to match your project.</div>
</div>
<div class="card">
<h4>Why this decision?</h4>
<div id="why" class="small">Make a selection to see the rationale tied to the research findings.</div>
</div>
<div class="card">
<h4>Source highlights</h4>
<ul class="small" style="margin:0 0 0 18px">
<li>Paragraph reading: looped slightly faster than loopless; narrow compressed faces slow readers.</li>
<li>Distance acuity: at ~2.5 m, older readers favored looped; younger favored loopless; a popular control font was steady across ages.</li>
<li>Perception: loops felt more readable to all ages; looped = classical/formal; loopless = modern/unusual.</li>
<li>Preference: for more text, looped preferred by all; for short text, younger preferred loopless.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer-note">
Built from early‑2024 experiments with 180 native Thai readers: distance acuity (N=41), continuous reading (N=38), and attitude survey (N=139).
</div>
<script>
const $ = (sel, el=document) => el.querySelector(sel);
const $$ = (sel, el=document) => Array.from(el.querySelectorAll(sel));
const state = {
usecase: null,
textAmt: null,
distance: null,
age: null,
tone: null,
narrow: false
};
const usecaseDefaults = {
book: { textAmt: 'paragraph', distance: 'near', age: 'mixed', tone: 'neutral' },
website: { textAmt: 'paragraph', distance: 'near', age: 'mixed', tone: 'neutral' },
poster: { textAmt: 'brief', distance: 'far', age: 'mixed', tone: 'modern' },
branding: { textAmt: 'brief', distance: 'varied',age: 'mixed', tone: 'modern' },
car: { textAmt: 'brief', distance: 'near', age: 'older', tone: 'neutral' },
watch: { textAmt: 'brief', distance: 'near', age: 'younger',tone: 'neutral' }
};
function setChips(groupId, value){
const group = $('#'+groupId);
if(!group) return;
$$('.chip', group).forEach(ch => {
const input = $('input', ch);
const selected = input && input.value === value;
ch.dataset.selected = selected ? 'true' : 'false';
if(input) input.checked = selected;
});
}
function updateFromUsecase(uc){
const d = usecaseDefaults[uc];
if(!d) return;
state.usecase = uc;
Object.assign(state, d);
setChips('textAmt', d.textAmt);
setChips('distance', d.distance);
setChips('age', d.age);
setChips('tone', d.tone);
setChips('usecaseGroup', uc);
$('#narrow').checked = false;
state.narrow = false;
render();
}
function chipGroupHandler(groupId, key){
const group = $('#'+groupId);
group.addEventListener('click', e=>{
const chip = e.target.closest('.chip');
if(!chip) return;
const input = $('input', chip);
if(!input) return;
state[key] = input.value;
setChips(groupId, input.value);
// If use-case is book, lock to paragraph-heavy
if(key === 'textAmt' && state.usecase === 'book' && state.textAmt !== 'paragraph'){
// Enforce paragraph for book
state.textAmt = 'paragraph';
setChips('textAmt','paragraph');
}
render();
});
}
function labelOf(group, val){
const map = {
usecase: {
book: 'Book', website: 'Website', poster: 'Poster',
branding: 'Branding', car: 'Car infotainment UI', watch: 'Smartwatch UI'
},
textAmt: { paragraph: 'Paragraph‑heavy', brief: 'Brief / UI / Display' },
distance: { near: 'Near (≤ 1 m)', far: 'Far (≥ 2 m)', varied: 'Varied / unsure' },
age: { younger: 'Mostly younger (≈ 20–35)', mixed: 'Mixed', older: 'Mostly older (≈ 40+)' },
tone: { neutral: 'Neutral', modern: 'Modern', classical: 'Classical' }
};
return map[group]?.[val] || '—';
}
function updateKV(){
$('#kv-use').textContent = labelOf('usecase',state.usecase);
$('#kv-amt').textContent = labelOf('textAmt',state.textAmt);
$('#kv-dist').textContent = labelOf('distance',state.distance);
$('#kv-age').textContent = labelOf('age',state.age);
$('#kv-tone').textContent = labelOf('tone',state.tone);
}
function highlightFlow(){
// Reset
$$('.node .opt').forEach(o=>o.classList.remove('active'));
$$('.arrow').forEach(a=>a.classList.remove('active'));
// Amount node
if(state.textAmt){
$$('.node#node-amount .opt').forEach(o=>{
if(o.dataset.opt === state.textAmt) o.classList.add('active');
});
$('#arrow-1').classList.add('active');
}
// Distance node only matters if brief
const showDistance = state.textAmt === 'brief';
const showAge = showDistance;
const showTone = true;
// Distance
if(showDistance && state.distance){
$$('.node#node-distance .opt').forEach(o=>{
if(o.dataset.opt === state.distance) o.classList.add('active');
});
$('#arrow-2').classList.add('active');
}
// Age
if(showAge && state.age){
$$('.node#node-age .opt').forEach(o=>{
if(o.dataset.opt === state.age) o.classList.add('active');
});
$('#arrow-3').classList.add('active');
}
// Tone
if(state.tone){
$$('.node#node-tone .opt').forEach(o=>{
if(o.dataset.opt === state.tone) o.classList.add('active');
});
$('#arrow-4').classList.add('active');
}
// Result arrow
$('#arrow-5').classList.add('active');
// Dim irrelevant nodes visually by opacity (keep simple)
$('#node-distance').style.opacity = showDistance ? '1' : '.35';
$('#node-age').style.opacity = showAge ? '1' : '.35';
}
function compute(){
const why = [];
let looped = 0, loopless = 0;
// Paragraph reading strongly favors looped
if(state.textAmt === 'paragraph'){
looped += 3;
why.push('Paragraph reading: looped text was read significantly faster than loopless.');
why.push('Perception: readers of all ages rated looped text as more readable.');
}
// Brief text: distance and age drive decision
if(state.textAmt === 'brief'){
if(state.distance === 'far'){
if(state.age === 'younger'){
loopless += 2;
why.push('Distance acuity: younger readers discerned loopless better at ~2.5 m.');
}else if(state.age === 'older'){
looped += 2;
why.push('Distance acuity: older readers discerned looped better at ~2.5 m.');
}else{
looped += 1; loopless += 1;
why.push('Mixed audience at distance: both styles are viable; consider tone or user testing.');
}
} else if(state.distance === 'near'){
if(state.age === 'younger'){
loopless += 1;
why.push('Short text preference: younger readers tended to prefer loopless in brief settings.');
} else if(state.age === 'older'){
looped += 1;
why.push('Short text preference: older readers leaned toward looped.');
} else {
looped += 0.5; loopless += 0.5;
why.push('Mixed audience at near distance: either can work; tone can break the tie.');
}
} else if(state.distance === 'varied'){
looped += 1; loopless += 1;
why.push('Varied distance: both are acceptable; if readability for older users is critical, favor looped.');
}
}
// Tone weights
if(state.tone === 'modern'){
loopless += 1;
why.push('Tone: loopless was associated with “modern / unusual.”');
} else if(state.tone === 'classical'){
looped += 1;
why.push('Tone: looped was associated with “classical / formal / honest.”');
} else if(state.tone === 'neutral'){
why.push('Neutral tone: prioritize legibility outcomes.');
}
// Narrow caution
const tips = [];
if(state.narrow && state.textAmt === 'paragraph'){
tips.push('Avoid very narrow/condensed faces for body text; they slowed readers regardless of loops.');
}
// General tips based on decision
// will be filled later depending on outcome
// Decision
const diff = looped - loopless;
let pick = 'either';
if(diff >= 1){ pick = 'looped'; }
else if(diff <= -1){ pick = 'loopless'; }
else {
// small difference: suggest hybrid
pick = 'hybrid';
}
// Confidence scale 0–100
const confidence = Math.min(100, Math.max(5, Math.round(60 + Math.abs(diff) * 20)));
return { pick, looped, loopless, diff, confidence, why, tips };
}
function renderRecommendation(res){
const title = $('#recTitle');
const explain = $('#recExplain');
const tags = $('#recTags');
const badge = $('#badge');
const bar = $('#confBar');
const tipsBox = $('#tips');
const tipsList = $('#tipsList');
tags.innerHTML = '';
tipsList.innerHTML = '';
const addTag = (t) => {
const el = document.createElement('span');
el.className = 'tag';
el.textContent = t;
tags.appendChild(el);
};
bar.style.width = res.confidence + '%';
const ctxTags = [];
if(state.textAmt === 'paragraph') ctxTags.push('Paragraphs');
if(state.textAmt === 'brief') ctxTags.push('Brief text / UI');
ctxTags.push(labelOf('distance', state.distance));
ctxTags.push(labelOf('age', state.age));
ctxTags.push('Tone: ' + labelOf('tone', state.tone));
ctxTags.filter(Boolean).forEach(addTag);
let headline = '';
let details = [];
if(res.pick === 'looped'){
headline = 'Use Looped Thai';
details.push('Best overall fit for your inputs.');
if(state.textAmt === 'paragraph'){
details.push('Use looped for body text. If you need a modern edge, consider loopless for headings only.');
} else {
details.push('This choice balances perceived readability and your audience profile.');
}
} else if(res.pick === 'loopless'){
headline = 'Use Loopless Thai';
details.push('Aligns with your audience and tone.');
if(state.textAmt === 'paragraph'){
details.push('If using loopless for long reading, increase size/line-height and test with readers.');
} else {
details.push('Ensure sufficient size/contrast, especially at distance.');
}
} else if(res.pick === 'hybrid'){
headline = 'Hybrid: Looped for body, Loopless for short text';
details.push('Your inputs suggest a close balance. Use looped where reading length matters, loopless for emphasis/labels.');
} else {
headline = 'Either Looped or Loopless';
details.push('Both fit your inputs. Use tone to break the tie or test with your audience.');
}
// Tips based on pick
if(state.textAmt === 'paragraph' && res.pick !== 'looped'){
res.tips.push('If brand requires loopless in paragraphs: add 5–10% size, generous line-height, and test comprehension.');
}
if(state.textAmt === 'brief' && state.distance === 'far' && state.age === 'mixed'){
res.tips.push('For mixed-age signage: prefer looped if older readability is critical; otherwise validate with quick hallway tests.');
}
res.tips.push('Regardless of loops, avoid ultra‑condensed faces for continuous text.');
// Narrow switch tip already added
// Render tips
if(res.tips.length){
tipsBox.style.display = 'block';
res.tips.forEach(t=>{
const li = document.createElement('li');
li.textContent = t;
tipsList.appendChild(li);
});
} else {
tipsBox.style.display = 'none';
}
title.textContent = headline;
explain.innerHTML = [
`<strong>Why:</strong>`,
...res.why.map(w => '• ' + w)
].join('<br>');
badge.textContent = 'Live decision • Confidence ' + res.confidence + '%';
}
function render(){
updateKV();
highlightFlow();
const res = compute();
renderRecommendation(res);
updateURL();
}
function setInitial(){
// Default to Website
updateFromUsecase('website');
render();
}
function syncUsecaseChips(){
$$('#usecaseGroup .chip').forEach(ch=>{
const input = $('input', ch);
ch.dataset.selected = (state.usecase === input.value) ? 'true' : 'false';
input.checked = (state.usecase === input.value);
});
}
// Share link
function updateURL(push=false){
const params = new URLSearchParams();
Object.entries(state).forEach(([k,v])=>{
if(v !== null && v !== false) params.set(k, String(v));
});
const hash = '#'+params.toString();
if(push) history.pushState(null,'',hash);
else history.replaceState(null,'',hash);
}
function loadFromHash(){
if(!location.hash) return false;
const q = new URLSearchParams(location.hash.slice(1));
const keys = ['usecase','textAmt','distance','age','tone'];
keys.forEach(k=>{
const v = q.get(k);
if(v) state[k] = v;
});
state.narrow = q.get('narrow') === 'true';
// apply to UI
if(state.usecase && usecaseDefaults[state.usecase]){
// set usecase, but do not override other provided params
syncUsecaseChips();
setChips('usecaseGroup', state.usecase);
}
if(state.textAmt) setChips('textAmt', state.textAmt);
if(state.distance) setChips('distance', state.distance);
if(state.age) setChips('age', state.age);
if(state.tone) setChips('tone', state.tone);
$('#narrow').checked = state.narrow;
return true;
}
// Event wiring
document.addEventListener('DOMContentLoaded', ()=>{
// Use-case chips
$$('#usecaseGroup .chip').forEach(ch=>{
ch.addEventListener('click', ()=>{
const v = $('input', ch).value;
updateFromUsecase(v);
syncUsecaseChips();
});
});
chipGroupHandler('textAmt','textAmt');
chipGroupHandler('distance','distance');
chipGroupHandler('age','age');
chipGroupHandler('tone','tone');
$('#narrow').addEventListener('change', e=>{
state.narrow = e.target.checked;
render();
});
$('#reset').addEventListener('click', ()=>{
updateFromUsecase('website');
render();
});
$('#share').addEventListener('click', async ()=>{
updateURL();
try{
await navigator.clipboard.writeText(location.href);
const c = $('#copied');
c.style.display = 'block';
setTimeout(()=>c.style.display='none', 1400);
}catch(e){
// Fallback
alert('Link: ' + location.href);
}
});
if(!loadFromHash()){
setInitial();
}else{
render();
}
});
</script>
</body>
</html>Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thai Font Decision Flowchart</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
max-width: 600px;
width: 100%;
}
h1 {
text-align: center;
color: #333;
}
.step {
display: none;
}
.step.active {
display: block;
}
button {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
.recommendation {
font-weight: bold;
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background: #e9ecef;
}
#restart {
display: block;
margin: 20px auto 0;
}
</style>
</head>
<body>
<div class="container">
<h1>Thai Font Decision Flowchart</h1>
<p>This interactive flowchart helps designers decide between looped and loopless Thai fonts based on research findings on readability, age, context, and connotations.</p>
<div id="step1" class="step active">
<h2>Step 1: What is the primary text length and context?</h2>
<button onclick="selectOption('long')">Long text / Paragraph reading (e.g., books, articles)</button>
<button onclick="selectOption('short')">Short text / UI (e.g., websites, apps, watches, branding)</button>
<button onclick="selectOption('distance')">Distance reading (e.g., posters, signs)</button>
</div>
<div id="step2" class="step">
<h2>Step 2: What is the expected reader age group?</h2>
<button onclick="selectOption('young')">Primarily young readers (under 35)</button>
<button onclick="selectOption('old')">Primarily older readers (over 35)</button>
<button onclick="selectOption('mixed')">Mixed ages or unknown</button>
</div>
<div id="step3" class="step">
<h2>Step 3: What style or connotation do you want?</h2>
<button onclick="selectOption('modern')">Modern, unusual, youthful</button>
<button onclick="selectOption('traditional')">Classical, formal, traditional, honest</button>
<button onclick="selectOption('neutral')">No strong preference / Balanced</button>
</div>
<div id="result" class="step">
<h2>Recommendation</h2>
<p id="recommendationText" class="recommendation"></p>
<button id="restart" onclick="restart()">Restart</button>
</div>
</div>
<script>
let choices = {};
function selectOption(choice) {
const currentStep = document.querySelector('.step.active');
const stepId = currentStep.id;
if (stepId === 'step1') {
choices.context = choice;
showStep('step2');
} else if (stepId === 'step2') {
choices.age = choice;
showStep('step3');
} else if (stepId === 'step3') {
choices.style = choice;
showResult();
}
}
function showStep(stepId) {
document.querySelectorAll('.step').forEach(step => step.classList.remove('active'));
document.getElementById(stepId).classList.add('active');
}
function showResult() {
showStep('result');
const rec = getRecommendation();
document.getElementById('recommendationText').innerHTML = rec;
}
function getRecommendation() {
const { context, age, style } = choices;
if (context === 'long') {
// Looped preferred for long text by all
if (style === 'modern') {
return 'For long text, looped fonts are recommended for better readability across ages. However, for a modern feel, consider loopless if targeting young readers, but prioritize readability.';
} else if (style === 'traditional') {
return 'Use looped fonts: They improve readability for paragraph reading and align with classical, formal connotations.';
} else {
return 'Use looped fonts: Research shows they are faster for continuous reading and preferred for longer texts by all ages.';
}
} else if (context === 'short') {
// Loopless preferred by young for short; looped for more text or older
if (age === 'young') {
if (style === 'modern') {
return 'Use loopless fonts: Younger readers prefer them for short text/UI, and they convey modern connotations.';
} else if (style === 'traditional') {
return 'Use looped fonts for traditional feel, but note younger readers may find loopless more efficient.';
} else {
return 'Loopless is preferred by younger readers for short text/UI.';
}
} else if (age === 'old' || age === 'mixed') {
if (style === 'modern') {
return 'Use loopless for modern connotations, but looped may be more readable for older/mixed ages in UI.';
} else {
return 'Use looped fonts: Preferred for readability and traditional associations in short text for older/mixed ages.';
}
}
} else if (context === 'distance') {
// Looped better for old, loopless for young
if (age === 'young') {
if (style === 'modern') {
return 'Use loopless fonts: Younger readers discern them better at distance and they feel modern.';
} else {
return 'Use loopless for better acuity in young readers, even if traditional style is desired.';
}
} else if (age === 'old') {
if (style === 'traditional') {
return 'Use looped fonts: Older readers read them better at distance and they align with classical connotations.';
} else {
return 'Use looped for better distance readability in older readers.';
}
} else if (age === 'mixed') {
return 'For mixed ages, use looped if prioritizing older readers or readability; loopless for younger focus. Consider testing.';
}
}
// Fallback
return 'Based on research, looped fonts generally enhance readability, especially for longer texts and older readers. Loopless may suit modern, short contexts for young audiences.';
}
function restart() {
choices = {};
showStep('step1');
}
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Looped vs Loopless Thai Font Decision Tool</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
width: 800px;
margin: 40px auto;
}
.question {
margin-bottom: 20px;
}
.answer {
margin-bottom: 20px;
}
.result {
font-weight: bold;
font-size: 18px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Looped vs Loopless Thai Font Decision Tool</h1>
<div class="question">
<p>What is the primary age group of your target audience?</p>
<button id="young" onclick="checkAge('young')">Younger (less than 35)</button>
<button id="old" onclick="checkAge('old')">Older (35 and above)</button>
</div>
<div class="answer" id="age-question" style="display: none;">
<p>How much text will be presented?</p>
<button id="much-text" onclick="checkTextAmount('much')">Much text (e.g., paragraphs)</button>
<button id="little-text" onclick="checkTextAmount('little')">Little text (e.g., headings, labels)</button>
</div>
<div class="result" id="result" style="display: none;"></div>
</div>
<script>
let ageGroup;
function checkAge(age) {
ageGroup = age;
document.getElementById('age-question').style.display = 'block';
document.querySelector('.question').style.display = 'none';
}
function checkTextAmount(textAmount) {
let result;
if (ageGroup === 'young' && textAmount === 'much') {
result = 'Looped Thai font is recommended for better readability.';
} else if (ageGroup === 'young' && textAmount === 'little') {
result = 'Loopless Thai font is recommended for a modern look.';
} else if (ageGroup === 'old' && textAmount === 'much') {
result = 'Looped Thai font is recommended for better readability.';
} else if (ageGroup === 'old' && textAmount === 'little') {
result = 'Looped Thai font is still recommended, but consider loopless for a modern look if needed.';
}
document.getElementById('result').innerText = result;
document.getElementById('result').style.display = 'block';
document.getElementById('age-question').style.display = 'none';
}
</script>
</body>
</html>
```
This code creates a simple web app that guides designers through a series of questions to decide whether to use looped or loopless Thai fonts based on the age group of their target audience and the amount of text to be presented. The final recommendation is displayed based on the research findings.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thai Font Loop Decision Tool</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
color: white;
padding: 30px;
text-align: center;
}
.header h1 {
font-size: 2rem;
margin-bottom: 10px;
}
.header p {
opacity: 0.9;
font-size: 1.1rem;
}
.flowchart {
padding: 30px;
}
.step {
background: #f8f9fa;
border-radius: 15px;
padding: 25px;
margin-bottom: 20px;
border-left: 5px solid #4facfe;
transition: all 0.3s ease;
}
.step.active {
background: #e3f2fd;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(79, 172, 254, 0.2);
}
.step.hidden {
display: none;
}
.step h3 {
color: #2c3e50;
margin-bottom: 15px;
font-size: 1.3rem;
}
.options {
display: grid;
gap: 15px;
margin-top: 20px;
}
.option {
background: white;
border: 2px solid #e9ecef;
border-radius: 10px;
padding: 20px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 15px;
}
.option:hover {
border-color: #4facfe;
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(79, 172, 254, 0.1);
}
.option.selected {
border-color: #4facfe;
background: #f0f8ff;
}
.option-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
background: #4facfe;
color: white;
}
.option-content h4 {
color: #2c3e50;
margin-bottom: 5px;
}
.option-content p {
color: #6c757d;
font-size: 0.9rem;
}
.result {
background: linear-gradient(135deg, #56ccf2 0%, #2f80ed 100%);
color: white;
border-radius: 15px;
padding: 30px;
text-align: center;
margin-top: 20px;
}
.result h2 {
margin-bottom: 15px;
font-size: 1.8rem;
}
.result .recommendation {
font-size: 1.4rem;
font-weight: bold;
margin-bottom: 15px;
padding: 15px;
background: rgba(255,255,255,0.2);
border-radius: 10px;
}
.result .reasoning {
background: rgba(255,255,255,0.1);
border-radius: 10px;
padding: 20px;
text-align: left;
}
.reset-btn {
background: rgba(255,255,255,0.2);
color: white;
border: 2px solid white;
padding: 12px 24px;
border-radius: 25px;
cursor: pointer;
margin-top: 20px;
transition: all 0.3s ease;
}
.reset-btn:hover {
background: white;
color: #2f80ed;
}
.progress {
background: #e9ecef;
height: 6px;
border-radius: 3px;
margin-bottom: 20px;
overflow: hidden;
}
.progress-bar {
background: linear-gradient(90deg, #4facfe, #00f2fe);
height: 100%;
transition: width 0.3s ease;
border-radius: 3px;
}
@media (max-width: 768px) {
.container {
margin: 10px;
border-radius: 15px;
}
.header {
padding: 20px;
}
.header h1 {
font-size: 1.5rem;
}
.flowchart {
padding: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🔄 Thai Font Loop Decision Tool</h1>
<p>Based on research by Héctor Mangas • Make informed typography choices</p>
</div>
<div class="flowchart">
<div class="progress">
<div class="progress-bar" id="progressBar"></div>
</div>
<!-- Step 1: Application Type -->
<div class="step active" id="step1">
<h3>📱 What type of application are you designing?</h3>
<p>Different applications have different readability requirements and user expectations.</p>
<div class="options">
<div class="option" data-value="book" onclick="selectOption(this, 'applicationType')">
<div class="option-icon">📚</div>
<div class="option-content">
<h4>Book / Long-form Reading</h4>
<p>Novels, articles, educational materials</p>
</div>
</div>
<div class="option" data-value="website" onclick="selectOption(this, 'applicationType')">
<div class="option-icon">🌐</div>
<div class="option-content">
<h4>Website / Digital Content</h4>
<p>Web pages, blogs, online articles</p>
</div>
</div>
<div class="option" data-value="poster" onclick="selectOption(this, 'applicationType')">
<div class="option-icon">🎨</div>
<div class="option-content">
<h4>Poster / Advertising</h4>
<p>Print ads, posters, signage</p>
</div>
</div>
<div class="option" data-value="branding" onclick="selectOption(this, 'applicationType')">
<div class="option-icon">🏷️</div>
<div class="option-content">
<h4>Branding / Logo</h4>
<p>Company logos, brand identity</p>
</div>
</div>
<div class="option" data-value="ui" onclick="selectOption(this, 'applicationType')">
<div class="option-icon">📱</div>
<div class="option-content">
<h4>User Interface</h4>
<p>Apps, dashboards, car interfaces</p>
</div>
</div>
</div>
</div>
<!-- Step 2: Text Amount -->
<div class="step hidden" id="step2">
<h3>📄 How much text will be displayed?</h3>
<p>The amount of text affects reading patterns and user preferences.</p>
<div class="options">
<div class="option" data-value="minimal" onclick="selectOption(this, 'textAmount')">
<div class="option-icon">📝</div>
<div class="option-content">
<h4>Minimal Text</h4>
<p>Headlines, labels, short phrases (1-10 words)</p>
</div>
</div>
<div class="option" data-value="moderate" onclick="selectOption(this, 'textAmount')">
<div class="option-icon">📋</div>
<div class="option-content">
<h4>Moderate Text</h4>
<p>Paragraphs, descriptions (50-200 words)</p>
</div>
</div>
<div class="option" data-value="extensive" onclick="selectOption(this, 'textAmount')">
<div class="option-icon">📖</div>
<div class="option-content">
<h4>Extensive Text</h4>
<p>Articles, chapters, long-form content (200+ words)</p>
</div>
</div>
</div>
</div>
<!-- Step 3: Target Audience -->
<div class="step hidden" id="step3">
<h3>👥 What's your target audience age group?</h3>
<p>Age significantly affects reading preferences and performance with loops.</p>
<div class="options">
<div class="option" data-value="young" onclick="selectOption(this, 'audienceAge')">
<div class="option-icon">🧑</div>
<div class="option-content">
<h4>Younger Audience</h4>
<p>Primarily 18-35 years old</p>
</div>
</div>
<div class="option" data-value="mixed" onclick="selectOption(this, 'audienceAge')">
<div class="option-icon">👨👩👧👦</div>
<div class="option-content">
<h4>Mixed Age Groups</h4>
<p>All ages, general audience</p>
</div>
</div>
<div class="option" data-value="older" onclick="selectOption(this, 'audienceAge')">
<div class="option-icon">👴</div>
<div class="option-content">
<h4>Older Audience</h4>
<p>Primarily 35+ years old</p>
</div>
</div>
</div>
</div>
<!-- Step 4: Reading Context -->
<div class="step hidden" id="step4">
<h3>🎯 What's the primary reading context?</h3>
<p>Different contexts require different levels of readability optimization.</p>
<div class="options">
<div class="option" data-value="distance" onclick="selectOption(this, 'readingContext')">
<div class="option-icon">👁️</div>
<div class="option-content">
<h4>Distance Reading</h4>
<p>Billboards, signage, presentations</p>
</div>
</div>
<div class="option" data-value="normal" onclick="selectOption(this, 'readingContext')">
<div class="option-icon">📱</div>
<div class="option-content">
<h4>Normal Reading</h4>
<p>Books, screens, standard viewing distance</p>
</div>
</div>
<div class="option" data-value="continuous" onclick="selectOption(this, 'readingContext')">
<div class="option-icon">⏱️</div>
<div class="option-content">
<h4>Continuous Reading</h4>
<p>Long reading sessions, sustained attention</p>
</div>
</div>
</div>
</div>
<!-- Step 5: Brand Personality -->
<div class="step hidden" id="step5">
<h3>🎨 What brand personality are you aiming for?</h3>
<p>Loops strongly influence perception and emotional associations.</p>
<div class="options">
<div class="option" data-value="traditional" onclick="selectOption(this, 'brandPersonality')">
<div class="option-icon">🏛️</div>
<div class="option-content">
<h4>Traditional & Formal</h4>
<p>Classical, elegant, honest, familiar</p>
</div>
</div>
<div class="option" data-value="modern" onclick="selectOption(this, 'brandPersonality')">
<div class="option-icon">🚀</div>
<div class="option-content">
<h4>Modern & Contemporary</h4>
<p>Innovative, unusual, youthful, artistic</p>
</div>
</div>
<div class="option" data-value="neutral" onclick="selectOption(this, 'brandPersonality')">
<div class="option-icon">⚖️</div>
<div class="option-content">
<h4>Neutral & Balanced</h4>
<p>Readability is the primary concern</p>
</div>
</div>
</div>
</div>
<!-- Result -->
<div class="result hidden" id="result">
<h2>🎯 Recommendation</h2>
<div class="recommendation" id="recommendationText"></div>
<div class="reasoning" id="reasoningText"></div>
<button class="reset-btn" onclick="resetTool()">🔄 Start Over</button>
</div>
</div>
</div>
<script>
let currentStep = 1;
let answers = {};
const totalSteps = 5;
function selectOption(element, category) {
// Remove previous selections
element.parentNode.querySelectorAll('.option').forEach(opt => {
opt.classList.remove('selected');
});
// Select current option
element.classList.add('selected');
answers[category] = element.dataset.value;
// Move to next step after short delay
setTimeout(() => {
nextStep();
}, 500);
}
function nextStep() {
if (currentStep < totalSteps) {
document.getElementById(`step${currentStep}`).classList.remove('active');
document.getElementById(`step${currentStep}`).classList.add('hidden');
currentStep++;
document.getElementById(`step${currentStep}`).classList.remove('hidden');
document.getElementById(`step${currentStep}`).classList.add('active');
updateProgress();
} else {
showResult();
}
}
function updateProgress() {
const progress = (currentStep / totalSteps) * 100;
document.getElementById('progressBar').style.width = `${progress}%`;
}
function showResult() {
document.getElementById(`step${currentStep}`).classList.remove('active');
document.getElementById(`step${currentStep}`).classList.add('hidden');
const recommendation = getRecommendation();
document.getElementById('recommendationText').textContent = recommendation.decision;
document.getElementById('reasoningText').innerHTML = recommendation.reasoning;
document.getElementById('result').classList.remove('hidden');
document.getElementById('progressBar').style.width = '100%';
}
function getRecommendation() {
const { applicationType, textAmount, audienceAge, readingContext, brandPersonality } = answers;
let loopedScore = 0;
let looplessScore = 0;
let reasons = [];
// Text amount analysis
if (textAmount === 'extensive') {
loopedScore += 3;
reasons.push("📖 <strong>Extensive text</strong>: Research shows looped text is significantly faster for continuous reading and preferred for longer reading sessions.");
} else if (textAmount === 'moderate') {
loopedScore += 2;
reasons.push("📋 <strong>Moderate text</strong>: Looped text shows reading speed advantages for paragraph-length content.");
} else {
looplessScore += 1;
reasons.push("📝 <strong>Minimal text</strong>: For short text, younger users may prefer loopless, while loops don't provide significant reading advantages.");
}
// Age analysis
if (audienceAge === 'older') {
loopedScore += 3;
reasons.push("👴 <strong>Older audience</strong>: Research clearly shows older readers perform better with looped text for both distance and continuous reading.");
} else if (audienceAge === 'young') {
if (readingContext === 'distance') {
looplessScore += 2;
reasons.push("🧑 <strong>Younger audience + Distance reading</strong>: Young readers show better distance reading acuity with loopless text.");
} else {
loopedScore += 1;
reasons.push("🧑 <strong>Younger audience</strong>: While young readers prefer loopless for minimal text, looped still provides reading benefits for longer content.");
}
} else {
loopedScore += 1;
reasons.push("👨👩👧👦 <strong>Mixed age groups</strong>: Looped text provides better overall readability across all age groups for most applications.");
}
// Reading context analysis
if (readingContext === 'continuous') {
loopedScore += 2;
reasons.push("⏱️ <strong>Continuous reading</strong>: Research shows significant speed advantages for looped text in sustained reading tasks.");
} else if (readingContext === 'distance' && audienceAge === 'young') {
looplessScore += 1;
reasons.push("👁️ <strong>Distance reading</strong>: Combined with younger audience, loopless provides better distance reading acuity.");
}
// Brand personality analysis
if (brandPersonality === 'traditional') {
loopedScore += 2;
reasons.push("🏛️ <strong>Traditional branding</strong>: Loops strongly associate with 'classical', 'formal', 'elegant', and 'honest' perceptions.");
} else if (brandPersonality === 'modern') {
looplessScore += 2;
reasons.push("🚀 <strong>Modern branding</strong>: Loopless text is perceived as 'modern', 'unusual', 'youthful', and 'artistic'.");
} else {
loopedScore += 1;
reasons.push("⚖️ <strong>Neutral branding</strong>: Prioritizing readability, loops provide measurable reading performance benefits.");
}
// Application-specific considerations
if (applicationType === 'book') {
loopedScore += 2;
reasons.push("📚 <strong>Book application</strong>: Long-form reading heavily favors looped text for speed and comfort.");
} else if (applicationType === 'ui' && audienceAge === 'young') {
looplessScore += 1;
reasons.push("📱 <strong>UI design</strong>: Interface text with younger users may benefit from modern loopless aesthetics.");
}
// Determine final recommendation
const decision = loopedScore > looplessScore ? "Use LOOPED Thai fonts" : "Use LOOPLESS Thai fonts";
const confidence = Math.abs(loopedScore - looplessScore);
const confidenceText = confidence >= 3 ? "Strong recommendation" :
confidence >= 2 ? "Moderate recommendation" : "Slight preference";
return {
decision: `${decision} (${confidenceText})`,
reasoning: `
<h3>📊 Analysis Summary</h3>
<p><strong>Looped score:</strong> ${loopedScore} | <strong>Loopless score:</strong> ${looplessScore}</p>
<br>
<h4>🔍 Key Factors:</h4>
<ul style="text-align: left; margin-left: 20px; margin-top: 10px;">
${reasons.map(reason => `<li style="margin-bottom: 8px;">${reason}</li>`).join('')}
</ul>
<br>
<p><em>This recommendation is based on empirical research conducted with 180 native Thai readers in Bangkok, 2024.</em></p>
`
};
}
function resetTool() {
currentStep = 1;
answers = {};
// Hide all steps and result
for (let i = 1; i <= totalSteps; i++) {
document.getElementById(`step${i}`).classList.add('hidden');
document.getElementById(`step${i}`).classList.remove('active');
// Clear selections
document.getElementById(`step${i}`).querySelectorAll('.option').forEach(opt => {
opt.classList.remove('selected');
});
}
document.getElementById('result').classList.add('hidden');
document.getElementById('step1').classList.remove('hidden');
document.getElementById('step1').classList.add('active');
document.getElementById('progressBar').style.width = '20%';
}
// Initialize
updateProgress();
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thai Font Decision Flowchart</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Noto Sans Thai', sans-serif;
background: #f9fafb;
color: #222;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
font-size: 1.8em;
margin-bottom: 10px;
}
#flowchart {
max-width: 600px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
overflow: hidden;
}
.node {
padding: 20px;
border-bottom: 1px solid #eee;
text-align: center;
}
.question {
font-weight: bold;
margin-bottom: 15px;
}
button {
background: #0078D4;
border: none;
color: white;
padding: 10px 20px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
}
button:hover {
background: #005fa3;
}
.result {
font-size: 1.2em;
font-weight: bold;
padding: 20px;
color: #333;
}
.explanation {
padding: 10px 20px;
font-size: 0.95em;
color: #555;
}
</style>
</head>
<body>
<h1>Thai Font Selection Flowchart</h1>
<div id="flowchart">
<div id="node" class="node">
<div class="question">What type of text are you designing?</div>
<button onclick="selectType('long')">Paragraph or Long Reading</button>
<button onclick="selectType('short')">Short UI or Branding Text</button>
</div>
</div>
<script>
let ageGroup = '';
let textType = '';
function selectType(type) {
textType = type;
document.getElementById('node').innerHTML = `
<div class="question">Who is your main reader group?</div>
<button onclick="selectAge('young')">Younger readers (under 35)</button>
<button onclick="selectAge('older')">Older readers (35+)</button>
`;
}
function selectAge(age) {
ageGroup = age;
showResult();
}
function showResult() {
let recommendation = '';
let explanation = '';
if (textType === 'long') {
recommendation = '✅ Use a LOOPED Thai font';
explanation = 'Readers of all ages performed better and preferred looped fonts for paragraph reading, reporting easier readability and faster reading times.';
} else {
if (ageGroup === 'young') {
recommendation = '✅ Use a LOOPLESS Thai font';
explanation = 'Younger readers showed better distance reading performance with loopless fonts and associate them with modernity and simplicity.';
} else {
recommendation = '✅ Use a LOOPED Thai font';
explanation = 'Older readers read looped text more easily and find it more familiar and traditionally readable.';
}
}
document.getElementById('flowchart').innerHTML = `
<div class="node result">${recommendation}</div>
<div class="explanation">${explanation}</div>
<div class="explanation">
<strong>Context tip:</strong> Looped fonts feel <em>classical, formal, trustworthy</em>.
Loopless fonts feel <em>modern, youthful, and unconventional</em>.
</div>
<div style="text-align:center; padding-bottom:20px;">
<button onclick="restart()">Start over</button>
</div>
`;
}
function restart() {
document.getElementById('flowchart').innerHTML = `
<div id="node" class="node">
<div class="question">What type of text are you designing?</div>
<button onclick="selectType('long')">Paragraph or Long Reading</button>
<button onclick="selectType('short')">Short UI or Branding Text</button>
</div>
`;
}
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>Looped vs. Loopless Thai Font Decision Helper</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
background:#f5f5f5;
color:#333;
}
header {
background:#0d47a1;
color:#fff;
padding:1rem;
text-align:center;
}
.container {
max-width:900px;
margin:2rem auto;
background:#fff;
padding:2rem;
border-radius:8px;
box-shadow:0 2px 8px rgba(0,0,0.1);
}
.question {
margin-bottom:1.5rem;
}
.question h2 {
margin:0 0 .5rem;
font-size:1.2rem;
}
.answers button {
padding:.6rem 1.2rem;
margin-right:.8rem;
margin-top:.5rem;
border:none;
border-radius:4px;
cursor:pointer;
font-size:1rem;
}
.answers button:hover {
opacity:.9;
}
.answers button[data-value="yes"] {background:#4caf50;color:#fff;}
.answers button[data-value="no"] {background:#f44336;color:#fff;}
.result {
padding:1rem;
margin-top:2rem;
border-radius:6px;
font-size:1.2rem;
font-weight:bold;
}
.result.looped {background:#e8f5e9;color:#2e7d32;}
.result.loopless {background:#ffebee;color:#c62828;}
.reset {
margin-top:1rem;
background:#607d8b;
color:#fff;
border:none;
padding:.5rem 1rem;
border-radius:4px;
cursor:pointer;
}
/* Simple flowchart styling using Mermaid */
#chart {
margin-top:2rem;
}
</style>
<!-- Mermaid for a static visual flowchart -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({startOnLoad:true});
</script>
</head>
<body>
<header>
<h1>Looped ↔︎ Loopless Thai Font Decision Helper</h1>
</header>
<div class="container">
<section id="q1" class="question">
<h2>1️⃣ Is the text a **long paragraph** (e.g., > 300 characters or multiple lines) ?</h2>
<div class="answers">
<button data-value="yes">Yes – Long</button>
<button data-value="no">No – Short</button>
</div>
</section>
<section id="q2-age" class="question" style="display:none;">
<h2>2️⃣ What is the **average age** of the target readers?</h2>
<div class="answers">
<button data-value="young">Under 40 years</button>
<button data-value="old">40 years or older</button>
</div>
</section>
<section id="q3-context" class="question" style="display:none;">
<h2>3️⃣ What is the **application context**?</h2>
<div class="answers">
<button data-value="reading">Reading‑focused (books, articles, reports)</button>
<button data-value="ui">UI‑focused (web, apps, devices, signage)</button>
</div>
</section>
<section id="result" class="result" style="display:none;"></section>
<button class="reset" id="resetBtn" style="display:none;">Start Over</button>
<hr>
<h2>📊 Visual Flowchart (for reference)</h2>
<div id="chart">
<pre class="mermaid">
flowchart TD
A[Is text a long paragraph?] -->|Yes| B[Use **Looped** font]
A -->|No| C[What is the reader age?]
C -->|Young (<40)| D{Context?}
C -->|Old (≥40)| E[Use **Looped** font]
D -->|Reading‑focused| F[Use **Looped** font]
D -->|UI‑focused| G[Use **Loopless** font]
</pre>
</div>
</div>
<script>
// State tracking
const state = {};
// Utility to show/hide elements
function show(el) { el.style.display = '';}
function hide(el) { el.style.display = 'none';}
// Question 1
document.querySelectorAll('#q1 button').forEach(btn=>{
btn.addEventListener('click',()=>{
const val = btn.dataset.value;
state.longParagraph = (val === 'yes');
hide(document.getElementById('q1'));
if(state.longParagraph){
// Long paragraphs -> Looped regardless of other factors
displayResult('looped','Long paragraphs are easier to read with looped fonts.');
}else{
// Continue to age question
show(document.getElementById('q2-age'));
}
});
});
// Question 2 – Age
document.querySelectorAll('#q2-age button').forEach(btn=>{
btn.addEventListener('click',()=>{
const val = btn.dataset.value;
state.ageGroup = val; // 'young' or 'old'
hide(document.getElementById('q2-age'));
if(state.ageGroup === 'old'){
// Older readers – Looped is preferred even for short UI text
displayResult('looped','Older readers prefer looped fonts, even in UI contexts.');
}else{
// Young readers – need to ask context
show(document.getElementById('q3-context'));
}
});
});
// Question 3 – Context (only for young readers)
document.querySelectorAll('#q3-context button').forEach(btn=>{
btn.addEventListener('click',()=>{
const ctx = btn.dataset.value;
hide(document.getElementById('q3-context'));
if(ctx === 'reading'){
displayResult('looped','For reading‑focused short texts, young readers still benefit from looped fonts.');
}else{
displayResult('loopless','For UI‑focused short texts, young readers prefer loopless fonts.');
}
});
});
function displayResult(type,message){
const resEl = document.getElementById('result');
resEl.textContent = message;
resEl.className = `result ${type}`;
show(resEl);
show(document.getElementById('resetBtn'));
}
// Reset button
document.getElementById('resetBtn').addEventListener('click',()=>{
// Reset state
for(let k in state) delete state[k];
// Hide everything
hide(document.getElementById('q2-age'));
hide(document.getElementById('q3-context'));
hide(document.getElementById('result'));
hide(document.getElementById('resetBtn'));
// Show first question again
show(document.getElementById('q1'));
});
</script>
</body>
</html>
```
**How to use the app**
1. **Open the file** in any modern web browser.
2. Answer the three simple questions that appear:
- Is the text a long paragraph?
- What is the target age group?
- Is the context reading‑focused or UI‑focused?
3. A concise recommendation (“Use Looped font” or “Use Loopless font”) will be shown, together with the reasoning derived from the research.
The embedded Mermaid diagram gives a quick visual overview of the decision logic for designers who prefer a static reference.Drag to resize