This is a fork of https://github.com/noppa/text-security
The essential changes are:
- supports the whole Basic Multilingual Plane by specifiing multiple fonts with different unicode ranges (https://en.wikipedia.org/wiki/UTF-8) The link explains the different unicode ranges
- browser will only load needed unicode range
- typescript ( ts-node )
- possibility to create fonts for multiple unicode ranges (see build section)
Cross-browser alternative to -webkit-text-security
This is a simple set of fonts that only consists of 3 different characters.
Disc circle
and square
. For example, setting
font-family: "text-security-circle"
for
an element should then display all the element's characters in a concealed
way, like it was a password field.
This is useful if you want to get the benefits of input[type="password"]
but also combine that with other element types, like input[type="tel"]
. In
fact, the project was created for this exact purpose as an answer to a
StackOverflow
question.
No install from npm with this fork
Requires NODE 12 (unsing array flatMap)
npm install
This will print the possible options:
npm run build -- --help
Options:
--help Show help
[boolean]
--version Show version number
[boolean]
--baseName, -n Name of the base font
[string]
[default"text-security"]
--shapes, -s The shapes to build.
[array]
[choices: "circle", "square", "disc"]
[default"disc"]
--unicodes, -u Unicode ranges for the font
[array]
[default: "U+0-780"]
--outputDir, -o The relative output path for the font
[string]
[default: "./font"]
--shouldComine, -c Flag indicating if css should be combined into one file
[boolean]
[default: true]
Eg. Following command will genereate the default font folder
npm run build -- -s disc square circle -u U+0-780 U+781-5555 U+5556-aaaa U+aaab-ffff
Shows detailed conversion progress information
Generate configuration
Generate and convert fonts (This can take a while)
Font created
|> shape: disc / range: U+0-780
|> svg ✓ ttf ✓ eot ✓ woff ✓ woff2 ✓
Font created
|> shape: disc / range: U+781-5555
|> svg ✓ ttf ✓ eot ✓ woff ✓ woff2 ✓
Font created
|> shape: disc / range: U+5556-aaaa
|> svg ✓ ttf ✓ eot ✓ woff ✓ woff2 ✓
Font created
|> shape: disc / range: U+aaab-ffff
|> svg ✓ ttf ✓ eot ✓ woff ✓ woff2 ✓
.
.
.
Generate css
Finished
demo.html contains a proof-of-concept demo file, which you can just open in any browser.