 				setImmediate updateAll
 				pending = true
 
+	onSizeChanged = ->
+		{textContainer} = @_impl
+		{width, height} = @
+		textContainer.style.width = "#{width}px"
+		textContainer.style.height = "#{height}px"
+
+		updateText.call @
+
 	create: (item) ->
 		Image.create item
+
+		item.onWidthChanged onSizeChanged
+		item.onHeightChanged onSizeChanged
+
 		CssText._createTextElement item
-		impl._hatchery.appendChild item._impl.textElement
-		item._impl.textElement.style.transformOrigin = '0 0'
+		{textElement} = item._impl
+		textContainer = item._impl.textContainer = document.createElement 'div'
+		textContainer.appendChild textElement
+		impl._hatchery.appendChild textContainer
+		textElement.style.transformOrigin = '0 0'
 
-		item._impl.textElement.setAttribute 'xmlns', 'http://www.w3.org/1999/xhtml'
-
-		item.onWidthChanged updateText
-		item.onHeightChanged updateText
+		textElement.setAttribute 'xmlns', 'http://www.w3.org/1999/xhtml'
 
 	setText: (val) ->
 		CssText.setText.call @, val

		pending = false

		updateItem = (item) ->
			item._impl.contentElem.width = item.width
			item._impl.contentElem.height = item.height
			# TODO: too large height's
			# console.log getImageSource(item), item.width, item.height
			impl.setImageSource.call item, getImageSource(item)

		updateAll = ->


	CssText = require('../../css/level0/text') impl

	SVG_TEXT_ZOOM = 2

	getImageSource = (item) ->
		{width, height} = item
		{textElement} = item._impl

		# retina displays
		textElement.style.zoom = SVG_TEXT_ZOOM
		width *= SVG_TEXT_ZOOM
		height *= SVG_TEXT_ZOOM

		svg = "data:image/svg+xml;utf8," +
		"<svg width='#{width}' height='#{height}' xmlns='http://www.w3.org/2000/svg'>" +
