Sublime Forum

Low quality/distorted image rendering inside popup (mini-html)

#1

I’m playing the new show_popup api and I’m trying to show a base64 image inside the popup.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAFF0lEQVRYhaWWTWxUVRTHf+feN286M62UGDDFaIskJi50pRtJDEES09iA2gQQ+QgLAd1oEKKSisag2IKBloVVw0pNNAILZOPC6MoY4s7IwkSsbdMWCm2n05nptO/e62I+Ou28107xJC/3vHPPufd/z9e94pyjmkTkcaCN1dM0MOCc+3c1Rl6IrC13+9erRTQKnF08lsjaObAGZ3LMZkaZns7cPnv+y1Mi8oNzbuD/AFAAhczfYALQYSqACXDOERhDNptjfPzu+p6eM2cKc2/ERORKvSDCVo+J8hHxwFs87VwAgIiH0yAmIOZ5+H6M2dkC+cxIvO9Cf7e1R6gXhKpLJgpEUQFW5r0GAHzfJ5FsYHh4hOS6p72+c93d+7Zv7BSRtpUARPgXlPKxpRMr8bAuQIkHQkUOIF4Dng5oTKUYGb0FyiPZstXr7en6BE4hIpeX80Q4ANGVjSuAtA/WLuZLYASPVCqJNRZRMRCPpofavZ5T893WfLQsiEgPoEKiUy0r8Qofa+aIx32ULsq0l8C4gPvbntWnPwy6re2OBBHtAYnGVoNLQ0M8zpo1TZw/+TxDw2M452hMJWhtfVDvf2XHB4X57+fCSlRCGtHO2ak/v5ufKeo5Z6vmFM5ZRGq944JZsplxxsbGmZxKk8/nmZxMk83my2Bu7X3zm93OuV9W9gBUPCCyRFzzr3HOILFGUs0+m5rWMTc7RaFQYGYmy8TEFFPpaay1DwDNS7eJCIGHlBKxHirrZuYdhy9+xb7NT7FtUwtKKXzfp7ExRRAYgJpFQwEoUaB9sKYYYFjMh1A6m2HvZ59zc3CIt/8Z4P2d29n+WBtKFFprSqGuiV1YIyqB8FA6XilFpeORm49P59jVd4Gbg8OAYI3l57+G8BJr8f0YiUQDqVQSQJbahgModbvyl561fHv9N5TyUcpH62SFH52eYXffWYbGRovLK2h/Zhv9h99FxZrRDc3EGprwU+tDt4osQymdfGw6zd7eMwyPjTI6OcnR9h1FFfG4OX6Lfb1nuTs1UcnOzq0dfLzrILYwXvSaa0K0QbxE/QBEPFA+AK9f7Gd4bBSAL65dJTdv6XphFzdGBjjY9ynpTBqUgMD+jt2817EHM3cXUXEQjVY+xuTQXtMqPACIKjaj84dOsKfnOON37iA4vv7xGqOTE1y/8QeZ7AwoEKU4/OJ+jj33EsbkEe0Xw+gCUAm0aMRLhu4TngNqoRO2rr2PK10X2NCyodh+leKn338jk8uCBtGKt15+jWPtnRiTL6H3FkbxEO2jdHgIQgGI6EqSKVG0NKW4dKKP1oc3VuWmoLTHyQPHOLK1A2eCBZsqWyUKpZNIRBVFliHVjcgZ1jfGufROL5seeRS0Qvs+pw+dYN/mLbhgttaufJ+UO2opp5bS8lVQfSE5WOsLl4/3crC/iwNbOul44kmcmS/G15oFXR0v/tdxoUW24qgOmFLC5aPnsEEB50ytbVl3qX0EmIhWrLHKB2dA6wW3OgOisUGhiFP5xSA6A15Jf9FBdGVeRdwtK96GNQuWx3KZLSevnCi6jYcDUB6YOmIYNR8mV6sIgYiKdFkY2QgXV8vDHjGRAJyzRcQ2WDxCkS9TSabs4v/KdNXy1S+rFQGIipUS0K+AKZ/AVfOl51lZVt5k6dPNudJruV4ANWCgUgEClaQr8yIanFlwc1mvvIao2gpZBsCgiLwKhDfve6c8MLhUGPYqTgJNQPj1de+UAzLOuVy18D8GQPBURMhZDQAAAABJRU5ErkJggg==" />

This is what Sublime renders:

Compared to how it looks in a browser:

Is this a known bug? Anyone knows how to deal with it?

0 Likes
#2

I think some images get blown up larger than they should. You can set the width and height in half and it will look better:

But as you can see, the sublime popup HTML renderer distorts images. Notice the check mark distortion. I tried to use icons in my popups for ColorHelper, but it stretched and distorted images. So I keep to text and simple boxes. But even with boxes you will see things get stretched sometimes. Borders that are supposed to be 1px will stretch to 2px on certain sides, etc. Squares seem more rectangular. I would often set image height sometimes less in the as it seemed to mainly stretch in the vertical. Also not sure how well it handles images with transparency.

Images make popups look nicer generally, but in sublime, I often felt things just looked worse because of how things got distorted.

1 Like
#3

Example, now I cut your res in half to 32 x 32. Then I cut the vertical down by 4 and look how much nicer things look:

I found this ridiculous and didn’t care to try and calculate all this, so I gave up on images.

1 Like
#4

Hope we get better image rendering in the upcomming releases. mini-html has huge potential but we need more features support to be able to build anything compleing.

0 Likes
#5

I didn’t know we can use height and width attributes. Where’s the documentaion?!

Anyhow, setting the height 5 pixels less than the original (32x32) fixed the rendering issue?

0 Likes
#6

There is no documentation. It’s trial and error. I do think it’s easier to work with large images than it is to work with small images. Small images are less forgiving of the distortion. Also, CSS is extremely limited… Like a lot, but I am okay with that. If the image rendering didn’t distort things, I would generally be happy with the current tooltip implementation.

0 Likes
#7

@facelessuser distortion will be fixed in the next build, images were incorrectly getting the font’s descent value added into their height.

@aziz it looks like the image is getting drawn at 2x size. What platform are you on? Are you running in highdpi/retina mode?

5 Likes
#8

@jps Thanks!

0 Likes
#9

@jps I’m running on Mac. my laptop has retina screen and it’s connected to a large display which is not retina. I moved the sublime window between the two screens and the distortion is still there.

BTW, does mini-html support @2x image postfixing the way sublime supports high dpi images for themes, if I’m loading an image from my package folder?

OS: Mac 10.11.6 BETA
Sublime: 3117

0 Likes
#10

Here’s my wishlist for mini-html css support:

  • display:inline-block
  • width (for block and inline-block)
  • height (for block and inline-block)
  • border
  • vertical-alignment
  • text-align

I imagine these should be easier to implement compared to complex layout calculations for table

vertical-alignment is requested since you have line-height but it’s not possible to control the vertical alignment and the text renders always on the top. Here is my struggle to design two button like links.

0 Likes
#11

If I remember correctly, there was a way to load images from the package folder but I can’t make it work now. One way is to use base64 encoding but there should be other ways too.
My question is what are the diffrenet ways of setting an image src in minihtml

0 Likes
#12

Found it in the change log

minihtml: Added support for tags, in conjunction with file://, res:// and data: URLs

0 Likes
#13

On HighDPI monitors when I have a image src like Packages/User/folder_blue.png and There’s already a file called folder_blue@2x.png I expect sublime to pick the high res one.

2 Likes