Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Library] Apply line spacing for fonts #348

Open
5 tasks
pylapp opened this issue Dec 11, 2024 · 2 comments
Open
5 tasks

[Library] Apply line spacing for fonts #348

pylapp opened this issue Dec 11, 2024 · 2 comments
Assignees
Labels
🧩 enhancement Related to enhancements or feature requests 🆕 feature Related to features 📀 token Related to tokens (raws, semantics or components) 🔍 triage A new issue that needs to be treated

Comments

@pylapp
Copy link
Member

pylapp commented Dec 11, 2024

Context

Today we did not implement yet the line spacing feature using the FontLineSpacingRawToken tokens.
In fact, this feature was not implemented until now because we got unusable values from Figma.
Since the tokenator can update these tokens, we have values to use, but they cannot be used as is.
It seems the units in Figma are pixels (px), and not the same as the valeus to given to SwiftUI API.

The values seem to be very high, and should be used with care wether or not the texts are multines.

Documentation for lineSpacing: https://developer.apple.com/documentation/swiftui/view/lineSpacing(_:)

More ressource:

Given the Swift code:

#Preview {
    VStack(spacing: 5) {

        let size12Font = UIFont.systemFont(ofSize: 12) // fontSize150, smallest
        let size32Font = UIFont.systemFont(ofSize: 32) // fontSize650, mid
        let size72Font = UIFont.systemFont(ofSize: 72) // fontSize1850, biggest

        Text("(16) Égaré dans la Vallée Infernale, le démon s'appelle Bob Morane. À la recherche de l'Ombre Jaune, le bandit s'appelle Mister Kali Jones")
            .font(Font(size12Font))
            .lineSpacing(16) // fontLineHeight250, smallest
            .border(.pink)

        Text("(16 - size12.lineHeight) Égaré dans la Vallée Infernale, le démon s'appelle Bob Morane. À la recherche de l'Ombre Jaune, le bandit s'appelle Mister Kali Jones")
            .font(Font(size12Font))
            .lineSpacing(16 - size12Font.lineHeight)
            .border(.purple)

        Text("(44) Égaré dans la Vallée Infernale, le démon s'appelle Bob Morane. À la recherche de l'Ombre Jaune, le bandit s'appelle Mister Kali Jones")
            .font(Font(size32Font))
            .lineSpacing(44) // fontLineHeight950, mid
            .border(.brown)

        Text("(44 - size32.lineHeight) Égaré dans la Vallée Infernale, le démon s'appelle Bob Morane. À la recherche de l'Ombre Jaune, le bandit s'appelle Mister Kali Jones")
            .font(Font(size32Font))
            .lineSpacing(44 - size32Font.lineHeight)
            .border(.yellow)

        Text("(80) Égaré dans la Vallée Infernale, le démon s'appelle Bob Morane. À la recherche de l'Ombre Jaune, le bandit s'appelle Mister Kali Jones")
            .font(Font(size72Font))
            .lineSpacing(80) // fontLineHeight2050, biggest
            .border(.purple)

        Text("(80 - size72.lineHeight) Égaré dans la Vallée Infernale, le démon s'appelle Bob Morane. À la recherche de l'Ombre Jaune, le bandit s'appelle Mister Kali Jones")
            .font(Font(size72Font))
            .lineSpacing(80 - size72Font.lineHeight)
            .border(.purple)
    }
}

The rendering is the following
Image

Definition of Ready

  • Confirm with @MaximeTonnerre if algorithm described in the resource above can be applied

Definition of Done

  • Update TypographyModifier (beware, feature available for iOS16+, not iOS 15)
  • Update UI tests references images
  • Update documentation
  • Update CHANGELOG
@pylapp pylapp added 🆕 feature Related to features 📀 token Related to tokens (raws, semantics or components) 🔍 triage A new issue that needs to be treated 🧩 enhancement Related to enhancements or feature requests labels Dec 11, 2024
@pylapp pylapp moved this from Triage to Todo in [OUDS] Project Dec 11, 2024
@pylapp

This comment has been minimized.

@pylapp pylapp added ⚠️ on hold Not blocked but should not be processed yet 💥 blocking Issue can go further and is blocked by something and removed ⚠️ on hold Not blocked but should not be processed yet labels Dec 11, 2024
pylapp added a commit that referenced this issue Dec 11, 2024
…ier (#347) (#348)

We are waitning for information from the design team about the use of line height and letter spacing tokens.
The source code now reflects the situation.

Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
pylapp added a commit that referenced this issue Dec 11, 2024
…ier (#347) (#348)

We are waitning for information from the design team about the use of line height and letter spacing tokens.
The source code now reflects the situation.

Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
@pylapp pylapp removed the 💥 blocking Issue can go further and is blocked by something label Dec 11, 2024
@pylapp
Copy link
Member Author

pylapp commented Dec 11, 2024

Algorithm accepted (difference between line height and font line height)

@pylapp pylapp self-assigned this Dec 11, 2024
pylapp added a commit that referenced this issue Dec 18, 2024
…ier (#347) (#348)

We are waitning for information from the design team about the use of line height and letter spacing tokens.
The source code now reflects the situation.

Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🧩 enhancement Related to enhancements or feature requests 🆕 feature Related to features 📀 token Related to tokens (raws, semantics or components) 🔍 triage A new issue that needs to be treated
Projects
Status: Todo
Development

No branches or pull requests

1 participant