Add support for numeric font weight
#6990
improve mapbox text weight and italic handling
- Loading branch information
commit f3c0356c18f9a5960b9b9851456c62cae78e061c
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| 'use strict'; | ||
|
|
||
| // Must use one of the following fonts as the family, else default to 'Open Sans Regular' | ||
| // See https://github.com/openmaptiles/fonts/blob/gh-pages/fontstacks.json | ||
| var supportedFonts = [ | ||
| 'Metropolis Black Italic', | ||
| 'Metropolis Black', | ||
| 'Metropolis Bold Italic', | ||
| 'Metropolis Bold', | ||
| 'Metropolis Extra Bold Italic', | ||
| 'Metropolis Extra Bold', | ||
| 'Metropolis Extra Light Italic', | ||
| 'Metropolis Extra Light', | ||
| 'Metropolis Light Italic', | ||
| 'Metropolis Light', | ||
| 'Metropolis Medium Italic', | ||
| 'Metropolis Medium', | ||
| 'Metropolis Regular Italic', | ||
| 'Metropolis Regular', | ||
| 'Metropolis Semi Bold Italic', | ||
| 'Metropolis Semi Bold', | ||
| 'Metropolis Thin Italic', | ||
| 'Metropolis Thin', | ||
| 'Open Sans Bold Italic', | ||
| 'Open Sans Bold', | ||
| 'Open Sans Extra Bold Italic', | ||
| 'Open Sans Extra Bold', | ||
| 'Open Sans Italic', | ||
| 'Open Sans Light Italic', | ||
| 'Open Sans Light', | ||
| 'Open Sans Regular', | ||
| 'Open Sans Semibold Italic', | ||
| 'Open Sans Semibold', | ||
| 'Klokantech Noto Sans Bold', | ||
| 'Klokantech Noto Sans CJK Bold', | ||
| 'Klokantech Noto Sans CJK Regular', | ||
| 'Klokantech Noto Sans Italic', | ||
| 'Klokantech Noto Sans Regular' | ||
| ]; | ||
|
|
||
| module.exports = { | ||
| isSupportedFont: function(a) { | ||
| return supportedFonts.indexOf(a) !== -1; | ||
| } | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -10,6 +10,7 @@ var Colorscale = require('../../components/colorscale'); | |
| var Drawing = require('../../components/drawing'); | ||
| var makeBubbleSizeFn = require('../scatter/make_bubble_size_func'); | ||
| var subTypes = require('../scatter/subtypes'); | ||
| var isSupportedFont = require('./constants').isSupportedFont; | ||
| var convertTextOpts = require('../../plots/mapbox/convert_text_opts'); | ||
| var appendArrayPointValue = require('../../components/fx/helpers').appendArrayPointValue; | ||
|
|
||
|
|
@@ -372,13 +373,20 @@ function getTextFont(trace) { | |
| var family = font.family; | ||
| var style = font.style; | ||
| var weight = font.weight; | ||
|
|
||
| var parts = family.split(' '); | ||
| var isItalic = parts[parts.length - 1] === 'Italic'; | ||
| if(isItalic) parts.pop(); | ||
| isItalic = isItalic || style === 'italic'; | ||
|
|
||
| var str = parts.join(' '); | ||
| if(weight === 'bold' && parts.indexOf('Bold') === -1) { | ||
| str += ' Bold'; | ||
| } else if(weight <= 1000) { // numeric font-weight | ||
| // See supportedFonts | ||
|
|
||
| if(parts[0] === 'Metropolis') { | ||
| str = 'Metropolis'; | ||
| if(weight > 850) str += ' Black'; | ||
| else if(weight > 750) str += ' Extra Bold'; | ||
| else if(weight > 650) str += ' Bold'; | ||
|
|
@@ -387,26 +395,35 @@ function getTextFont(trace) { | |
| else if(weight > 350) str += ' Regular'; | ||
| else if(weight > 250) str += ' Light'; | ||
| else if(weight > 150) str += ' Extra Light'; | ||
| else str += ' Thin'; | ||
| } else if(parts[0] === 'Open' && parts[1] === 'Sans') { | ||
| str = 'Open Sans'; | ||
|
|
||
| // N.B.Extra Bold is not supported although is listed as supported! | ||
| /* if(weight > 750) str += ' Extra Bold'; | ||
| else */ if(weight > 650) str += ' Bold'; | ||
| else if(weight > 550) str += ' Semibold'; | ||
| else if(weight > 350) str += ' Regular'; | ||
| else str += ' Light'; | ||
| } else { // Other families | ||
| str = 'Klokantech Noto Sans'; | ||
|
There was a problem hiding this comment. Doesn't this There was a problem hiding this comment. oh I see, maybe not, because it has already passed through the There was a problem hiding this comment. Good point. No that shouldn't happen because further down we test and ensure the font is supported. There was a problem hiding this comment. Addressed in bff00ac. |
||
| if(parts[3] === 'CJK') str += ' CJK'; | ||
| str += (weight > 500) ? ' Bold' : ' Regular'; | ||
| } | ||
| } | ||
|
|
||
| if(isItalic) str += ' Italic'; | ||
|
|
||
| if(str === 'Open Sans Regular Italic') str = 'Open Sans Italic'; | ||
| else if(str === 'Open Sans Regular Bold') str = 'Open Sans Bold'; | ||
| else if(str === 'Open Sans Regular Bold Italic') str = 'Open Sans Bold Italic'; | ||
| else if(str === 'Klokantech Noto Sans Regular Italic') str = 'Klokantech Noto Sans Italic'; | ||
|
|
||
| // Ensure the result is a supported font | ||
| if(!isSupportedFont(str)) { | ||
| str = family; | ||
| } | ||
|
|
||
| var textFont = str.split(', '); | ||
| return textFont; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@archmoj Does Mapbox make their list of supported fonts public anywhere as part of their package? Just wondering if there's a way we can ensure this list is always up-to-date without updating it manually.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No in fact we use latest v1 version of
mapbox-gl. Due to the licence changes of their v2+ no significant v1 is expected. On the other hand we may switch tomaplibre-gl-jswhich is the continuation ofmapb0x-glv1. See #5578.BTW we could possibly improve our docs for these fonts in a separate PR.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
OK got it. Do you know to what extent
maplibresupports different font weights? Basically, will adding these options make switching tomaplibresignificantly more complicated?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think so. It's a kind of problem we could address when/if we switch to it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@emilykl , there is a migration branch in here maplibre where we should be able to try out: