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

Is it possible to give padding to a range of text like html inline block? #302

Open
07akioni opened this issue Mar 27, 2024 · 2 comments
Open

Comments

@07akioni
Copy link

07akioni commented Mar 27, 2024

I find an app that uses native rendering to display a markdown code block:

image

But I've no idea how they implement it.

It has both:

  1. round corner
  2. background color
  3. no extra space
@07akioni 07akioni changed the title Is it possible to give padding to a range of text like html block? Is it possible to give padding to a range of text like html inline block? Mar 27, 2024
@07akioni
Copy link
Author

I noticed selection range at edge looks a bit wider than the char itself:

CleanShot 2024-03-27 at 20 24 33@2x

@rajdeep
Copy link
Owner

rajdeep commented Mar 27, 2024

You can use insets on BackgroundStyle to add additional padding on any of the sides of the background. Have a look at the documentation here.

In the screenshot that you have shared in your comment, it seems that there is likely a half-space or no-break-space character used that is what is showing you additional padding in selection. You can use no-break-space like this:

let noBreakSpace = "\u{00a0}"
let text = "\(noBreakSpace)Test\(noBreakSpace)"

If you use noBreakSpace, you would not need to use insets on BackgroundStyle.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants