The Beginning: A Serendipitous Discovery
As a developer, I’m constantly on the lookout for useful online tools that can boost productivity. One day, I stumbled upon Kantan Tools, a beautifully crafted collection of web utilities that immediately caught my attention. The clean design and practical functionality were impressive, but what really drew me in was their character counter tool.
What I loved about Kantan Tools:
- 🚀 Lightning Fast: Client-side processing, no registration required
- 🔒 Privacy First: All data processed locally, nothing sent to servers
- 🛠️ Feature Rich: From character counting to password generation, it had everything
But as a developer with a chronic case of “not-invented-here syndrome,” I started wondering: Could I create a specialized tool focused specifically on Japanese text counting?
From Idea to Reality: Building TextCounter-JP
And that’s how TextCounter-JP was born. My goal was to create a Japanese-optimized text counter that would go beyond basic character counting.
🎯 Core Feature Design
1. Multi-dimensional Text Analysis
- Basic Stats: Character count, word count, line count
- Japanese-Specific: Separate counts for ひらがな (Hiragana), カタカナ (Katakana), and 漢字 (Kanji)
- Practical Metrics: Manuscript paper calculation, byte count in various encodings
2. Japanese Manuscript Paper Calculation
This addresses a specific need in Japanese document formatting:
// 400-character manuscript paper calculation logic
const calculateManuscriptPaper = (text, charsPerLine = 20, linesPerPage = 20) => {
const lines = text.split('n');
let totalPages = 0;
let currentPageLines = 0;
lines.forEach(line => {
if (line.length === 0) {
// Empty lines still count as one line
currentPageLines++;
} else {
// Calculate how many manuscript lines this text line needs
const linesNeeded = Math.ceil(line.length / charsPerLine);
currentPageLines += linesNeeded;
}
// Check if we need a new page
if (currentPageLines >= linesPerPage) {
totalPages += Math.ceil(currentPageLines / linesPerPage);
currentPageLines = currentPageLines % linesPerPage;
}
});
return totalPages || 1;
};
3. Multi-Encoding Byte Calculation
// Support for multiple Japanese text encodings
const calculateBytes = (text) => {
const encodings = {
'UTF-8': new TextEncoder().encode(text).length,
'Shift-JIS': calculateShiftJISBytes(text),
'EUC-JP': calculateEUCJPBytes(text),
'ISO-2022-JP': calculateJISBytes(text)
};
return encodings;
};
// Shift-JIS byte calculation (simplified)
const calculateShiftJISBytes = (text) => {
let bytes = 0;
for (let i = 0; i < text.length; i++) {
const code = text.charCodeAt(i);
if (code < 0x80) {
bytes += 1; // ASCII characters
} else if (code >= 0xFF61 && code <= 0xFF9F) {
bytes += 1; // Half-width katakana
} else {
bytes += 2; // Full-width characters
}
}
return bytes;
};
🔧 Technical Implementation Details
1. Real-time Calculation with Performance Optimization
// Use debounce to avoid excessive calculations
const debouncedCount = debounce((text) => {
updateAllCounters(text);
}, 100);
// Large text processing optimization
const processLargeText = (text) => {
if (text.length > 10000) {
// For large texts, use requestIdleCallback for chunked processing
requestIdleCallback(() => {
calculateDetailedStats(text);
});
} else {
calculateDetailedStats(text);
}
};
// Debounce utility function
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
2. Precise Japanese Character Classification
// Accurate Japanese character type identification
const analyzeJapaneseText = (text) => {
const patterns = {
hiragana: /[u3040-u309F]/g,
katakana: /[u30A0-u30FF]/g,
kanji: /[u4E00-u9FAF]/g,
halfWidthKana: /[uFF65-uFF9F]/g,
punctuation: /[u3000-u303F]/g,
ascii: /[x00-x7F]/g
};
const results = {};
for (const [type, regex] of Object.entries(patterns)) {
results[type] = (text.match(regex) || []).length;
}
// Combine full-width and half-width katakana
results.katakana += results.halfWidthKana;
delete results.halfWidthKana;
return results;
};
3. Responsive Design Implementation
Using CSS Grid and Flexbox for device-adaptive layouts:
.stats-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.stat-card {
background: #f8f9fa;
border-radius: 8px;
padding: 1.5rem;
border-left: 4px solid #007bff;
transition: transform 0.2s ease;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
@media (max-width: 768px) {
.stats-container {
grid-template-columns: 1fr;
}
.text-input {
min-height: 200px;
font-size: 16px; /* Prevent zoom on iOS */
}
.stat-card {
padding: 1rem;
}
}
📊 User Experience Enhancements
1. Progressive Feature Disclosure
// Tab-based interface for organizing features
class TabManager {
constructor() {
this.activeTab = 'basic';
this.tabs = {
basic: 'Basic Statistics',
advanced: 'Advanced Analysis',
manuscript: 'Manuscript Paper',
encoding: 'Byte Encoding'
};
}
switchTab(tabId) {
// Hide all tab contents
document.querySelectorAll('.tab-content').forEach(tab => {
tab.classList.remove('active');
});
// Show selected tab
document.getElementById(`${tabId}-tab`).classList.add('active');
// Update tab buttons
document.querySelectorAll('.tab-button').forEach(btn => {
btn.classList.toggle('active', btn.dataset.tab === tabId);
});
this.activeTab = tabId;
}
}
2. Accessibility Features
role="main" aria-labelledby="main-heading">
id="main-heading">Japanese Text Counter
aria-labelledby="input-section">
id="input-section">Text Input
for="text-input" class="sr-only">
Enter text to count characters
id="text-input"
aria-describedby="input-help"
placeholder="Enter your Japanese text here..."
rows="8">
id="input-help" class="help-text">
Text is processed locally in your browser for privacy
aria-labelledby="results-section">
id="results-section">Analysis Results
role="tablist" aria-labelledby="results-section">
role="tab" aria-selected="true" aria-controls="basic-panel">
Basic Stats
