RTL headline block

[twinlensreflex]

Is your feature request related to a problem? Please describe.
We want our headline block to work for RTL articles (Persian, Arabic, Urdu, Pashto).

Describe the solution you'd like
As a result of #2713, the NassimPersian font should be loaded for all 4 services and we should already have the text direction being right-to-left. This ticket is to ensure that the implementation matches the designs (except for it not using the correct service-specific font).

If the font sizes and line heights need updating, they should be discussed with UX design before implementing any changes gel-foundations

For each service we should import the Arabic typography settings from here: import { arabic } from '@bbc/gel-foundations/scripts'

• text block is RTL and matches UX designs (except for service-specific font)
• Font is bold
• Font size is: 38px (<600px), 44px otherwise

Testing notes

• test fallback font on older devices
• check with UX designers

Testing URL's
https://www.test.bbc.com/arabic/articles/c69dvq19k63o
https://www.test.bbc.com/persian/articles/c4vlle3q337o
https://www.test.bbc.com/urdu/articles/cx621klkm1ro
https://www.test.bbc.com/pashto/articles/cng0e8v85eko

Dev insight: Update relevant unit tests.

Additional context
Add any other context or screenshots about the feature request here.

[sareh]

Blocked on adding Nassim Persian to Simorgh: #1910

[jamesdonoh]

No longer blocked on #1910; now blocked on BBC-archive/psammead#543

[jamesdonoh]

The above issue was closed, assuming this is now unblocked so we should try to pick up.

[jimjohnsonrollings]

I believe that other than the bolding everything for this is already done.

[jimjohnsonrollings]

Blocked pending #2732

[nataliesmart]

Headline (H1) type sizes:
Group A (0-319px): font size is 32px with line height 42px
Group B (320-599px): font size is 38px with line height 46px
Group D (600px +): font size is 44px with line height 54px

[jamesdonoh]

Unblocked following that BBC-archive/psammead#1516

[RayNjeri]

Blocked pending #2713

[rhenshaw56]

I believe this could be worked on side by side with #2713 removing the blocked label

[RayNjeri]

Headline (H1) type sizes:
Group A (0-319px): font size is 32px with line height 42px
Group B (320-599px): font size is 38px with line height 46px
Group D (600px +): font size is 44px with line height 54px

Checked as per the description and per the values specified here by @nataliesmart and everything seems to check off, both on Chrome and Firefox. Further UX review is welcomed.
cc: @jamesdonoh

[RayNjeri]

Same applies on live.

[stevencava]

Headline block looks ok on all four services, font render issue of Urdu on mobile (This is a known issue on iOS) @nataliesmart

[jimjohnsonrollings]

@stevencava What's the Urdu iOS issue?

[stevencava]

[jimjohnsonrollings]

Mine doesn't do that once Nassim has loaded.

[stevencava]

When I tap the refresh button it corrects itself

[jimjohnsonrollings]

Then I think we're happy with this :)

[stevencava]

Just noticed it seems to do it when off wifi

[jimjohnsonrollings]

What we're seeing as 'stretched' is the iOS default font, which will display if you've not managed to download Nassim quickly enough - from second page view Nassim should have successfully loaded.

[jamesdonoh]

Closing this issue as we believe the treatment on live is as expected, please reopen if not.

[nataliesmart]

I have also just checked this and all seems ok on my Chrome Version 76.0.3809.100. Thanks everyone.