search

asciidoctor / asciidoctor

:gem: A fast, open source text processor and publishing toolchain, written in Ruby, for converting AsciiDoc content to HTML 5, DocBook 5, and other formats.
https://asciidoctor.org
Other
4.88k stars 793 forks source link

Container of an image with float and percent width has a width of 100% of the image #3510

Open ggrossetie opened 4 years ago

ggrossetie commented 4 years ago

Consider the following AsciiDoc document:

image::usage-share.png["Europe browser usage share",width=50%,float=right]

The exploded pie chart example "Europe browser usage share" was created using the ConceptDraw PRO diagramming and vector drawing software extended with the Pie Charts solution of the Graphs and Charts area in ConceptDraw Solution Park.

usage-share.png has a width of 640px.

I would expect the content box of the image to have a width of 320px (ie. 50% of 640px) but instead the content box is still 640px:

Image has a width of 320px (50%) image-width-50%-320

content box has a width of 640px (100%) content-640

image block has a width of 640px (100%) imageblock-640

Is it intended? Is it a CSS limitation? For reference, if I'm not using "float", then the image width is 485px (50% of the page width). Semantically, "width=50%" means 50% of the image width (not 50% of the width available). So I would expect the image to have a 320px width.

Original issue: https://github.com/Mogztter/asciidoctor-pdf.js/issues/143

mojavelinux commented 4 years ago

Using a percentage image width is highly discouraged and technically not compliant. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#attr-width. So unexpected things are actually expected.

This is related to #1894.

ggrossetie commented 4 years ago

Using a percentage image width is highly discouraged and technically not compliant. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#attr-width. So unexpected things are actually expected.

Ok thanks for clarifying!

This is related to #1894.

On Chrome I have the exact same behavior using an inline style as suggested in https://github.com/asciidoctor/asciidoctor/issues/1894#issuecomment-253917919: We could do the same for HTML by introducing the html5width (or just htmlwidth) attribute. That would be translated to the inline CSS width property on the image. wdyt?

Am I missing something? I guess we could compute the image width/height in pixels in the converter but that would require to get the image dimensions...

mojavelinux commented 4 years ago

What I'm suggesting in #1894 is to pass the value to the CSS width property, which does accept other units (and will likely work as expected). You could try it by tweaking the output and see what happens.

elextr commented 4 years ago

IIUC in HTML5 <img> width and height are supposed to be the actual image size so the browser can allocate space in the layout without having to wait to download the image.

CSS can still have percentage widths that work as specified (% of parent), but that means generating CSS tied to individual images.