Skip to content

Instantly share code, notes, and snippets.

@amosuro

amosuro/bbc_arabic.scss

Created March 8, 2019 13:00
Show Gist options
  • Save amosuro/27d970e7c4b8975634982ddb0e28d38d to your computer and use it in GitHub Desktop.
Save amosuro/27d970e7c4b8975634982ddb0e28d38d to your computer and use it in GitHub Desktop.
Download ZIP
Font measurements
Raw
bbc_arabic.scss
@import '../utils';
.bbc_arabic {
direction: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,DIRECTION)};
font-family: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,FONT_FAMILY)};
#content * {
visibility: visible;
}
.line > span {
font-kerning: none;
position: relative;
vertical-align: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,FONT_TOP_OFFSET)};
}
// ***START: LINE-HEIGHT ADJUSTMENTS***
// compressed variant (default)
&.compressed .bottom .line,
&.compressed .middle .line,
&.compressed .top .line{
margin-top: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,LINE_HEIGHT_OFFSET,COMPRESSED)};
}
// expanded variant
&.expanded .bottom .line,
&.expanded .middle .line,
&.expanded .top .line{ // vertical position bottom + middle
margin-top: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,LINE_HEIGHT_OFFSET,EXPANDED)};
}
// ***END: LINE-HEIGHT ADJUSTMENTS***
// ***START: TYPOGRAPHY***
// title2Line
.title2Line {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,TITLE_2_LINE,FONT_SIZE)};
font-weight: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,TITLE_2_LINE,FONT_WEIGHT)};
}
.vertical .title2Line {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,VERTICAL,CAPTION_TYPES,TITLE_2_LINE,FONT_SIZE)};
}
// title2LineSplit
.serif.title2LineSplit {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,TITLE_2_LINE_SPLIT,SERIF,FONT_SIZE)};
font-weight: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,TITLE_2_LINE_SPLIT,SERIF,FONT_WEIGHT)};
}
.sans.title2LineSplit {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,TITLE_2_LINE_SPLIT,SANS,FONT_SIZE)};
font-weight: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,TITLE_2_LINE_SPLIT,SANS,FONT_WEIGHT)};
}
.vertical .serif.title2LineSplit {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,VERTICAL,CAPTION_TYPES,TITLE_2_LINE_SPLIT,SERIF,FONT_SIZE)};
font-weight: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,VERTICAL,CAPTION_TYPES,TITLE_2_LINE_SPLIT,SERIF,FONT_WEIGHT)};
}
.vertical .sans.title2LineSplit {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,VERTICAL,CAPTION_TYPES,TITLE_2_LINE_SPLIT,SANS,FONT_SIZE)};
font-weight: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,VERTICAL,CAPTION_TYPES,TITLE_2_LINE_SPLIT,SANS,FONT_WEIGHT)};
}
// chapter
.sans.chapter {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,CHAPTER,SANS,FONT_SIZE)};
font-weight: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,CHAPTER,SANS,FONT_WEIGHT)};
}
.serif.chapter {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,CHAPTER,SERIF,FONT_SIZE)};
font-weight: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,CHAPTER,SERIF,FONT_WEIGHT)};
}
.vertical .sans.chapter {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,VERTICAL,CAPTION_TYPES,CHAPTER,SANS,FONT_SIZE)};
font-weight: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,VERTICAL,CAPTION_TYPES,CHAPTER,SANS,FONT_SIZE)};
}
.vertical .serif.chapter {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,VERTICAL,CAPTION_TYPES,CHAPTER,SERIF,FONT_SIZE)};
font-weight: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,VERTICAL,CAPTION_TYPES,CHAPTER,SERIF,FONT_WEIGHT)};
}
// narrative
.narrative {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,NARRATIVE,FONT_SIZE)};
font-weight: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,NARRATIVE,FONT_WEIGHT)};
}
.vertical .narrative {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,VERTICAL,CAPTION_TYPES,NARRATIVE,FONT_SIZE)};
}
.square .narrative {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,SQUARE,CAPTION_TYPES,NARRATIVE,FONT_SIZE)};
}
// quote
.quote2 {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,QUOTE_2,FONT_SIZE)};
}
.serif.quote2attribution{
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,QUOTE_2,ATTRIBUTION,SERIF,FONT_SIZE)};
}
.quote2attribution{
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,QUOTE_2,ATTRIBUTION,SANS,FONT_SIZE)};
}
.vertical .quote2 {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,VERTICAL,CAPTION_TYPES,QUOTE_2,FONT_SIZE)};
}
.vertical .serif.quote2attribution{
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,VERTICAL,CAPTION_TYPES,QUOTE_2,ATTRIBUTION,SERIF,FONT_SIZE)};
}
.vertical .quote2attribution{
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,VERTICAL,CAPTION_TYPES,QUOTE_2,ATTRIBUTION,SANS,FONT_SIZE)};
}
// name
.serif.name {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,NAME,SERIF,FONT_SIZE)};
font-weight: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,NAME,SERIF,FONT_WEIGHT)};
}
.sans.name {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,NAME,SANS,FONT_SIZE)};
}
.vertical .serif.name {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,VERTICAL,CAPTION_TYPES,NAME,SERIF,FONT_SIZE)};
font-weight: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,VERTICAL,CAPTION_TYPES,NAME,SERIF,FONT_WEIGHT)};
}
.vertical .sans.name {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,VERTICAL,CAPTION_TYPES,NAME,SANS,FONT_SIZE)};
}
.square .serif.name {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,SQUARE,CAPTION_TYPES,NAME,SERIF,FONT_SIZE)};
font-weight: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,SQUARE,CAPTION_TYPES,NAME,SERIF,FONT_WEIGHT)};
}
.square .sans.name {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,SQUARE,CAPTION_TYPES,NAME,SANS,FONT_SIZE)};
}
// subtitle2
.subtitle2 {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,SUBTITLE_2,FONT_SIZE)};
font-weight: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,SUBTITLE_2,FONT_WEIGHT)};
}
.vertical .subtitle2 {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,VERTICAL,CAPTION_TYPES,SUBTITLE_2,FONT_SIZE)};
}
.square .subtitle2 {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,SQUARE,CAPTION_TYPES,SUBTITLE_2,FONT_SIZE)};
font-weight: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,SQUARE,CAPTION_TYPES,SUBTITLE_2,FONT_WEIGHT)};
}
// credit
.credit {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,CREDIT,FONT_SIZE)};
}
.credit .bold {
font-weight: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,CREDIT,FONT_WEIGHT)};
}
.vertical .credit {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,VERTICAL,CAPTION_TYPES,CREDIT,FONT_SIZE)};
}
.vertical .credit .bold {
font-weight: bold;
}
// highlight
.highlight {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,HORIZONTAL,CAPTION_TYPES,HIGHLIGHT,FONT_SIZE)};
}
.vertical .highlight {
font-size: #{map-deep-get($SCRIPT_TYPE_METRICS,BBC_ARABIC,VERTICAL,CAPTION_TYPES,HIGHLIGHT,FONT_SIZE)};
}
// ***END: TYPOGRAPHY***
}
Raw
utils.scss
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
$SCRIPT_TYPE_METRICS: (
REITH: (
FONT_FAMILY: (
SANS: ReithSans,
SERIF: ReithSerif,
),
DIRECTION: ltr,
FONT_TOP_OFFSET: 0,
HORIZONTAL: (
LINE_HEIGHT_OFFSET: (
COMPRESSED: -.25em,
EXPANDED: -.1em,
),
CAPTION_TYPES: (
TITLE_2_LINE: (
FONT_SIZE: 140px,
FONT_WEIGHT: 500,
),
TITLE_2_LINE_SPLIT: (
SANS: (
FONT_SIZE: 80px,
FONT_WEIGHT: 300,
),
SERIF: (
FONT_SIZE: 140px,
FONT_WEIGHT: 500,
)
),
CHAPTER: (
SANS: (
FONT_SIZE: 160px,
FONT_WEIGHT: 800,
),
SERIF: (
FONT_SIZE: 140px,
FONT_WEIGHT: 500,
)
),
NARRATIVE: (
FONT_SIZE: 90px,
FONT_WEIGHT: 500,
),
QUOTE_2: (
FONT_SIZE: 90px,
FONT_WEIGHT: normal,
ATTRIBUTION: (
SANS: (
FONT_SIZE: 42px,
FONT_WEIGHT: normal,
),
SERIF: (
FONT_SIZE: 58px,
FONT_WEIGHT: normal,
)
),
),
NAME: (
SANS: (
FONT_SIZE: 44px,
FONT_WEIGHT: normal,
),
SERIF: (
FONT_SIZE: 70px,
FONT_WEIGHT: 500,
)
),
SUBTITLE_2: (
FONT_SIZE: 70px,
FONT_WEIGHT: 500,
),
CREDIT: (
FONT_SIZE: 40px,
FONT_WEIGHT: 500,
),
HIGHLIGHT: (
FONT_SIZE: 100px,
FONT_WEIGHT: normal,
)
)
),
VERTICAL: (
LINE_HEIGHT_OFFSET: (
COMPRESSED: -.25em,
EXPANDED: -.1em,
),
CAPTION_TYPES: (
TITLE_2_LINE: (
FONT_SIZE: 78px,
),
TITLE_2_LINE_SPLIT: (
SANS: (
FONT_SIZE: 46px,
),
SERIF: (
FONT_SIZE: 78px,
)
),
CHAPTER: (
SANS: (
FONT_SIZE: 80px,
),
SERIF: (
FONT_SIZE: 70px,
)
),
NARRATIVE: (
FONT_SIZE: 45px,
),
QUOTE_2: (
FONT_SIZE: 52px,
ATTRIBUTION: (
SANS: (
FONT_SIZE: 23px,
),
SERIF: (
FONT_SIZE: 33px,
)
),
),
NAME: (
SANS: (
FONT_SIZE: 21px,
),
SERIF: (
FONT_SIZE: 34px,
)
),
SUBTITLE_2: (
FONT_SIZE: 33px,
),
CREDIT: (
FONT_SIZE: 23px,
),
HIGHLIGHT: (
FONT_SIZE: 60px,
)
)
),
SQUARE: (
LINE_HEIGHT_OFFSET: (
COMPRESSED: -.25em,
EXPANDED: -.1em,
),
CAPTION_TYPES: (
NARRATIVE: (
FONT_SIZE: 80px,
),
NAME: (
SANS: (
FONT_SIZE: 38px,
),
SERIF: (
FONT_SIZE: 60px,
)
),
SUBTITLE_2: (
FONT_SIZE: 58px,
)
)
),
),
BBC_ARABIC: (
FONT_FAMILY: BBCArabic,
DIRECTION: rtl,
FONT_TOP_OFFSET: 0.1em,
HORIZONTAL: (
LINE_HEIGHT_OFFSET: (
COMPRESSED: -0.05em,
EXPANDED: 0.05em,
),
CAPTION_TYPES: (
TITLE_2_LINE: (
FONT_SIZE: 170px,
FONT_WEIGHT: 500,
),
TITLE_2_LINE_SPLIT: (
SANS: (
FONT_SIZE: 98px,
FONT_WEIGHT: 300,
),
SERIF: (
FONT_SIZE: 167px,
FONT_WEIGHT: 500,
)
),
CHAPTER: (
SANS: (
FONT_SIZE: 250px,
FONT_WEIGHT: 800,
),
SERIF: (
FONT_SIZE: 178px,
FONT_WEIGHT: 500,
)
),
NARRATIVE: (
FONT_SIZE: 100px,
FONT_WEIGHT: 500,
),
QUOTE_2: (
FONT_SIZE: 110px,
FONT_WEIGHT: normal,
ATTRIBUTION: (
SANS: (
FONT_SIZE: 60px,
FONT_WEIGHT: normal,
),
SERIF: (
FONT_SIZE: 80px,
FONT_WEIGHT: normal,
)
),
),
NAME: (
SANS: (
FONT_SIZE: 60px,
FONT_WEIGHT: normal,
),
SERIF: (
FONT_SIZE: 95px,
FONT_WEIGHT: 500,
)
),
SUBTITLE_2: (
FONT_SIZE: 85px,
FONT_WEIGHT: 500,
),
CREDIT: (
FONT_SIZE: 85px,
FONT_WEIGHT: 500,
),
HIGHLIGHT: (
FONT_SIZE: 130px,
FONT_WEIGHT: normal,
)
)
),
VERTICAL: (
LINE_HEIGHT_OFFSET: (
COMPRESSED: -0.05em,
EXPANDED: 0.05em,
),
CAPTION_TYPES: (
TITLE_2_LINE: (
FONT_SIZE: 78px,
),
TITLE_2_LINE_SPLIT: (
SANS: (
FONT_SIZE: 46px,
),
SERIF: (
FONT_SIZE: 78px,
)
),
CHAPTER: (
SANS: (
FONT_SIZE: 80px,
),
SERIF: (
FONT_SIZE: 70px,
)
),
NARRATIVE: (
FONT_SIZE: 45px,
),
QUOTE_2: (
FONT_SIZE: 52px,
ATTRIBUTION: (
SANS: (
FONT_SIZE: 23px,
),
SERIF: (
FONT_SIZE: 33px,
)
),
),
NAME: (
SANS: (
FONT_SIZE: 21px,
),
SERIF: (
FONT_SIZE: 34px,
)
),
SUBTITLE_2: (
FONT_SIZE: 33px,
),
CREDIT: (
FONT_SIZE: 23px,
),
HIGHLIGHT: (
FONT_SIZE: 60px,
)
)
),
SQUARE: (
LINE_HEIGHT_OFFSET: (
COMPRESSED: -0.05em,
EXPANDED: 0.05em,
),
CAPTION_TYPES: (
NARRATIVE: (
FONT_SIZE: 80px,
),
NAME: (
SANS: (
FONT_SIZE: 38px,
),
SERIF: (
FONT_SIZE: 60px,
)
),
SUBTITLE_2: (
FONT_SIZE: 58px,
)
)
),
),
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment