From c82049a958fe75a5e31e922d7cf0d1bc5f37b4a9 Mon Sep 17 00:00:00 2001 From: Daniel Langbein Date: Sun, 17 Apr 2022 00:47:46 +0200 Subject: [PATCH] height:25em instead of height:auto --- PKGBUILD | 2 +- README.md | 14 +++++--------- image-width-limit.py | 8 +++++++- 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/PKGBUILD b/PKGBUILD index da62f28..e6d85f6 100644 --- a/PKGBUILD +++ b/PKGBUILD @@ -3,7 +3,7 @@ _pkgname=image-width-limit _reponame=arch pkgname="de-p1st-$_pkgname" -pkgver=1.0.1 +pkgver=1.0.2 pkgrel=1 pkgdesc="Limit width of HTML images" arch=('any') diff --git a/README.md b/README.md index c255765..d80e46a 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,11 @@ # (HTML) Image width limit -From [image-width-limit.py](image-width-limit.py), function `limit_image_width`: +Add the style attribute `max-width:100%;height:25em;` +to image tags which only contain the `src` and `alt` attribute. -> When converting HTML5 to other formats, e.g. PDF, it - may happen that too wide images get cropped of. -> -> If there are HTML5 image tags which do only contain - the 'src' and 'alt' attribute, then this method adds - the following style attribute to limit their width: -> -> max-width:100%;height:auto; +This prevents too large images from getting cropped off on the +right (if too wide) or split up over multiple pages +(if too tall). ## Global Installation - Arch Linux diff --git a/image-width-limit.py b/image-width-limit.py index 47b8031..1472a72 100644 --- a/image-width-limit.py +++ b/image-width-limit.py @@ -46,6 +46,12 @@ def limit_image_width(html_str) -> str: max-width:100%;height:auto; + Update: As images may also be to tall (and get split + up over multiple pages), here is an improved style + attribute: + + max-width:100%;height:25em; + :param html_str: source HTML5 string :returns: modified HTML5 with max-width attribute added to all img tags without size attributes """ @@ -73,7 +79,7 @@ def limit_image_width(html_str) -> str: # Sources: # -> https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/ # -> https://www.w3schools.com/tags/att_style.asp - attrs['style'] = 'max-width:100%;height:auto;' + attrs['style'] = 'max-width:100%;height:25em;' # return soup.prettify() return str(soup)