✅ | N7m.php
Have you ever come across the term “I18N”? If not, it’s an abbreviation for “Internationalization,” where the basic logic is to count the number of characters between the first and last letter. Similarly, L10N, G11N, and T9N stand for “Localization,” “Globalization,” and “Translation,” respectively.
Looking back to last year, when I first started learning about localization, I didn’t know who invented this method of abbreviation; it felt very abstract. Today, I happened to see LocLunch’s LinkedIn homepage stating “Internationalization, Localization, and Globalization” using Numeronyms. (without any intention of criticism), and on a whim, I wrote the following webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.8">
<title>Localization -> L10n</title>
<style>
textarea {
width: 25%;
height: 125px;
align-items: center;
background-color: #00000055;
border-radius: 5px;
padding: 5px 15px;
}
@media (max-width: 980px) {
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #007eca;
}
}
@media (min-width: 981px) {
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #007eca;
background-image: url("https://dl.itslittlekevin.com/projects/5069.png");
background-repeat: no-repeat;
background-position: right center;
background-size: auto 100%;
}
}
h1, p, h4 {
text-shadow: 2px 2px 2px #00000055;
align-items: center;
}
#input-container, #btn-container {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
/* Style for the first input area */
#inputArea1 {
color: white;
margin: 10px;
border-radius: 5px;
padding: 5px 15px;
text-align: justify;
width: 45vw; /* Set the width of the first input box */
height: 15vh;
}
/* Style for the second input area */
#inputArea2 {
color: white; /* Different text color for the second input */
margin: 10px;
border-radius: 5px;
padding: 5px 15px;
text-align: justify; /* Different text alignment for the second input */
width: 45vw; /* Different width for the second input box */
height: 15vh; /* Different height for the second input box */
}
* {
color: white;
}
button {
font-size: 15px;
background-color: #00325565;
padding: 5px 15px;
border-radius: 5px;
border-width: 0px;
margin: 5px;
cursor: pointer;
}
#refresh-btn {
margin-left: 10px;
}
.spacer {
height: 55px;
}
h4 a {
text-decoration: none;
}
</style>
</head>
<body>
<h1>Numeronym 👉 N7m</h1>
<div id="input-container">
<textarea id="inputArea1" placeholder="ʊиɩсοᏧဧ ʃʋρрοяτеδ | Enter text | 输入文本"></textarea>
</div>
<div id="btn-container">
<button id="convertBtn">Convert | 转换</button>
<button id="clearBtn">Clear | 清空</button>
</div>
<textarea id="inputArea2" placeholder=" ʊ5ဧ ʃ7δ | O4t A2a | 文3区 " readonly></textarea>
<script>
function isCJK(character) {
// Regular expression to test for CJK characters
return /[\u3000-\u9FFF\u3400-\u4DBF\u20000-\u2A6DF\u2A700-\u2B73F\u2B740-\u2B81F\u2B820-\u2CEAF\uF900-\uFAFF\u2F800-\u2FA1F]/.test(character);
}
function shortenWord(word) {
// Shorten CJK sentences based on punctuation and shorten alphabetical words
if (isCJK(word[0])) {
// Split CJK sentences by punctuation and shorten each segment
return word.split(/([。！？，、；：])/).map(segment => {
// Check if segment is not just punctuation
if (segment && !/^[。！？，、；：]$/.test(segment)) {
return segment[0] + (segment.length - 2) + segment[segment.length - 1];
}
return segment;
}).join('');
} else {
// Shorten alphabetical words
if (word.length > 2) {
return word[0] + (word.length - 2) + word[word.length - 1];
}
}
return word;
}
function convertText(text) {
// Split the text by whitespace and punctuation for alphabetical words, and by CJK punctuation for CJK sentences
return text.split(/(\s+|[,.!?;:()])/).map(shortenWord).join('');
}
document.getElementById('convertBtn').onclick = function() {
let text = document.getElementById('inputArea1').value;
let shortened = convertText(text);
document.getElementById('inputArea2').value = shortened;
};
document.getElementById('clearBtn').onclick = function() {
document.getElementById('inputArea1').value = '';
document.getElementById('inputArea2').value = '';
};
</script>
<h4><a href="https://itslittlekevin.com/gadgetslist">»返回工具列表 | Return to Gadgets List«</a></h4>
<p>© itsLittleKevin · All rights reserved.</p>
</body>
</html>
Since I have absolutely no background in programming (including essential web front-end languages like HTML, PHP, CSS, JS, etc.), this webpage could very well be described as me taking a stab in the dark. If you’re a professional, I welcome any suggestions for optimization.
This webpage now theoretically fully supports the Latin alphabet part of the Unicode character set (mainly those languages that separate words in a sentence with spaces) and basically supports CJK.
However, when it comes to implementing CJK, take Chinese for example, a Chinese word can be just one character. So, it wouldn’t make sense to turn "this sentence(see Chinese version of this paragraph)" into “111...” or to turn an entire paragraph (source in Chinese) into “这98子.”
*Source text: 但就实现CJK这块来说，以中文为例，一个中文“词”可以仅仅是一个字。那么这样的话总不能“把接下来这句话全部都变成”->“111111111111”或者把这一整段话全部变成“这98子”这个样子。
Therefore, for CJK, I chose to use common punctuation marks for separation, which for Chinese, would turn the first half of the sentence into (这5说). However, for Japanese, a long string of Katakana and Hiragana might not yield such ideal results.
In any case, feel free to give it a try and have fun!