downstyler icon indicating copy to clipboard operation
downstyler copied to clipboard

Find a way to avoid text gluing to images

Open waldyrious opened this issue 9 years ago • 3 comments

Kind of a text-specific margin. Should not affect other layout items. I wonder if one of the possible display values could work for this.

waldyrious avatar Jul 29 '16 18:07 waldyrious

Attribute selectors to the rescue?

img[align="right"] { margin-left: 1em; }
img[align="left"] { margin-right: 1em; }

waldyrious avatar Jan 10 '18 17:01 waldyrious

(WIP) List of pages where this can be tested:

  • http://www.jbox.dk/sanos/editor.htm

waldyrious avatar Feb 07 '18 16:02 waldyrious

Considering that <img>'s align attribute have been deprecated for a while, and CSS-based floating recommended instead, it would be better if we didn't strip the style from images in the bookmarklet. (That may also fix the problem with SVG sharing icons that become huge in many pages.)

Once styles like float:left and float:right are preserved for images, the downstyler stylesheet should then include them in the margin ruleset. Something like this:

img[align="right"], img[style*="float:right"], img[style*="float: right"] { margin-left: 1em; }
img[align="left"],  img[style*="float:left"],  img[style*="float: left"] { margin-right: 1em; }

See also #45 for a related but probably less common construct.

waldyrious avatar Apr 25 '20 15:04 waldyrious