Avoid reserved Codepoints U+FE00...U+FE0F and U+FE20...U+FE2F
Opened this issue · 1 comments
stephenquan commented
The following codepoints are reserved and should be avoided:
- U+FE00...U+FE0F are Variation Selectors - see https://codepoints.net/variation_selectors
- U+FE20...U+FE2F are Combining Half Marks - see https://codepoints.net/combining_half_marks
In my project I have 3380 SVGs icons. I am not explicitly setting codepoints. Codepoints U+F101 (DEFAULT_START_CODEPOINT) ... U+FE3F are automatically allocated by fantasticon. However, these codepoints collide with the reserved codepoints and create rendering issues.
Here's a repro makeicons.sh
script:
#!/bin/bash
# Generate 3380 SVG icons (solid triangle)
mkdir -p icons
((DEFAULT_START_CODEPOINT=16#f101))
for ((i=0;i<3380;i++))
do
echo '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 8L24 24 L 8 24z"/></svg>' > $(printf 'icons/icon-%x.svg' $((DEFAULT_START_CODEPOINT+i)))
if ((i % 100 == 0)); then echo "$((i+1)) icons created ..."; fi
done
echo "$i total icons created"
# Generate my-icons.js
cat > my-icons.js <<EOF
module.exports = {
name: 'my-icons',
fontHeight: 500,
normalize: true,
inputDir: './icons',
outputDir: './dist',
fontTypes: ['ttf'],
assetTypes: ['css', 'json', 'html'],
formatOptions: {
json: {
indent: 2
}
},
getIconId: ({
basename,
relativeDirPath,
absoluteFilePath,
relativeFilePath,
index
}) => {
return basename;
}
};
EOF
# Generate my-icons.ttf
mkdir -p dist
fantasticon --config ./my-icons.js
dist/my-icons.html
below shows that icons in U+FE00...U+FE0F are blank and icons in the U+FE20...U+FE2F` are not centered but left jusitifed.
If #527 was implemented, it could help dodge the problematic codepoints.
stephenquan commented
Workaround, insert into the codepoints dictionary object reservation for the affected codepoints, e.g.
module.exports = {
name: 'my-icons',
fontHeight: 500,
normalize: true,
inputDir: './icons',
outputDir: './dist',
fontTypes: ['ttf'],
assetTypes: ['css', 'json', 'html'],
formatOptions: {
json: {
indent: 2
}
},
codepoints: {
// U+FE00...U+FE0F Variation Selectors - see https://codepoints.net/variation_selectors
'variable-selector-00': 0xfe00,
'variable-selector-01': 0xfe01,
'variable-selector-02': 0xfe02,
'variable-selector-03': 0xfe03,
'variable-selector-04': 0xfe04,
'variable-selector-05': 0xfe05,
'variable-selector-06': 0xfe06,
'variable-selector-07': 0xfe07,
'variable-selector-08': 0xfe08,
'variable-selector-09': 0xfe09,
'variable-selector-0a': 0xfe0a,
'variable-selector-0b': 0xfe0b,
'variable-selector-0c': 0xfe0c,
'variable-selector-0d': 0xfe0d,
'variable-selector-0e': 0xfe0e,
'variable-selector-0f': 0xfe0f,
// U+FE20...U+FE2F Combining Half Marks - see https://codepoints.net/combining_half_marks
'combining-half-marks-00': 0xfe20,
'combining-half-marks-01': 0xfe21,
'combining-half-marks-02': 0xfe22,
'combining-half-marks-03': 0xfe23,
'combining-half-marks-04': 0xfe24,
'combining-half-marks-05': 0xfe25,
'combining-half-marks-06': 0xfe26,
'combining-half-marks-07': 0xfe27,
'combining-half-marks-08': 0xfe28,
'combining-half-marks-09': 0xfe29,
'combining-half-marks-0a': 0xfe2a,
'combining-half-marks-0b': 0xfe2b,
'combining-half-marks-0c': 0xfe2c,
'combining-half-marks-0d': 0xfe2d,
'combining-half-marks-0e': 0xfe2e,
'combining-half-marks-0f': 0xfe2f,
},
getIconId: ({
basename,
relativeDirPath,
absoluteFilePath,
relativeFilePath,
index
}) => {
return basename;
}
};