diff --git a/icons/shield_ca_mb_winnipeg.svg b/icons/shield_ca_mb_winnipeg.svg deleted file mode 100644 index 913652204..000000000 --- a/icons/shield_ca_mb_winnipeg.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/icons/shield_ca_ns_h.svg b/icons/shield_ca_ns_h.svg deleted file mode 100644 index 636f74df6..000000000 --- a/icons/shield_ca_ns_h.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/icons/shield_ca_on_primary.svg b/icons/shield_ca_on_primary.svg index 71a72ce15..b6b25e117 100644 --- a/icons/shield_ca_on_primary.svg +++ b/icons/shield_ca_on_primary.svg @@ -1,4 +1,3 @@ - - + diff --git a/icons/shield_ca_tch.svg b/icons/shield_ca_tch.svg deleted file mode 100644 index 1aa807c16..000000000 --- a/icons/shield_ca_tch.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/icons/shield_ca_tch_2.svg b/icons/shield_ca_tch_2.svg new file mode 100644 index 000000000..063fe7777 --- /dev/null +++ b/icons/shield_ca_tch_2.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/shield_ca_tch_3.svg b/icons/shield_ca_tch_3.svg new file mode 100644 index 000000000..2deb71227 --- /dev/null +++ b/icons/shield_ca_tch_3.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/shield_in_nh_2.svg b/icons/shield_in_nh_2.svg index 1e9651039..8739bd0cb 100644 --- a/icons/shield_in_nh_2.svg +++ b/icons/shield_in_nh_2.svg @@ -1,3 +1,3 @@ - + diff --git a/icons/shield_in_nh_3.svg b/icons/shield_in_nh_3.svg index 8b3daed05..86b7ace5c 100644 --- a/icons/shield_in_nh_3.svg +++ b/icons/shield_in_nh_3.svg @@ -1,3 +1,3 @@ - - + + diff --git a/icons/shield_in_nh_4.svg b/icons/shield_in_nh_4.svg index 415f898da..4bd800d9f 100644 --- a/icons/shield_in_nh_4.svg +++ b/icons/shield_in_nh_4.svg @@ -1,3 +1,3 @@ - - + + diff --git a/icons/shield_kr_expressway_2.svg b/icons/shield_kr_expressway_2.svg index c74b8ea03..7bb5a8918 100644 --- a/icons/shield_kr_expressway_2.svg +++ b/icons/shield_kr_expressway_2.svg @@ -1,6 +1,4 @@ - - - - + + diff --git a/icons/shield_kr_expressway_3.svg b/icons/shield_kr_expressway_3.svg index b6c43ffe7..a2b1100c5 100644 --- a/icons/shield_kr_expressway_3.svg +++ b/icons/shield_kr_expressway_3.svg @@ -1,6 +1,4 @@ - - - - + + diff --git a/icons/shield_us_fl_toll.svg b/icons/shield_us_fl_toll.svg index 1c83dbe7b..5c0d2ba74 100644 --- a/icons/shield_us_fl_toll.svg +++ b/icons/shield_us_fl_toll.svg @@ -1,7 +1,5 @@ - - - + + + - - diff --git a/icons/shield_us_ut_2.svg b/icons/shield_us_ut_2.svg index 598cb1678..a9e493979 100644 --- a/icons/shield_us_ut_2.svg +++ b/icons/shield_us_ut_2.svg @@ -1,4 +1,4 @@ - - + + diff --git a/icons/shield_us_ut_3.svg b/icons/shield_us_ut_3.svg index 946896860..1895ac7f2 100644 --- a/icons/shield_us_ut_3.svg +++ b/icons/shield_us_ut_3.svg @@ -1,4 +1,4 @@ - - + + diff --git a/scripts/build.ts b/scripts/build.ts index 69254cbec..1ba418418 100644 --- a/scripts/build.ts +++ b/scripts/build.ts @@ -25,9 +25,13 @@ const buildWith = async ( await mkdir("dist", { recursive: true }); await Promise.all( - ["index.html", "bare_map.html", "shieldtest.html", "favicon.ico"].map((f) => - copyFile(`src/${f}`, `dist/${f}`) - ) + [ + "index.html", + "bare_map.html", + "shieldtest.html", + "favicon.ico", + "fonts.css", + ].map((f) => copyFile(`src/${f}`, `dist/${f}`)) ); const localConfig = await maybeLocalConfig(); diff --git a/shieldlib/README.md b/shieldlib/README.md index 988dcd3db..6df7226bc 100644 --- a/shieldlib/README.md +++ b/shieldlib/README.md @@ -87,13 +87,13 @@ The structure is as follows: "bannerPadding": 1, "bannerTextColor": "black", "bannerTextHaloColor": "white", - "shieldFont": "sans-serif-condensed, 'Arial Narrow', sans-serif", + "shieldFont": "'Noto Sans Condensed', sans-serif-condensed, 'Arial Narrow', sans-serif", "shieldSize": 20 }, "default": { ...definition }, "network_1": { ...definition }, "network_2": { ...definition }, - "network_2": { ...definition } + "network_3": { ...definition } } ``` @@ -104,7 +104,7 @@ The options block contains global parameters that apply across all shield drawin - **`bannerPadding`**: padding between each banner - **`bannerTextColor`**: color to draw text banners above the shield - **`bannerTextHaloColor`**: color to draw an outline around the text banner -- **`shieldFont`**: font to use for shield text and banners +- **`shieldFont`**: ordered list of fonts to use for shield text and banners. This project uses Noto Sans Condensed by default, hosted as a downloadable web font on [another repository](https://github.com/osm-americana/web-fonts). - **`shieldSize`**: "standard" size to use for shields in 1x pixels. However, some shields may diverge, for example, drawn diamond shields are drawn slightly larger for visual similarity with squares. You should create one definition entry for each network. The entry key must match the encoded `network` value exactly. The "default" network defines what should be drawn if there's no definition for a particular network. A network definiton can contain any combination of the following parameters: diff --git a/shieldlib/src/screen_gfx.ts b/shieldlib/src/screen_gfx.ts index e3fe2b55c..eec3087e8 100644 --- a/shieldlib/src/screen_gfx.ts +++ b/shieldlib/src/screen_gfx.ts @@ -4,7 +4,7 @@ import rgba from "color-rgba"; const defaultFontFamily = '"sans-serif-condensed", "Arial Narrow", sans-serif'; export const shieldFont = (size: number, fontFamily: string) => - `bold ${size}px ${fontFamily || defaultFontFamily}`; + `condensed 500 ${size}px ${fontFamily || defaultFontFamily}`; export const fontSizeThreshold = 12; // Replaces `sourceVal` with a blend of `lightenVal` and `darkenVal` proportional to the brightness; diff --git a/shieldlib/src/shield_helper.ts b/shieldlib/src/shield_helper.ts index f70c8b0b4..da386c6e6 100644 --- a/shieldlib/src/shield_helper.ts +++ b/shieldlib/src/shield_helper.ts @@ -188,12 +188,12 @@ export function fishheadDownShield( outlineWidth: 1, }, }, - textLayout: textConstraint("roundedRect"), + textLayout: textConstraint("ellipse"), padding: { - left: 3, - right: 3, - top: 2, - bottom: 6, + left: 1, + right: 1, + top: 1, + bottom: 5, }, textColor, }; diff --git a/src/fonts.css b/src/fonts.css new file mode 100644 index 000000000..166b520f5 --- /dev/null +++ b/src/fonts.css @@ -0,0 +1,18 @@ +@font-face { + font-family: "Noto Sans Condensed"; + src: url("https://osm-americana.github.io/web-fonts/noto/NotoSans-CondensedMedium-PropNums.woff2") + format("woff2"), + url("https://osm-americana.github.io/web-fonts/noto/NotoSans-CondensedMedium-PropNums.woff") + format("woff"); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: "Noto Sans Armenian Condensed"; + src: url("https://osm-americana.github.io/web-fonts/noto/NotoSansArmenian-CondensedMedium-PropNums.woff2") + format("woff2"), + url("https://osm-americana.github.io/web-fonts/noto/NotoSansArmenian-CondensedMedium-PropNums.woff") + format("woff"); + font-weight: 500; + font-style: normal; +} diff --git a/src/index.html b/src/index.html index 3a828f824..89a840fd2 100644 --- a/src/index.html +++ b/src/index.html @@ -3,6 +3,8 @@ OpenStreetMap Americana + + +

+ Invisible text so the font will load early +

Shield Test - - - + +