FLUID-6167: Provide a way to override a container line-height so line-height adjuster can work on it

Metadata

Source
FLUID-6167
Type
Improvement
Priority
Major
Status
Closed
Resolution
Fixed
Assignee
N/A
Reporter
Jonathan Hung
Created
2017-07-07T11:44:03.282-0400
Updated
2024-07-24T12:13:32.573-0400
Versions
  1. 2.0
Fixed Versions
N/A
Component
  1. UI Options

Description

UI Options currently has a limitation where the line-height for the line-height adjuster is injected inline to the body element. The problem is that this line-height can be overriden by line-height specified by CSS on elements in the document.

There should be a way to identify elements to apply line-height adjustments to.

Comments

  • Jonathan Hung commented 2017-07-07T11:51:01.598-0400

    A possible solution would be use a class to identify elements to apply line-height adjustments to. For example a tagline has a default line-height which gets adjusted via a selector.

    <body>
    <p class="flc-uio-line-height-adjust tagline">
         Foo
    </p>
    </body>

    .tagline {
         line-height: 1.3rem;
    }

  • Jonathan Hung commented 2018-11-29T14:25:20.219-0500

    Another approach is to inject a line-height class to the <body> element for the appropriate line-height scale to apply, and the integrator can specify custom CSS rules against that injected class.

    Example HTML

    <body class="fl-line-height-15">

    <p class="some-text">

    Foo<br/>

    Bar

    </p>

    </body>

    Example CSS

    .some-text

    { line-height: 1.2rem; }

    .fl-line-height-11 .some-text

    { line-height: 1.2rem; /* Override UIO and keep line spacing at 1.2 */ }

    .fl-line-height-15 .some-text

    { line-height: 1.5rem; }

  • Sean F @ opin commented 2020-12-15T21:26:55.898-0500

    I posted a quick way to get this working on the other issue: https://issues.fluidproject.org/browse/FLUID-6167

  • Justin Obara commented 2024-07-24T12:13:32.372-0400

    A css custom property, --fl-lineSpace was added as part of the work for FLUID-6260