This web application provides a Japanese Character Width Converter that allows users to convert text between full-width (全角) and half-width (半角) characters. It is particularly useful when entering Japanese text into websites and online forms that require a specific character width, especially for katakana, numbers and Latin characters.
The application supports bidirectional conversion of alphanumeric characters, punctuation, spaces and katakana, including voiced and semi-voiced characters. Characters without a corresponding half-width representation, such as hiragana and kanji, are preserved unchanged.
A live version of the app is available here.
The interface consists of two main text areas and a set of controls for performing the conversions:
Input Text: A multiline text area where users can enter or paste Japanese text or other content. A character counter displays the current input length.
Conversion Buttons: Two buttons allow users to convert the input into either half-width or full-width characters.
Output Text: A read-only text area displaying the converted result, together with a character counter.
Copy Output: Copies the converted text to the clipboard, making it easy to paste the result into another application or website.
Clear All: Resets both text areas and their associated status information.
The interface uses Bootstrap cards and responsive layout utilities to keep the application compact and easy to use on both desktop and mobile devices. Font Awesome icons are used to distinguish the expansion, compression, copying and clearing operations.
The application relies almost entirely on Bootstrap for its visual presentation. The card layout, form controls, buttons, spacing and responsive grid are all implemented using standard Bootstrap classes.
No additional custom CSS is required. The two text areas use the Bootstrap form-control class, while the conversion actions use btn btn-primary to match the site's primary color scheme.
The conversion buttons use Font Awesome icons to visually communicate the direction of each operation:
fa-down-left-and-up-right-to-center represents conversion to half-width characters.
fa-up-right-and-down-left-from-center represents conversion to full-width characters.
The application is implemented using JavaScript and jQuery, without requiring any additional conversion libraries. Unicode normalization and explicit character mappings are used to handle Japanese katakana and its half-width equivalents.
The conversion logic provides two main functions:
toHalfWidth(): Converts full-width ASCII-compatible characters, spaces and Japanese katakana into their half-width equivalents.
toFullWidth(): Converts half-width ASCII characters, spaces and katakana into their full-width equivalents.
For Latin characters, numbers and punctuation, the conversion uses the Unicode relationship between the full-width ASCII range and standard ASCII characters. The offset between the two ranges is 0xFEE0.
// Full-width ASCII -> Half-width ASCII
if (cp >= 0xFF01 && cp <= 0xFF5E) {
result += String.fromCodePoint(cp - 0xFEE0);
continue;
}
// Half-width ASCII -> Full-width ASCII
if (cp >= 0x21 && cp <= 0x7E) {
result += String.fromCodePoint(cp + 0xFEE0);
continue;
}Spaces are handled separately because the full-width ideographic space (U+3000) has no equivalent in the full-width ASCII range. It is explicitly converted to the standard ASCII space and vice versa.
Katakana requires additional handling because half-width katakana characters occupy a separate Unicode block, ranging from U+FF61 to U+FF9F.
The application builds two mapping tables using JavaScript Map objects:
halfToFull: Maps individual half-width katakana characters to their full-width equivalents.
fullToHalf: Provides the reverse mapping from full-width katakana to half-width characters.
JavaScript's Unicode Compatibility Normalization (NFKC) is used to generate the character mappings automatically:
for (let cp = 0xFF61; cp <= 0xFF9F; cp++) {
const half = String.fromCodePoint(cp);
const full = half.normalize("NFKC");
halfToFull.set(half, full);
if (!fullToHalf.has(full)) {
fullToHalf.set(full, half);
}
}Voiced and semi-voiced katakana require special attention. For example, the half-width sequence ｶﾞ corresponds to the single full-width character ガ. Similarly, ﾊﾟ corresponds to パ.
These combinations are registered explicitly in the mapping tables so that both conversion directions can correctly handle dakuten and handakuten marks.
During conversion, the application checks for two-character combinations before processing individual characters. This ensures that voiced and semi-voiced kana are treated as complete units rather than converted independently.
The conversion functions process input using Array.from(), which iterates over Unicode code points rather than individual UTF-16 code units. This helps preserve characters outside the Basic Multilingual Plane, including emoji and supplementary Unicode characters.
Only characters with explicitly supported width equivalents are modified. Hiragana, kanji, line breaks and other unsupported characters remain unchanged. This is intentional because Japanese hiragana does not have a standard half-width Unicode character set.
The converter performs character-width transformations rather than general text normalization or transliteration. In particular, it does not convert hiragana into katakana or Japanese text into romaji.
The user interface is managed using jQuery. The application initializes after the document is ready and attaches event handlers to the conversion, copy and clear buttons.
A shared conversion helper receives the appropriate conversion function, processes the input text and updates the output area:
function convert(conversionFunction, message) {
const input = $inputText.val();
if (!input) {
$outputText.val("");
$status.text("Please enter some text first.");
updateCounts();
return;
}
$outputText.val(conversionFunction(input));
$status.text(message);
updateCounts();
}Both conversion buttons use this helper, avoiding duplicated interface logic. The character counters are updated whenever the input changes or a conversion is performed. They count Unicode code points using Array.from(), rather than relying on JavaScript's default string length, which counts UTF-16 code units.
The output area is read-only to prevent accidental modification of the converted result. Users can copy the output directly using the Clipboard API. A fallback based on document.execCommand("copy") is also provided for browsers where the modern Clipboard API is unavailable or inaccessible.
Finally, the Clear All button resets both text areas, updates the character counters, clears the status message and returns focus to the input field.
This Japanese Character Width Converter demonstrates how Unicode normalization, explicit character mappings and a small amount of jQuery can be combined to build a practical text manipulation tool without relying on external conversion libraries.
By supporting both full-width and half-width alphanumeric characters, punctuation, spaces and katakana, the application simplifies text preparation for Japanese websites and online forms that impose different character-width requirements.
The lightweight implementation relies on standard browser functionality and Bootstrap, making it easy to integrate into an existing HTML5 application collection while remaining responsive and straightforward to maintain.