proton icon indicating copy to clipboard operation
proton copied to clipboard

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

Open 07akioni opened this issue 1 year ago • 2 comments

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 avatar Mar 27 '24 11:03 07akioni

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

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

07akioni avatar Mar 27 '24 12:03 07akioni

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.

rajdeep avatar Mar 27 '24 13:03 rajdeep