[TYPO3-content-rendering] [TYPO3-core] RFC #8070: Feature: CSS styled content / scalable rendering of images

[Franz Koch]

Hi guys,

>>>> Masi
>>> as i see there is one place where calculation is need: textpic
>>> For calculation px are needed. For using em, a scalefactor is needed to
>>> recalculate to px. So % doesn't make sense here.
>>>
>>> At any other places you can use bananas as dimension as it's only passed
>>> through.
>>
>> I'd like to discuss possible HTML/CSS setups and then see what TYPO3 can
>> achieve.
>>
>> I'm not sure if Ralf and Franz are trying to do the same thing. But I
>> hope that different approaches can be implemented easily in one sweep.

Here is a example how images could be rendered in % although the 
internal calculation is of course based on a pixel value as reference. 
But the calculation of the image width itself is not the big deal, but 
the propper css-dimensions for the wrappers. But here is how it could 
work although the configuration stuff I'm writing is just some example 
stuff:

--------------------

Example:
# configuration
styles.content.imgtext {
	width {
		renderUnit = %
		# with of your content area in px as calculation ref
		referenceValue = 500
		# this is defining the internal calculation method
		referenceType = pixel
		# defining in which unit values from the with and height field from 
the CE should be treated
		defaultInputUnit = %
	}

	colSpace = 10px

	height {
		renderUnit = em
		referenceValue = 0.1
		referenceType = scalingFactor
		defaultInputUnit = px
	}
}

# content to be rendered
Let's say you've got a "text with image" CE with 3 images in 3 columns 
and define a width of 50% (or 250px), the html would look something like:

# result
<div class="csc-wrapper" width="50%">
     <div class="column first" style="width:29%;margin-right:4%"><img 
src="..." alt="..." /></div>
     <div class="column" style="width:29%;margin-right:4%"><img 
src="..." alt="..." /></div>
     <div class="column last" style="width:29%"><img src="..." alt="..." 
/></div>
</div>

# explanation
- The calculated pixel with of a image would be 63px
   => 250px / columns - ((columns -1)*colSpace)

- to ensure that the margin between the images is visually always the 
same, we need to calculate it depending on the wrapper width.
   => 100% / 250px * 10px (colSpace) = 4%

- the column width get calculated this way:
   => 100%(#inner wrapper width) / columns - ((columns -1)* 4 (#% 
calculated colSpace))


-------------

So it's not much different from current rendering. The only thing to do 
additionally is to calculate the colSpace.

By rendering the columnwidth in percent, all you need to do to have 
pixel width back is to set the width of the wrapper to a fix pixel 
value. Same for em - you only need to set the width of the wrapper to em 
in order to scale everything inside.

-- 
kind regards,
Franz Koch