Inline links within a caption need UX evaluation

[pjlee11]

Is your feature request related to a problem? Please describe.
Currently the styles for the inline link render within a Caption have several bugs, please see screenshots.

Screenshot 1

Screenshot 2

Describe the solution you'd like
A developer should pair with UX to address the multiple issues eluded to below.

Initial suggestions would be to remove the 2px padding top and bottom on the inline link. However if the padding is required by UX for touch areas we should change the line height of the Caption text to match the body copy.

Screenshot 2 shows that descenders (letters that drop below the line, EG: g, y, p, j, etc) are also being cut off by the highlight background colour if the link spans multiple lines. It also shows that the border bottom is cut off if the link spans multiple lines

Describe alternatives you've considered
We could request UX to use text decoration underline instead of a border-bottom.

[erutht]

This is not relevant to inline linking in captions, but FYI, the Jira issue about image captions has been updated.

[greenc05]

We should ensure the inline links are still readable along with all content near the inline links when:

• The page is zoomed up to 200%
• When the browsers largest text size setting is used

[pjlee11]

Having paired with Natalie this not only an issue for the captions but an issue in the body copy also. Therefore I opened the issue ... to address this

[pjlee11]

All the issues/screenshots on #828 are relevant to this issue also, however this is has additional complication that the line-height on the type specs for long primer to do clear the line above as they are too tight. The following screenshot shows this clearly:

This said it if we are going to highlight a link in a caption using background-color we will need to increase the line-heights which would mean getting UX to confirm with GEL that they are happy with the change, which would likely require a review of the typography specs in regards to the new reith font.

[pjlee11]

Blocked awaiting UX decisions

[pjlee11]

Having spent time pairing with Natalie we've decided:

• padding top and bottom on the inline link should be removed
• UX need to talk to GEL about redefining the type specs as Reith and the current typography settings are not compatible
• The current border-bottom design may not be acceptable when it comes to multi-line links so we could:
  a) Use text-decoration: underline instead of border-bottom for inline link styling
  b) Experiment with box-shadow instead of border-bottom however we would also require a fallback, potentially text-decoration?
  c) Continue using border-bottom however we will need to change all the typography settings/groups so that they render the border correctly for multi-line links

[sareh]

Closed since issue is now in Psammead: BBC-archive/psammead#222