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

[Ralf Hettinger]

Hi Franz,

thanks for the examples; I must admit that this looks not as complicated
as I first thought in Core list - though I feel it doesn't look just
plain simple as well.

I hopefully will find the time to play a bit with these idea.

Btw: Do you think the following should be taken into account somehow? I
would think the topic is weakly related...
http://bugs.typo3.org/view.php?id=5186

Cheers
Ralf


Am 11.12.2008 12:49 schrieb 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.
>