### Eclipse Workspace Patch 1.0
#P TYPO3_4-2-3
Index: typo3/sysext/css_styled_content/pi1/class.tx_cssstyledcontent_pi1.php
===================================================================
--- typo3/sysext/css_styled_content/pi1/class.tx_cssstyledcontent_pi1.php	(revision 4519)
+++ typo3/sysext/css_styled_content/pi1/class.tx_cssstyledcontent_pi1.php	(working copy)
@@ -403,6 +403,14 @@
 
 		$renderMethod = $this->cObj->stdWrap($conf['renderMethod'], $conf['renderMethod.']);
 
+		if ($conf['useEM'] == '1') {
+			$GLOBALS['TSFE']->register['widthunit'] = 'em';
+			$scaleFactor = ($conf['useEM.']['scaleFactor']) ? $conf['useEM.']['scaleFactor'] : 1;
+		} else {
+			$GLOBALS['TSFE']->register['widthunit'] = 'px';
+			$scaleFactor = 1;
+		}
+
 			// Render using the default IMGTEXT code (table-based)
 		if (!$renderMethod || $renderMethod == 'table')	{
 			return $this->cObj->IMGTEXT($conf);
@@ -635,8 +643,16 @@
 						$imgConf['emptyTitleHandling'] = 'removeAttr';
 					}
 				}
+				if ($conf['useEM'] == '1') {
+					$imgConf['useEM'] = 1;
+					$imgConf['useEM.']['scaleFactor'] = $scaleFactor;
+				}
 				$imgsTag[$imgKey] = $this->cObj->IMAGE($imgConf);
 			} else {
+				if ($conf['useEM'] == '1') {
+					$imgConf['useEM'] = 1;
+					$imgConf['useEM.']['scaleFactor'] = $scaleFactor;
+				}
 				$imgsTag[$imgKey] = $this->cObj->IMAGE(Array('file' => $totalImagePath)); 	// currentValKey !!!
 			}
 				// Restore our ATagParams
@@ -652,9 +668,9 @@
 
 		}
 			// How much space will the image-block occupy?
-		$imageBlockWidth = max($imageRowsFinalWidths)+ $colspacing*($colCount-1) + $colCount*$border*($borderSpace+$borderThickness)*2;
-		$GLOBALS['TSFE']->register['rowwidth'] = $imageBlockWidth;
-		$GLOBALS['TSFE']->register['rowWidthPlusTextMargin'] = $imageBlockWidth + $textMargin;
+		$imageBlockWidth = max($imageRowsFinalWidths) + $colspacing*($colCount-1) + $colCount*$border*($borderSpace+$borderThickness)*2;
+		$GLOBALS['TSFE']->register['rowwidth'] = $imageBlockWidth*$scaleFactor;
+		$GLOBALS['TSFE']->register['rowWidthPlusTextMargin'] = ($imageBlockWidth + $textMargin)*$scaleFactor;
 
 			// noRows is in fact just one ROW, with the amount of columns specified, where the images are placed in.
 			// noCols is just one COLUMN, each images placed side by side on each row
@@ -721,9 +737,9 @@
 				$GLOBALS['TSFE']->register['IMAGE_NUM'] = $imgKey;
 				$GLOBALS['TSFE']->register['IMAGE_NUM_CURRENT'] = $imgKey;
 				$GLOBALS['TSFE']->register['ORIG_FILENAME'] = $origImages[$imgKey]['origFile'];
-				$GLOBALS['TSFE']->register['imagewidth'] = $origImages[$imgKey][0];
-				$GLOBALS['TSFE']->register['imagespace'] = $imageSpace;
-				$GLOBALS['TSFE']->register['imageheight'] = $origImages[$imgKey][1];
+				$GLOBALS['TSFE']->register['imagewidth'] = $origImages[$imgKey][0] * $scaleFactor;
+				$GLOBALS['TSFE']->register['imagespace'] = $imageSpace * $scaleFactor;
+				$GLOBALS['TSFE']->register['imageheight'] = $origImages[$imgKey][1] * $scaleFactor;
 				if ($imageSpace > $maxImageSpace)	{
 					$maxImageSpace = $imageSpace;
 				}
@@ -748,7 +764,7 @@
 				} else {
 					$allRows .= $thisImage;
 				}
-				$GLOBALS['TSFE']->register['columnwidth'] = $maxImageSpace + $tmpColspacing;
+				$GLOBALS['TSFE']->register['columnwidth'] = ($maxImageSpace + $tmpColspacing)*$scaleFactor;
 
 
 					// Close this row at the end (colCount), or the last row at the final end
@@ -817,7 +833,7 @@
 		}
 
 			// Wrap around the whole image block
-		$GLOBALS['TSFE']->register['totalwidth'] = $imgWrapWidth;
+		$GLOBALS['TSFE']->register['totalwidth'] = $imgWrapWidth * $scaleFactor;
 		if ($imgWrapWidth)	{
 			$images = $this->cObj->stdWrap($images, $conf['imageStdWrap.']);
 		} else {
Index: typo3/sysext/css_styled_content/static/setup.txt
===================================================================
--- typo3/sysext/css_styled_content/static/setup.txt	(revision 4519)
+++ typo3/sysext/css_styled_content/static/setup.txt	(working copy)
@@ -1318,11 +1318,11 @@
 	}
 
 	#
-	imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap" style="width:{register:totalwidth}px;"> | </div>
+	imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap" style="width:{register:totalwidth}{register:widthunit};"> | </div>
 	imageStdWrapNoWidth.wrap = <div class="csc-textpic-imagewrap"> | </div>
 
 	# if noRows is set, wrap around each column:
-	imageColumnStdWrap.dataWrap = <div class="csc-textpic-imagecolumn" style="width:{register:columnwidth}px;"> | </div>
+	imageColumnStdWrap.dataWrap = <div class="csc-textpic-imagecolumn" style="width:{register:columnwidth}{register:widthunit};"> | </div>
 
 	layout = CASE
 	layout {
@@ -1353,19 +1353,19 @@
 		18.value = <div class="csc-textpic csc-textpic-intext-left###CLASSES###">###IMAGES######TEXT###</div>
 		# intext-right-nowrap
 		25 = TEXT
-		25.value = <div class="csc-textpic csc-textpic-intext-right-nowrap###CLASSES###">###IMAGES###<div style="margin-right:{register:rowWidthPlusTextMargin}px;">###TEXT###</div></div><div class="csc-textpic-clear"><!-- --></div>
+		25.value = <div class="csc-textpic csc-textpic-intext-right-nowrap###CLASSES###">###IMAGES###<div style="margin-right:{register:rowWidthPlusTextMargin}{register:widthunit};">###TEXT###</div></div><div class="csc-textpic-clear"><!-- --></div>
 		25.insertData = 1
 		# intext-left-nowrap
 		26 = TEXT
-		26.value = <div class="csc-textpic csc-textpic-intext-left-nowrap###CLASSES###">###IMAGES###<div style="margin-left:{register:rowWidthPlusTextMargin}px;">###TEXT###</div></div><div class="csc-textpic-clear"><!-- --></div>
+		26.value = <div class="csc-textpic csc-textpic-intext-left-nowrap###CLASSES###">###IMAGES###<div style="margin-left:{register:rowWidthPlusTextMargin}{register:widthunit};">###TEXT###</div></div><div class="csc-textpic-clear"><!-- --></div>
 		26.insertData = 1
 	}
 
 	rendering {
 		dl {
-			imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow" style="width:{register:rowwidth}px;"> | </div>
+			imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow" style="width:{register:rowwidth}{register:widthunit};"> | </div>
 			noRowsStdWrap.wrap =
-			oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###" style="width:{register:imagespace}px;"> | </dl>
+			oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###" style="width:{register:imagespace}{register:widthunit};"> | </dl>
 			imgTagStdWrap.wrap = <dt> | </dt>
 			editIconsStdWrap.wrap = <dd> | </dd>
 			caption {
@@ -1374,23 +1374,28 @@
 			}
 		}
 		ul {
-			imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow" style="width:{register:rowwidth}px;"><ul> | </ul></div>
+			imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow" style="width:{register:rowwidth}{register:widthunit};"><ul> | </ul></div>
 			noRowsStdWrap.wrap = <ul> | </ul>
-			oneImageStdWrap.dataWrap = <li class="csc-textpic-image###CLASSES###" style="width:{register:imagespace}px;"> | </li>
+			oneImageStdWrap.dataWrap = <li class="csc-textpic-image###CLASSES###" style="width:{register:imagespace}{register:widthunit};"> | </li>
 			imgTagStdWrap.wrap =
 			editIconsStdWrap.wrap = <div> | </div>
 			caption.wrap = <div class="csc-textpic-caption"> | </div>
 		}
 		div {
-			imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow" style="width:{register:rowwidth}px;"> | </div>
+			imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow" style="width:{register:rowwidth}{register:widthunit};"> | </div>
 			noRowsStdWrap.wrap =
-			oneImageStdWrap.dataWrap = <div class="csc-textpic-image###CLASSES###" style="width:{register:imagespace}px;"> | </div>
+			oneImageStdWrap.dataWrap = <div class="csc-textpic-image###CLASSES###" style="width:{register:imagespace}{register:widthunit};"> | </div>
 			imgTagStdWrap.wrap = <div> | </div>
 			editIconsStdWrap.wrap = <div> | </div>
 			caption.wrap = <div class="csc-textpic-caption"> | </div>
 		}
 	}
 	renderMethod = dl
+
+	# property to switch to relative unit em instead of px
+	useEM = 0
+	# scale factor, if used with relative unit em
+	useEM.scaleFactor = 0.1
 }
 
 # cObject: Text with image
@@ -1538,9 +1543,9 @@
 plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE := appendString(\nDIV.csc-textpic DIV.csc-textpic-imagerow-last { margin-bottom: 0; })
 
 tt_content.image.20.rendering {
-	dl.imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last" style="width:{register:rowwidth}px;"> | </div>
-	ul.imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last" style="width:{register:rowwidth}px;"><ul> | </ul></div>
-	div.imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last" style="width:{register:rowwidth}px;"> | </div>
+	dl.imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last" style="width:{register:rowwidth}{register:widthunit};"> | </div>
+	ul.imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last" style="width:{register:rowwidth}{register:widthunit};"><ul> | </ul></div>
+	div.imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last" style="width:{register:rowwidth}{register:widthunit};"> | </div>
 }
 
 [END]
@@ -1551,7 +1556,7 @@
 lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList := removeFromList(div)
 lib.parseFunc_RTE.externalBlocks := addToList(div)
 lib.parseFunc_RTE.externalBlocks.div.stripNL = 1
-lib.parseFunc_RTE.externalBlocks.div.callRecursive = 1 
+lib.parseFunc_RTE.externalBlocks.div.callRecursive = 1
 
 [END]
 
Index: typo3/sysext/cms/tslib/class.tslib_content.php
===================================================================
--- typo3/sysext/cms/tslib/class.tslib_content.php	(revision 4519)
+++ typo3/sysext/cms/tslib/class.tslib_content.php	(working copy)
@@ -2650,7 +2650,25 @@
 				$conf['altText.'] = $conf['alttext.'];
 			}
 			$altParam = $this->getAltParam($conf);
-			$theValue = '<img src="'.htmlspecialchars($GLOBALS['TSFE']->absRefPrefix.t3lib_div::rawUrlEncodeFP($info[3])).'" width="'.$info[0].'" height="'.$info[1].'"'.$this->getBorderAttr(' border="'.intval($conf['border']).'"').(($conf['params'] || is_array($conf['params.']))?' '.$this->stdwrap($conf['params'],$conf['params.']):'').($altParam).' />';
+			if ($conf['useEM'] == 1) {
+				if ($conf['useEM.']['scaleFactor']) {
+					$emWidth = $info[0] * $conf['useEM.']['scaleFactor'];
+					$emHeight = $info[1] * $conf['useEM.']['scaleFactor'];
+				} else {
+					$emWidth = $info[0];
+					$emHeight = $info[1];
+				}
+				$widthHeightImgParams = 'style="width:'.$emWidth.'em;height:'.$emHeight.'em;"';
+			} else {
+				$widthHeightImgParams = 'width="'.$info[0].'" height="'.$info[1].'"';
+			}
+			$theValue = '<img '.
+				'src="'.htmlspecialchars($GLOBALS['TSFE']->absRefPrefix.t3lib_div::rawUrlEncodeFP($info[3])).'" '.
+				$widthHeightImgParams.
+				$this->getBorderAttr(' border="'.intval($conf['border']).'"').
+				(($conf['params'] || is_array($conf['params.'])) ? ' '.$this->stdwrap($conf['params'],$conf['params.']) : '').
+				($altParam).
+			' />';
 			if ($conf['linkWrap'])	{
 				$theValue = $this->linkWrap($theValue,$conf['linkWrap']);
 			} elseif ($conf['imageLinkWrap']) {
