Calculator Key Font Helper

A JavaScript library for converting calculator key notation into styled calculator font display, with accessibility support.

Demo: kfh.pages.dev

GitHub: CalcWorld/KeyFontHelper

What it does

Calculator Key Font Helper transforms calculator notation like [sin]30 into properly styled text () that matches the appearance of actual calculator keys.

Supported Fonts

• ClassWiz CW Series: ClasWiz CW01, CW02, CW03, CW04
• ClassWiz EX Series: ClassWiz, DE, Fr, CE, RS
• fx-ES (PLUS) Series: ES03, ES04
• fx-MS Series: MS01

Installation

npm install calc-key

The package includes the conversion library and mappings. Font files are not included; load the corresponding calculator fonts separately to display the generated HTML correctly.

Quick Start

import { text2KeyFont, text2KeyFontBySeries } from 'calc-key';

// Convert text for a specific calculator font
const result1 = text2KeyFont('cw01', '[sin]30[)][+][cos]60');
// <span style="font-family:'CASIO ClassWiz CW01'">j</span>30<span style="font-family:'CASIO ClassWiz CW01'">)</span><span style="font-family:'CASIO ClassWiz CW01'">+</span><span style="font-family:'CASIO ClassWiz CW01'">k</span>60

// Convert text for all fonts in a series
const result2 = text2KeyFontBySeries('cw', '[tg]30[)][+][cos]60');
// <span style="font-family:'CASIO ClassWiz CW02'">:</span>30<span style="font-family:'CASIO ClassWiz CW01'">)</span><span style="font-family:'CASIO ClassWiz CW01'">+</span><span style="font-family:'CASIO ClassWiz CW01'">k</span>60

// [Option] Enable title and aria-label attribute
const result3 = text2KeyFontBySeries('cw', '5[d/c]6', { title: true, ariaLabel: true });
// 5<span style="font-family:'CASIO ClassWiz CW01'" title="&#x005B;&#x0064;&#x002F;&#x0063;&#x005D;" aria-label="&#x005B;&#x0064;&#x002F;&#x0063;&#x005D;">a</span>6

CommonJS

const { text2KeyFont, text2KeyFontBySeries, config, series } = require('calc-key');

Browser script

<script src="https://cdn.jsdelivr.net/npm/calc-key/dist/kfh.js"></script>
<script>
  const html = kfh.text2KeyFont('cw01', '[sin]30');
</script>

ES modules and CommonJS expose text2KeyFont, text2KeyFontBySeries, config, and series.

API Call

Get Key Config

All key font config

GET /api/config

Specific font config

GET /api/config?type=font&font=cw01

Specific series key font config

GET /api/config?type=series&series=cw

Convert Key Text

Convert text for a specific calculator font

GET /api/html?type=font&font=cw01&text=[sin]30[)][%2B][cos]60

Convert text for all fonts in a series

GET /api/html?type=series&series=cw&text=[tg]30[)][%2B][cos]60

Note:

• Replace the font and series parameters above according to your actual needs.
• To include optional accessibility attributes, add &title=1, &ariaLabel=1, or both to the Convert Key Text API URL.

How it works

The library maps characters to calculator key representations using font-specific configurations. Each calculator font has its own key mapping that defines how text should be styled.

LICENSE

GPL-3.0-or-later