Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add Saudi Arabia national shields #851

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from
Draft

Conversation

claysmalley
Copy link
Member

@claysmalley claysmalley commented Apr 8, 2023

Roads in Saudi Arabia are signed solely in Eastern Arabic numerals. This PR contains code to convert digits to Eastern Arabic.

Currently, only one national route is mapped with network=SA:national, and all other routes are missing either the network=* tag or a relation altogether. But SA:national clearly represents a coherent network, and this could encourage local mappers to complete the tags for other routes.

Screenshot from 2023-04-08 14-08-58

Screenshot from 2023-04-08 14-15-36
Screenshot from 2023-04-08 14-16-09

@@ -2,7 +2,9 @@

import rgba from "color-rgba";

const fontFamily = '"sans-serif-condensed", "Arial Narrow", sans-serif';
const naskhFonts =
'"Noto Naskh Arabic", KacstNaskh, "Sakkal Majalla", "DecoType Naskh Regular"';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I picked a few Naskh fonts that are available by default on most operating systems. I'm not 100% sure these are all the best choices, but they look close enough to the style as shown on Saudi shields.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Legibility doesn't look good on my system:

image

Why not use the packaged Americana fontstacks that have Arabic?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shields are rendered client-side using fonts available to the browser. We would have to re-engineer shields to render text from a PBF fontstack instead of standard web formats.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh duh good point. Don't you need some kind of <link> tag to use the Google Noto fonts?

Copy link
Member

@ZeLonewolf ZeLonewolf Apr 8, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something like

<link href='https://fonts.googleapis.com/css?family=Noto Naskh Arabic' rel='stylesheet'>

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not if it's already installed on the system, as with Android. But downloading and displaying Noto on all systems is an option.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a reason we wouldn't? I assume it's just a one time download into browser cache.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suppose not. Though we might as well include Noto Sans Armenian as well, if consistency is what we're going for.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess we'll need whatever scripts would get rendered into shields.

src/js/shield.js Outdated Show resolved Hide resolved
src/js/shield.js Outdated
Comment on lines 404 to 405
case "arab":
routeDef.ref = latinToArabicDigits(routeDef.ref);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Roads in Saudi Arabia are signed solely in Eastern Arabic numerals. This PR contains code to convert digits to Eastern Arabic.

In #676, I included a Roman numeral conversion function because the Roman numerals were purely decorative. In plain text (and even some signs), the route numbers are in Western Arabic numerals. By contrast, Eastern Arabic is the local language’s numeral system. Would it be more appropriate to render the number however it’s tagged in ref, allowing mappers the flexibility to shunt the transliterated number to a subkey such as ref:Latn?

/ref #467 (comment)

Copy link
Member

@ZeLonewolf ZeLonewolf Apr 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a philosophical question indeed. Off the cuff I would say the ref should have the Eastern Arabic numbers in them, which we would render with the right font. This PR takes a more resilient approach and papers over the difference at the expense of not exposing what we might agree is an error.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be worth asking the folks that implemented the scheme though I'm not sure who to ask.

Copy link
Member

@1ec5 1ec5 Apr 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that most of Saudi Arabia’s highways are also part of the Arab Mashreq International Road Network, which is signposted and tagged in Western Arabic numerals: #466.

@@ -3687,6 +3687,20 @@ export function loadShields() {
},
};

// Saudi Arabia
shields["SA:national"] = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently, only one national route is mapped with network=SA:national, and all other routes are missing either the network=* tag or a relation altogether. But SA:national clearly represents a coherent network, and this could encourage local mappers to complete the tags for other routes.

The one network=SA:national route is what Saudi Arabia calls a “highway” route, as opposed to a “city road” or “branch road”. All three classifications are part of a nationwide system. Part of Highway 40 has been mapped redundantly as network=SA:highway. If we could get a local mapper to confirm their preference, that might also have the effect of encouraging more build-out of these route relations.

src/js/shield.js Outdated Show resolved Hide resolved
<style id="style12736" type="text/css">
.st2{display:none}.st0{fill:#1a1113;stroke:#000}.st1{fill:#21150d}.st2{fill:#1a1512}.st3{fill:#26201a}.st4{fill:#332822}.st5{fill:#00582b;stroke:#003000}.st6{fill:#006c35}.st7{fill:#00803f}.st8{fill:#009449}.st9{fill:#00a853}.st10{fill:none;stroke:#003000;stroke-linecap:round}.st11{fill:#adc8db;stroke:#505050}.st12{fill:#c9dbe7}.st13{fill:#e4edf3}.st14{fill:#f2f7fa}.st15{fill:#d8ad00;stroke:#9c6000;stroke-miterlimit:10}.st16{fill:#fc0}.st17{fill:#ffd429}.st18{fill:#ffdc51}.st19{fill:none;stroke:#9c6000;stroke-linecap:round}.st20{fill:#9c6000}
</style>
<path style="fill:#fff;fill-opacity:1;stroke:#006747;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" d="M 4.3137644,1 C 3.8492079,1.2791464 3.3643899,1.5481425 2.8135025,1.5720743 2.5301496,1.7988797 3.1220327,2.0672964 3.2487494,2.2868126 3.74522,2.6760005 3.3397435,2.4751195 3.2089685,2.7792411 3.3153332,3.164358 2.8966442,3.0307546 2.6965448,3.1329313 2.4692966,3.2866578 2.3434561,3.8461563 1.9353155,3.7120804 1.7033785,3.6741775 1.1181472,3.4075228 1.2343171,3.8659058 1.1836197,4.0687148 1.2109496,4.3795171 1.1111662,4.5751992 1.0034179,4.7348102 0.89635621,4.9578449 1.1855069,4.9539668 1.2478523,4.7118357 1.6581687,4.9648988 1.6794047,5.1926358 1.887515,5.3702657 1.9376454,5.6640074 2.1222448,5.84807 2.3751187,6.0430095 2.4307843,6.3829578 2.5992933,6.6068199 2.799276,6.8095433 2.8919397,7.1145056 3.1230109,7.3478722 c 0.3163833,0.2194855 -0.056853,0.3718614 0.1290528,0.5567673 0.1009276,0.3760652 0.4020278,0.5002508 0.7765992,0.6627499 0.4209357,0.3041748 0.3639255,0.8859852 0.6936545,1.2418362 0.1342552,0.1826742 0.010113,0.4894664 -0.00873,0.7287884 0.1863205,0.191439 0.056059,0.510349 0.1931699,0.73593 0.2490773,0.167053 0.09684,0.365887 0.3786881,0.532097 0.1157623,0.295902 0.5107813,0.137251 0.620445,0.46034 0.2852824,0.07054 0.3971888,0.374119 0.4842509,0.5973 0.1262275,0.276486 0.1943561,0.610407 0.3814566,0.81315 0.05503,0.208702 0.2075853,0.400966 0.3881644,0.584597 0.2749861,0.164692 0.3400216,0.442233 0.4706091,0.706938 0.2609456,0.21521 0.3333422,0.501996 0.2839625,0.830249 -0.090444,0.263371 0.071409,0.565306 -0.045736,0.658609 -0.052229,0.20081 0.3122414,0.403181 0.2521199,0.717143 0.1094353,0.272464 0.027472,0.524945 0.2443919,0.760762 0.028435,0.292829 0.064572,0.557238 0.1631924,0.800975 0.044448,0.269543 0.3479729,0.265548 0.6127877,0.263494 0.2374486,-0.101605 0.4304353,-0.109255 0.6999526,-0.04011 0.037881,-0.299693 0.2758696,-0.369578 0.4992786,-0.519641 0.09741,-0.173474 0.26669,-0.103092 0.474031,-0.157764 0.271578,0.0052 0.388464,-0.03311 0.613321,-0.11498 0.171011,0.02804 0.45041,-0.312783 0.647871,-0.386393 0.08291,-0.162003 0.31356,0.01466 0.529536,-0.102586 0.21142,-0.04306 0.406205,-0.257519 0.488138,-0.414741 0.122381,-0.225348 0.416162,-0.227733 0.683429,-0.238288 0.255018,-0.05095 0.385422,-0.274681 0.691106,-0.297328 0.281053,-0.07512 0.557881,-0.184409 0.765337,-0.319293 0.381056,-0.02642 0.143443,-0.527409 0.214511,-0.653441 0.08156,-0.276873 0.57915,-0.300448 0.829043,-0.474832 0.260635,-0.03442 0.644025,-0.439445 0.768162,-0.247728 0.178655,-0.07158 0.465272,0.179615 0.605739,-0.15167 0.225364,-0.09146 -0.0087,-0.544765 0.311861,-0.678317 0.338195,-0.02463 0.506419,0.03713 0.705235,-0.08414 -0.04914,-0.625937 0.461364,-0.825775 0.938729,-0.942253 0.150754,-0.263545 -0.03863,-0.445858 -0.06129,-0.727516 0.124519,-0.16605 -0.02143,-0.586593 0.261629,-0.697469 0.03883,0.444876 0.429151,0.03411 0.392414,-0.12238 -0.0055,-0.273058 0.157486,-0.320926 0.344457,-0.435366 0.07941,-0.259705 0.168815,-0.429732 0.324196,-0.554808 0.04572,-0.243209 0.166439,-0.444061 0.121693,-0.7379902 C 20.83869,9.8127734 20.522218,9.6861652 20.431585,9.3845407 20.225535,9.0634961 19.909041,8.6877844 19.488669,8.7582545 19.208358,8.6333385 18.879523,8.5996632 18.632096,8.3597677 18.409775,8.2029922 18.324512,7.9469118 18.145442,7.7046262 18.228084,7.3904927 17.954016,7.1522435 18.062677,6.8758794 18.13613,6.6397776 18.038083,6.1279116 17.824484,6.4395324 17.65749,6.6516302 17.75338,6.8468004 17.516677,6.9552645 17.343123,7.0368255 17.207302,7.3997479 16.985047,7.508199 16.853309,7.7099414 16.66423,7.9366774 16.625785,8.1185758 16.497557,8.3155226 16.247834,8.1929588 16.019946,8.3246583 15.779121,8.5928635 15.48286,8.2518563 15.197778,8.3180283 15.078781,8.4626691 14.572212,8.6589364 14.655156,8.2633123 14.5005,8.1783003 14.264413,8.2734113 14.3739,7.9603644 14.463139,7.747792 14.561661,7.4824917 14.387665,7.2811401 14.305115,7.0836348 14.526737,6.7783622 14.202765,6.6051108 13.995404,6.4983198 13.783931,6.5730848 13.73848,6.9094551 13.608026,6.9542481 13.706253,7.7807895 13.58612,7.306844 13.498098,7.0060554 13.134601,6.8243725 13.246226,6.4680507 13.259149,6.121132 13.224122,6.1436112 12.98783,5.8459692 12.776669,5.7747115 12.67084,5.5302316 12.496535,5.4115344 12.366755,5.1907696 12.017655,5.0697559 12.000264,4.7897077 11.855838,4.5757747 11.739645,4.2199266 11.364906,4.3218688 10.98494,4.3812401 10.959643,3.7519039 10.549254,3.8545496 9.9411817,3.7641064 9.3036658,3.7462157 8.713742,3.6110542 7.6917476,2.825552 6.7062758,1.9857938 5.5718481,1.3645029 5.2146445,1.0783532 4.7379204,1.1134174 4.3137644,1 Z" id="polyF1S187P4"/>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we simplify this shape a bit, I think it would become more feasible to tweak it to better accommodate the numerals at a slightly larger font size. I don’t have any concrete suggestions, since this is a pretty irregular shape, but maybe play around with it a bit.

@ZeLonewolf
Copy link
Member

It does seem a bit better with the web fonts but not sure how legible it would be to an Arabic speaker. Do we think this looks OK or should we try to enlarge or skew the shape a bit?

image

@ZeLonewolf
Copy link
Member

Shieldtest output:

image

@claysmalley claysmalley marked this pull request as draft April 13, 2023 00:16
@1ec5
Copy link
Member

1ec5 commented Apr 13, 2023

Looks like Latin text in that screenshot has regressed: it’s a serif font instead of a sans-serif font.

@ZeLonewolf
Copy link
Member

Needs to resolve conflicts.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: In Progress
Development

Successfully merging this pull request may close these issues.

3 participants