When matchSystemLanguageDirection is set, it should follow the direction setting...
[platform/core/uifw/dali-toolkit.git] / dali-toolkit / internal / visuals / text / text-visual.cpp
old mode 100644 (file)
new mode 100755 (executable)
index baba744..1d75634
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2020 Samsung Electronics Co., Ltd.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
 // CLASS HEADER
 #include <dali-toolkit/internal/visuals/text/text-visual.h>
 
-// EXTERNAL HEADER
-#include <dali/devel-api/scripting/enum-helper.h>
-// #include <dali/devel-api/scripting/scripting.h>
+// EXTERNAL INCLUDES
+#include <dali/public-api/animation/constraints.h>
+#include <dali/devel-api/rendering/renderer-devel.h>
+#include <dali/devel-api/text-abstraction/text-abstraction-definitions.h>
+#include <dali/devel-api/adaptor-framework/image-loading.h>
+#include <dali/devel-api/adaptor-framework/window-devel.h>
+#include <dali/devel-api/images/pixel-data-devel.h>
+#include <string.h>
 
 // INTERNAL HEADER
-#include <dali-toolkit/public-api/text/rendering-backend.h>
 #include <dali-toolkit/public-api/visuals/text-visual-properties.h>
-#include <dali-toolkit/devel-api/visual-factory/devel-visual-properties.h>
+#include <dali-toolkit/devel-api/visuals/text-visual-properties-devel.h>
+#include <dali-toolkit/public-api/visuals/visual-properties.h>
 #include <dali-toolkit/devel-api/controls/control-depth-index-ranges.h>
-#include <dali-toolkit/internal/text/rendering/text-backend.h>
-#include <dali-toolkit/internal/text/text-view.h>
+#include <dali-toolkit/internal/visuals/image-atlas-manager.h>
 #include <dali-toolkit/internal/visuals/visual-base-impl.h>
 #include <dali-toolkit/internal/visuals/visual-base-data-impl.h>
+#include <dali-toolkit/internal/visuals/visual-string-constants.h>
 #include <dali-toolkit/internal/text/text-font-style.h>
 #include <dali-toolkit/internal/text/text-effects-style.h>
-
-using Dali::Toolkit::Text::LayoutEngine;
+#include <dali-toolkit/internal/text/script-run.h>
+#include <dali-toolkit/internal/text/text-enumerations-impl.h>
+#include <dali-toolkit/devel-api/text/text-enumerations-devel.h>
 
 namespace Dali
 {
@@ -47,138 +53,276 @@ namespace Internal
 
 namespace
 {
+const Vector4 FULL_TEXTURE_RECT( 0.f, 0.f, 1.f, 1.f );
 
-// Property names.
-const char * const RENDERING_BACKEND_PROPERTY( "renderingBackend" );
-const char * const TEXT_PROPERTY( "text" );
-const char * const FONT_FAMILY_PROPERTY( "fontFamily" );
-const char * const FONT_STYLE_PROPERTY( "fontStyle" );
-const char * const POINT_SIZE_PROPERTY( "pointSize" );
-const char * const MULTI_LINE_PROPERTY( "multiLine" );
-const char * const HORIZONTAL_ALIGNMENT_PROPERTY( "horizontalAlignment" );
-const char * const VERTICAL_ALIGNMENT_PROPERTY( "verticalAlignment" );
-const char * const TEXT_COLOR_PROPERTY( "textColor" );
-const char * const ENABLE_MARKUP_PROPERTY( "enableMarkup" );
-const char * const ENABLE_AUTO_SCROLL_PROPERTY( "enableAutoScroll" );
-const char * const AUTO_SCROLL_SPEED_PROPERTY( "autoScrollSpeed" );
-const char * const AUTO_SCROLL_LOOP_COUNT_PROPERTY( "autoScrollLoopCount" );
-const char * const AUTO_SCROLL_GAP_PROPERTY( "autoScrollGap" );
-const char * const LINE_SPACING_PROPERTY( "lineSpacing" );
-const char * const UNDERLINE_PROPERTY( "underline" );
-const char * const SHADOW_PROPERTY( "shadow" );
-const char * const OUTLINE_PROPERTY( "outline" );
-const char * const BATCHING_ENABLED_PROPERTY( "batchingEnabled" );
-
-const Scripting::StringEnum HORIZONTAL_ALIGNMENT_STRING_TABLE[] =
-{
-  { "BEGIN",  Toolkit::Text::LayoutEngine::HORIZONTAL_ALIGN_BEGIN  },
-  { "CENTER", Toolkit::Text::LayoutEngine::HORIZONTAL_ALIGN_CENTER },
-  { "END",    Toolkit::Text::LayoutEngine::HORIZONTAL_ALIGN_END    },
-};
-const unsigned int HORIZONTAL_ALIGNMENT_STRING_TABLE_COUNT = sizeof( HORIZONTAL_ALIGNMENT_STRING_TABLE ) / sizeof( HORIZONTAL_ALIGNMENT_STRING_TABLE[0] );
+const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
+  attribute mediump vec2 aPosition;\n
+  uniform highp   mat4 uMvpMatrix;\n
+  uniform mediump vec3 uSize;\n
+  uniform mediump vec4 pixelArea;\n
 
-const Scripting::StringEnum VERTICAL_ALIGNMENT_STRING_TABLE[] =
-{
-  { "TOP",    Toolkit::Text::LayoutEngine::VERTICAL_ALIGN_TOP    },
-  { "CENTER", Toolkit::Text::LayoutEngine::VERTICAL_ALIGN_CENTER },
-  { "BOTTOM", Toolkit::Text::LayoutEngine::VERTICAL_ALIGN_BOTTOM },
-};
-const unsigned int VERTICAL_ALIGNMENT_STRING_TABLE_COUNT = sizeof( VERTICAL_ALIGNMENT_STRING_TABLE ) / sizeof( VERTICAL_ALIGNMENT_STRING_TABLE[0] );
+  varying mediump vec2 vTexCoord;\n
 
-std::string GetHorizontalAlignment( LayoutEngine::HorizontalAlignment alignment )
-{
-  const char* name = Scripting::GetEnumerationName<Toolkit::Text::LayoutEngine::HorizontalAlignment>( alignment,
-                                                                                                      HORIZONTAL_ALIGNMENT_STRING_TABLE,
-                                                                                                      HORIZONTAL_ALIGNMENT_STRING_TABLE_COUNT );
+  //Visual size and offset
+  uniform mediump vec2 offset;\n
+  uniform mediump vec2 size;\n
+  uniform mediump vec4 offsetSizeMode;\n
+  uniform mediump vec2 origin;\n
+  uniform mediump vec2 anchorPoint;\n
 
-  return std::string( name );
-}
+  vec4 ComputeVertexPosition()\n
+  {\n
+    vec2 visualSize = mix(uSize.xy*size, size, offsetSizeMode.zw );\n
+    vec2 visualOffset = mix( offset, offset/uSize.xy, offsetSizeMode.xy);\n
+    return vec4( (aPosition + anchorPoint)*visualSize + (visualOffset + origin)*uSize.xy, 0.0, 1.0 );\n
+  }\n
 
-std::string GetVerticalAlignment( LayoutEngine::VerticalAlignment alignment )
-{
-  const char* name = Scripting::GetEnumerationName< Toolkit::Text::LayoutEngine::VerticalAlignment >( alignment,
-                                                                                                      VERTICAL_ALIGNMENT_STRING_TABLE,
-                                                                                                      VERTICAL_ALIGNMENT_STRING_TABLE_COUNT );
+  void main()\n
+  {\n
+    gl_Position = uMvpMatrix * ComputeVertexPosition();\n
+    vTexCoord = pixelArea.xy+pixelArea.zw*(aPosition + vec2(0.5) );\n
+  }\n
+);
 
-  return std::string( name );
-}
+const char* FRAGMENT_SHADER_SINGLE_COLOR_TEXT = DALI_COMPOSE_SHADER(
+  varying mediump vec2 vTexCoord;\n
+  uniform sampler2D sTexture;\n
+  uniform lowp vec4 uTextColorAnimatable;\n
+  uniform lowp vec4 uColor;\n
+  uniform lowp vec3 mixColor;\n
+  \n
+  void main()\n
+  {\n
+    mediump float textTexture = texture2D( sTexture, vTexCoord ).r;\n
 
-const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
-  attribute mediump vec2 aPosition;\n
-  uniform mediump mat4 uMvpMatrix;\n
-  uniform mediump vec3 uSize;\n
-  uniform mediump vec4 pixelArea;
+    // Set the color of the text to what it is animated to.
+    gl_FragColor = uTextColorAnimatable * textTexture * uColor * vec4( mixColor, 1.0 );
+  }\n
+);
+
+const char* FRAGMENT_SHADER_MULTI_COLOR_TEXT = DALI_COMPOSE_SHADER(
   varying mediump vec2 vTexCoord;\n
+  uniform sampler2D sTexture;\n
+  uniform lowp vec4 uColor;\n
+  uniform lowp vec3 mixColor;\n
   \n
   void main()\n
   {\n
-    mediump vec4 vertexPosition = vec4(aPosition, 0.0, 1.0);\n
-    vertexPosition.xyz *= uSize;\n
-    vertexPosition = uMvpMatrix * vertexPosition;\n
-    \n
-    vTexCoord = pixelArea.xy+pixelArea.zw*(aPosition + vec2(0.5) );\n
-    gl_Position = vertexPosition;\n
+    mediump vec4 textTexture = texture2D( sTexture, vTexCoord );\n
+
+    gl_FragColor = textTexture * uColor * vec4( mixColor, 1.0 );
+  }\n
+);
+
+const char* FRAGMENT_SHADER_SINGLE_COLOR_TEXT_WITH_STYLE = DALI_COMPOSE_SHADER(
+  varying mediump vec2 vTexCoord;\n
+  uniform sampler2D sTexture;\n
+  uniform sampler2D sStyle;\n
+  uniform lowp vec4 uTextColorAnimatable;\n
+  uniform lowp vec4 uColor;\n
+  uniform lowp vec3 mixColor;\n
+  \n
+  void main()\n
+  {\n
+    mediump float textTexture = texture2D( sTexture, vTexCoord ).r;\n
+    mediump vec4 styleTexture = texture2D( sStyle, vTexCoord );\n
+
+    // Draw the text as overlay above the style
+    gl_FragColor = ( uTextColorAnimatable * textTexture + styleTexture * ( 1.0 - uTextColorAnimatable.a * textTexture ) ) * uColor * vec4( mixColor, 1.0 );\n
+  }\n
+);
+
+const char* FRAGMENT_SHADER_MULTI_COLOR_TEXT_WITH_STYLE = DALI_COMPOSE_SHADER(
+  varying mediump vec2 vTexCoord;\n
+  uniform sampler2D sTexture;\n
+  uniform sampler2D sStyle;\n
+  uniform lowp vec4 uColor;\n
+  uniform lowp vec3 mixColor;\n
+  \n
+  void main()\n
+  {\n
+    mediump vec4 textTexture = texture2D( sTexture, vTexCoord );\n
+    mediump vec4 styleTexture = texture2D( sStyle, vTexCoord );\n
+
+    // Draw the text as overlay above the style
+    gl_FragColor = ( textTexture + styleTexture * ( 1.0 - textTexture.a ) ) * uColor * vec4( mixColor, 1.0 );\n
+  }\n
+);
+
+const char* FRAGMENT_SHADER_SINGLE_COLOR_TEXT_WITH_EMOJI = DALI_COMPOSE_SHADER(
+  varying mediump vec2 vTexCoord;\n
+  uniform sampler2D sTexture;\n
+  uniform sampler2D sMask;\n
+  uniform lowp vec4 uTextColorAnimatable;\n
+  uniform lowp vec4 uColor;\n
+  uniform lowp vec3 mixColor;\n
+  \n
+  void main()\n
+  {\n
+    mediump vec4 textTexture = texture2D( sTexture, vTexCoord );\n
+    mediump float maskTexture = texture2D( sMask, vTexCoord ).r;\n
+
+    // Set the color of non-transparent pixel in text to what it is animated to.
+    // Markup text with multiple text colors are not animated (but can be supported later on if required).
+    // Emoji color are not animated.
+    mediump float vstep = step( 0.0001, textTexture.a );\n
+    textTexture.rgb = mix( textTexture.rgb, uTextColorAnimatable.rgb, vstep * maskTexture );\n
+
+    // Draw the text as overlay above the style
+    gl_FragColor = textTexture * uColor * vec4( mixColor, 1.0 );\n
   }\n
 );
 
-const char* FRAGMENT_SHADER_ATLAS_CLAMP = DALI_COMPOSE_SHADER(
-    varying mediump vec2 vTexCoord;\n
-    uniform sampler2D sTexture;\n
-    uniform mediump vec4 uAtlasRect;\n
-    uniform lowp vec4 uColor;\n
-    \n
-    void main()\n
-    {\n
-      mediump vec2 texCoord = clamp( mix( uAtlasRect.xy, uAtlasRect.zw, vTexCoord ), uAtlasRect.xy, uAtlasRect.zw );\n
-      gl_FragColor = texture2D( sTexture, texCoord ) * uColor;\n
-    }\n
+const char* FRAGMENT_SHADER_SINGLE_COLOR_TEXT_WITH_STYLE_AND_EMOJI = DALI_COMPOSE_SHADER(
+  varying mediump vec2 vTexCoord;\n
+  uniform sampler2D sTexture;\n
+  uniform sampler2D sStyle;\n
+  uniform sampler2D sMask;\n
+  uniform lowp float uHasMultipleTextColors;\n
+  uniform lowp vec4 uTextColorAnimatable;\n
+  uniform lowp vec4 uColor;\n
+  uniform lowp vec3 mixColor;\n
+  \n
+  void main()\n
+  {\n
+    mediump vec4 textTexture = texture2D( sTexture, vTexCoord );\n
+    mediump vec4 styleTexture = texture2D( sStyle, vTexCoord );\n
+    mediump float maskTexture = texture2D( sMask, vTexCoord ).r;\n
+
+    // Set the color of non-transparent pixel in text to what it is animated to.
+    // Markup text with multiple text colors are not animated (but can be supported later on if required).
+    // Emoji color are not animated.
+    mediump float vstep = step( 0.0001, textTexture.a );\n
+    textTexture.rgb = mix( textTexture.rgb, uTextColorAnimatable.rgb, vstep * maskTexture * ( 1.0 - uHasMultipleTextColors ) );\n
+
+    // Draw the text as overlay above the style
+    gl_FragColor = ( textTexture + styleTexture * ( 1.0 - textTexture.a ) ) * uColor * vec4( mixColor, 1.0 );\n
+  }\n
 );
 
-Geometry CreateGeometry( VisualFactoryCache& factoryCache, ImageDimensions gridSize )
+/**
+ * Return Property index for the given string key
+ * param[in] stringKey the string index key
+ * return the key as an index
+ */
+
+Dali::Property::Index StringKeyToIndexKey( const std::string& stringKey )
 {
-  Geometry geometry;
+  Dali::Property::Index result = Property::INVALID_KEY;
 
-  if( gridSize == ImageDimensions( 1, 1 ) )
+  if( stringKey == VISUAL_TYPE )
   {
-    geometry = factoryCache.GetGeometry( VisualFactoryCache::QUAD_GEOMETRY );
-    if( !geometry )
-    {
-      geometry =  VisualFactoryCache::CreateQuadGeometry();
-      factoryCache.SaveGeometry( VisualFactoryCache::QUAD_GEOMETRY, geometry );
-    }
+    result = Toolkit::Visual::Property::TYPE;
   }
-  else
+  else if( stringKey == TEXT_PROPERTY )
   {
-    geometry = VisualFactoryCache::CreateGridGeometry( gridSize );
+    result = Toolkit::TextVisual::Property::TEXT;
   }
+  else if( stringKey == FONT_FAMILY_PROPERTY )
+  {
+    result = Toolkit::TextVisual::Property::FONT_FAMILY;
+  }
+  else if( stringKey == FONT_STYLE_PROPERTY )
+  {
+    result = Toolkit::TextVisual::Property::FONT_STYLE;
+  }
+  else if( stringKey == POINT_SIZE_PROPERTY )
+  {
+    result = Toolkit::TextVisual::Property::POINT_SIZE;
+  }
+  else if( stringKey == MULTI_LINE_PROPERTY )
+  {
+    result = Toolkit::TextVisual::Property::MULTI_LINE;
+  }
+  else if( stringKey == HORIZONTAL_ALIGNMENT_PROPERTY )
+  {
+    result = Toolkit::TextVisual::Property::HORIZONTAL_ALIGNMENT;
+  }
+  else if( stringKey == VERTICAL_ALIGNMENT_PROPERTY )
+  {
+    result = Toolkit::TextVisual::Property::VERTICAL_ALIGNMENT;
+  }
+  else if( stringKey == TEXT_COLOR_PROPERTY )
+  {
+    result = Toolkit::TextVisual::Property::TEXT_COLOR;
+  }
+  else if( stringKey == ENABLE_MARKUP_PROPERTY )
+  {
+    result = Toolkit::TextVisual::Property::ENABLE_MARKUP;
+  }
+  else if( stringKey == SHADOW_PROPERTY )
+  {
+    result = Toolkit::TextVisual::Property::SHADOW;
+  }
+  else if( stringKey == UNDERLINE_PROPERTY )
+  {
+    result = Toolkit::TextVisual::Property::UNDERLINE;
+  }
+  else if( stringKey == OUTLINE_PROPERTY )
+  {
+    result = Toolkit::DevelTextVisual::Property::OUTLINE;
+  }
+  else if( stringKey == BACKGROUND_PROPERTY )
+  {
+    result = Toolkit::DevelTextVisual::Property::BACKGROUND;
+  }
+
+  return result;
+}
+
+void TextColorConstraint( Vector4& current, const PropertyInputContainer& inputs )
+{
+  Vector4 color = inputs[0]->GetVector4();
+  current.r = color.r * color.a;
+  current.g = color.g * color.a;
+  current.b = color.b * color.a;
+  current.a = color.a;
+}
 
-  return geometry;
+void OpacityConstraint( float& current, const PropertyInputContainer& inputs )
+{
+  // Make zero if the alpha value of text color is zero to skip rendering text
+  if( EqualsZero( inputs[0]->GetVector4().a ) )
+  {
+    current = 0.0f;
+  }
+  else
+  {
+    current = 1.0f;
+  }
 }
 
 } // unnamed namespace
 
-TextVisualPtr TextVisual::New( VisualFactoryCache& factoryCache )
+TextVisualPtr TextVisual::New( VisualFactoryCache& factoryCache, const Property::Map& properties )
 {
-  return new TextVisual( factoryCache );
+  TextVisualPtr TextVisualPtr( new TextVisual( factoryCache ) );
+  TextVisualPtr->SetProperties( properties );
+  return TextVisualPtr;
 }
 
-void TextVisual::SetSize( const Vector2& size )
+void TextVisual::ConvertStringKeysToIndexKeys( Property::Map& propertyMap )
 {
-  const Text::Controller::UpdateTextType updateTextType = mController->Relayout( size );
+  Property::Map outMap;
 
-  if( ( Text::Controller::NONE_UPDATED != ( Text::Controller::MODEL_UPDATED & updateTextType ) ) ||
-      !mRenderer )
+  for( Property::Map::SizeType index = 0u, count = propertyMap.Count(); index < count; ++index )
   {
-    if( !mRenderer )
+    const KeyValuePair& keyValue = propertyMap.GetKeyValue( index );
+
+    Property::Index indexKey = keyValue.first.indexKey;
+
+    if ( keyValue.first.type == Property::Key::STRING )
     {
-      mRenderer = Text::Backend::Get().NewRenderer( mRenderingBackend );
+      indexKey = StringKeyToIndexKey( keyValue.first.stringKey );
     }
 
-    RenderText();
+    outMap.Insert( indexKey, keyValue.second );
   }
+
+  propertyMap = outMap;
 }
 
-float TextVisual::GetHeightForWidth( float width ) const
+float TextVisual::GetHeightForWidth( float width )
 {
   return mController->GetHeightForWidth( width );
 }
@@ -193,9 +337,7 @@ void TextVisual::DoCreatePropertyMap( Property::Map& map ) const
   Property::Value value;
 
   map.Clear();
-  map.Insert( Toolkit::VisualProperty::TYPE, Toolkit::Visual::TEXT );
-
-  map.Insert( Toolkit::TextVisual::Property::RENDERING_BACKEND, mRenderingBackend );
+  map.Insert( Toolkit::Visual::Property::TYPE, Toolkit::Visual::TEXT );
 
   std::string text;
   mController->GetText( text );
@@ -206,37 +348,47 @@ void TextVisual::DoCreatePropertyMap( Property::Map& map ) const
   GetFontStyleProperty( mController, value, Text::FontStyle::DEFAULT );
   map.Insert( Toolkit::TextVisual::Property::FONT_STYLE, value );
 
-  map.Insert( Toolkit::TextVisual::Property::POINT_SIZE, mController->GetDefaultPointSize() );
+  map.Insert( Toolkit::TextVisual::Property::POINT_SIZE, mController->GetDefaultFontSize( Text::Controller::POINT_SIZE ) );
 
   map.Insert( Toolkit::TextVisual::Property::MULTI_LINE, mController->IsMultiLineEnabled() );
 
-  map.Insert( Toolkit::TextVisual::Property::HORIZONTAL_ALIGNMENT, GetHorizontalAlignment( mController->GetHorizontalAlignment() ) );
+  map.Insert( Toolkit::TextVisual::Property::HORIZONTAL_ALIGNMENT, mController->GetHorizontalAlignment() );
 
-  map.Insert( Toolkit::TextVisual::Property::VERTICAL_ALIGNMENT, GetVerticalAlignment( mController->GetVerticalAlignment() ) );
+  map.Insert( Toolkit::TextVisual::Property::VERTICAL_ALIGNMENT, mController->GetVerticalAlignment() );
 
-  map.Insert( Toolkit::TextVisual::Property::TEXT_COLOR, mController->GetTextColor() );
+  map.Insert( Toolkit::TextVisual::Property::TEXT_COLOR, mController->GetDefaultColor() );
 
   map.Insert( Toolkit::TextVisual::Property::ENABLE_MARKUP, mController->IsMarkupProcessorEnabled() );
 
-  map.Insert( Toolkit::TextVisual::Property::LINE_SPACING, mController->GetDefaultLineSpacing() );
+  GetShadowProperties( mController, value, Text::EffectStyle::DEFAULT );
+  map.Insert( Toolkit::TextVisual::Property::SHADOW, value );
 
   GetUnderlineProperties( mController, value, Text::EffectStyle::DEFAULT );
   map.Insert( Toolkit::TextVisual::Property::UNDERLINE, value );
 
-  GetShadowProperties( mController, value, Text::EffectStyle::DEFAULT );
-  map.Insert( Toolkit::TextVisual::Property::SHADOW, value );
-
   GetOutlineProperties( mController, value, Text::EffectStyle::DEFAULT );
-  map.Insert( Toolkit::TextVisual::Property::OUTLINE, value );
+  map.Insert( Toolkit::DevelTextVisual::Property::OUTLINE, value );
 
-  map.Insert( Toolkit::TextVisual::Property::BATCHING_ENABLED, false ); // TODO
+  GetBackgroundProperties( mController, value, Text::EffectStyle::DEFAULT );
+  map.Insert( Toolkit::DevelTextVisual::Property::BACKGROUND, value );
 }
 
+void TextVisual::DoCreateInstancePropertyMap( Property::Map& map ) const
+{
+  map.Clear();
+  map.Insert( Toolkit::Visual::Property::TYPE, Toolkit::Visual::TEXT );
+  std::string text;
+  mController->GetText( text );
+  map.Insert( Toolkit::TextVisual::Property::TEXT, text );
+}
+
+
 TextVisual::TextVisual( VisualFactoryCache& factoryCache )
-: Visual::Base( factoryCache ),
+: Visual::Base( factoryCache, Visual::FittingMode::FIT_KEEP_ASPECT_RATIO, Toolkit::Visual::TEXT ),
   mController( Text::Controller::New() ),
-  mRenderingBackend( Toolkit::Text::DEFAULT_RENDERING_BACKEND ),
-  mHasBeenStaged( false )
+  mTypesetter( Text::Typesetter::New( mController->GetTextModel() ) ),
+  mAnimatableTextColorPropertyIndex( Property::INVALID_INDEX ),
+  mRendererUpdateNeeded( false )
 {
 }
 
@@ -250,167 +402,105 @@ void TextVisual::DoSetProperties( const Property::Map& propertyMap )
   {
     const KeyValuePair& keyValue = propertyMap.GetKeyValue( index );
 
-    switch( keyValue.first.type )
+    Property::Index indexKey = keyValue.first.indexKey;
+
+    if( keyValue.first.type == Property::Key::STRING )
     {
-      case Property::Key::INDEX:
-      {
-        if( Toolkit::VisualProperty::TYPE != keyValue.first.indexKey ) // Toolkit::VisualProperty::TYPE is not a TextVisual's property.
-        {
-          DoSetProperty( keyValue.first.indexKey, keyValue.second );
-        }
-        break;
-      }
-      case Property::Key::STRING:
-      {
-        if( keyValue.first.stringKey == RENDERING_BACKEND_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::RENDERING_BACKEND, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == TEXT_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::TEXT, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == FONT_FAMILY_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::FONT_FAMILY, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == FONT_STYLE_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::FONT_STYLE, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == POINT_SIZE_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::POINT_SIZE, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == MULTI_LINE_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::MULTI_LINE, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == HORIZONTAL_ALIGNMENT_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::HORIZONTAL_ALIGNMENT, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == VERTICAL_ALIGNMENT_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::VERTICAL_ALIGNMENT, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == TEXT_COLOR_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::TEXT_COLOR, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == ENABLE_MARKUP_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::ENABLE_MARKUP, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == ENABLE_AUTO_SCROLL_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::ENABLE_AUTO_SCROLL, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == AUTO_SCROLL_SPEED_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::AUTO_SCROLL_SPEED, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == AUTO_SCROLL_LOOP_COUNT_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::AUTO_SCROLL_LOOP_COUNT, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == AUTO_SCROLL_GAP_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::AUTO_SCROLL_GAP, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == LINE_SPACING_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::LINE_SPACING, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == UNDERLINE_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::UNDERLINE, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == SHADOW_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::SHADOW, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == OUTLINE_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::OUTLINE, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == BATCHING_ENABLED_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::BATCHING_ENABLED, keyValue.second );
-        }
-        break;
-      }
+      indexKey = StringKeyToIndexKey( keyValue.first.stringKey );
     }
-  }
 
-  // Retrieve the layout engine to set whether to elide the text and set the cursor's width.
-  Text::LayoutEngine& engine = mController->GetLayoutEngine();
+    DoSetProperty( indexKey, keyValue.second );
+  }
 
   // Elide the text if it exceeds the boundaries.
-  engine.SetTextEllipsisEnabled( true );
+  mController->SetTextElideEnabled( true );
+
+  // Retrieve the layout engine to set the cursor's width.
+  Text::Layout::Engine& engine = mController->GetLayoutEngine();
 
   // Sets 0 as cursor's width.
   engine.SetCursorWidth( 0u ); // Do not layout space for the cursor.
 }
 
-void TextVisual::DoSetOnStage( Actor& actor )
+void TextVisual::DoSetOnScene( Actor& actor )
 {
-  // TODO Create the actual renderer(s) for the text!!!!
-  //      Will crash if no mImpl->mRenderer is set.
-  Geometry geometry;
-  Shader shader;
+  mControl = actor;
 
-  geometry = CreateGeometry( mFactoryCache, ImageDimensions( 1, 1 ) );
-
-  shader = mFactoryCache.GetShader( VisualFactoryCache::IMAGE_SHADER_ATLAS_DEFAULT_WRAP );
-  if( !shader )
-  {
-    shader = Shader::New( VERTEX_SHADER, FRAGMENT_SHADER_ATLAS_CLAMP );
-    mFactoryCache.SaveShader( VisualFactoryCache::IMAGE_SHADER_ATLAS_DEFAULT_WRAP, shader );
-  }
+  Geometry geometry = mFactoryCache.GetGeometry( VisualFactoryCache::QUAD_GEOMETRY );
+  Shader shader = GetTextShader(mFactoryCache, TextType::SINGLE_COLOR_TEXT, TextType::NO_EMOJI, TextType::NO_STYLES);
 
   mImpl->mRenderer = Renderer::New( geometry, shader );
+  mImpl->mRenderer.SetProperty( Dali::Renderer::Property::DEPTH_INDEX, Toolkit::DepthIndex::CONTENT );
 
-  mSelf = actor;
+  // Enable the pre-multiplied alpha to improve the text quality
+  EnablePreMultipliedAlpha(true);
 
-  if( mHasBeenStaged )
+  const Vector4& defaultColor = mController->GetTextModel()->GetDefaultColor();
+  Dali::Property::Index shaderTextColorIndex = mImpl->mRenderer.RegisterProperty( "uTextColorAnimatable", defaultColor );
+
+  if ( mAnimatableTextColorPropertyIndex != Property::INVALID_INDEX )
   {
-    RenderText();
+    // Create constraint for the animatable text's color Property with uTextColorAnimatable in the renderer.
+    if( shaderTextColorIndex != Property::INVALID_INDEX )
+    {
+      Constraint colorConstraint = Constraint::New<Vector4>( mImpl->mRenderer, shaderTextColorIndex, TextColorConstraint );
+      colorConstraint.AddSource( Source( actor, mAnimatableTextColorPropertyIndex ) );
+      colorConstraint.Apply();
+
+      // Make zero if the alpha value of text color is zero to skip rendering text
+      Constraint opacityConstraint = Constraint::New< float >( mImpl->mRenderer, Dali::DevelRenderer::Property::OPACITY, OpacityConstraint );
+      opacityConstraint.AddSource( Source( actor, mAnimatableTextColorPropertyIndex ) );
+      opacityConstraint.Apply();
+    }
   }
-  else
+
+  // Renderer needs textures and to be added to control
+  mRendererUpdateNeeded = true;
+
+  mRendererList.push_back( mImpl->mRenderer );
+
+  UpdateRenderer();
+}
+
+void TextVisual::RemoveRenderer( Actor& actor )
+{
+  for( RendererContainer::iterator iter = mRendererList.begin(); iter != mRendererList.end(); ++iter)
   {
-    mHasBeenStaged = true;
+    Renderer renderer = (*iter);
+    if( renderer )
+    {
+      // Removes the renderer from the actor.
+      actor.RemoveRenderer( renderer );
+    }
   }
+  // Clear the renderer list
+  mRendererList.clear();
+}
+
+void TextVisual::DoSetOffScene( Actor& actor )
+{
+  RemoveRenderer( actor );
+
+  // Resets the renderer.
+  mImpl->mRenderer.Reset();
+
+  // Resets the control handle.
+  mControl.Reset();
 }
 
-void TextVisual::DoSetOffStage( Actor& actor )
+void TextVisual::OnSetTransform()
 {
-  mSelf.Reset();
+  UpdateRenderer();
 }
 
 void TextVisual::DoSetProperty( Dali::Property::Index index, const Dali::Property::Value& propertyValue )
 {
   switch( index )
   {
-    case Toolkit::TextVisual::Property::RENDERING_BACKEND:
+    case Toolkit::TextVisual::Property::ENABLE_MARKUP:
     {
-      int backend = propertyValue.Get<int>();
-
-#ifndef ENABLE_VECTOR_BASED_TEXT_RENDERING
-      if( Text::RENDERING_VECTOR_BASED == backend )
-      {
-        backend = TextAbstraction::BITMAP_GLYPH; // Fallback to bitmap-based rendering
-      }
-#endif
-      if( mRenderingBackend != backend )
-      {
-        mRenderingBackend = backend;
-        mRenderer.Reset();
-
-        // When using the vector-based rendering, the size of the GLyphs are different
-        TextAbstraction::GlyphType glyphType = ( Text::RENDERING_VECTOR_BASED == mRenderingBackend ) ? TextAbstraction::VECTOR_GLYPH : TextAbstraction::BITMAP_GLYPH;
-        mController->SetGlyphType( glyphType );
-      }
+      const bool enableMarkup = propertyValue.Get<bool>();
+      mController->SetMarkupProcessorEnabled( enableMarkup );
       break;
     }
     case Toolkit::TextVisual::Property::TEXT:
@@ -431,10 +521,9 @@ void TextVisual::DoSetProperty( Dali::Property::Index index, const Dali::Propert
     case Toolkit::TextVisual::Property::POINT_SIZE:
     {
       const float pointSize = propertyValue.Get<float>();
-
-      if( !Equals( mController->GetDefaultPointSize(), pointSize ) )
+      if( !Equals( mController->GetDefaultFontSize( Text::Controller::POINT_SIZE ), pointSize ) )
       {
-        mController->SetDefaultPointSize( pointSize );
+        mController->SetDefaultFontSize( pointSize, Text::Controller::POINT_SIZE );
       }
       break;
     }
@@ -445,358 +534,459 @@ void TextVisual::DoSetProperty( Dali::Property::Index index, const Dali::Propert
     }
     case Toolkit::TextVisual::Property::HORIZONTAL_ALIGNMENT:
     {
-      LayoutEngine::HorizontalAlignment alignment( LayoutEngine::HORIZONTAL_ALIGN_BEGIN );
-      if( Scripting::GetEnumeration< Toolkit::Text::LayoutEngine::HorizontalAlignment >( propertyValue.Get< std::string >().c_str(),
-                                                                                         HORIZONTAL_ALIGNMENT_STRING_TABLE,
-                                                                                         HORIZONTAL_ALIGNMENT_STRING_TABLE_COUNT,
-                                                                                         alignment ) )
+      if( mController )
       {
-        mController->SetHorizontalAlignment( alignment );
+        Text::HorizontalAlignment::Type alignment( static_cast< Text::HorizontalAlignment::Type >( -1 ) ); // Set to invalid value to ensure a valid mode does get set
+        if( Toolkit::Text::GetHorizontalAlignmentEnumeration( propertyValue, alignment ) )
+        {
+          mController->SetHorizontalAlignment( alignment );
+        }
       }
       break;
     }
     case Toolkit::TextVisual::Property::VERTICAL_ALIGNMENT:
     {
-      LayoutEngine::VerticalAlignment alignment( LayoutEngine::VERTICAL_ALIGN_BOTTOM );
-      if( Scripting::GetEnumeration< Toolkit::Text::LayoutEngine::VerticalAlignment >( propertyValue.Get< std::string >().c_str(),
-                                                                                       VERTICAL_ALIGNMENT_STRING_TABLE,
-                                                                                       VERTICAL_ALIGNMENT_STRING_TABLE_COUNT,
-                                                                                       alignment ) )
+      if( mController )
       {
-        mController->SetVerticalAlignment( alignment );
+        Toolkit::Text::VerticalAlignment::Type alignment( static_cast< Text::VerticalAlignment::Type >( -1 ) ); // Set to invalid value to ensure a valid mode does get set
+        if( Toolkit::Text::GetVerticalAlignmentEnumeration( propertyValue, alignment) )
+        {
+          mController->SetVerticalAlignment( alignment );
+        }
       }
       break;
     }
     case Toolkit::TextVisual::Property::TEXT_COLOR:
     {
-      const Vector4 textColor = propertyValue.Get< Vector4 >();
-      if( mController->GetTextColor() != textColor )
+      const Vector4& textColor = propertyValue.Get< Vector4 >();
+      if( mController->GetDefaultColor() != textColor )
       {
-        mController->SetTextColor( textColor );
-        mRenderer.Reset();
+        mController->SetDefaultColor( textColor );
       }
       break;
     }
-    case Toolkit::TextVisual::Property::ENABLE_MARKUP:
-    {
-      const bool enableMarkup = propertyValue.Get<bool>();
-      mController->SetMarkupProcessorEnabled( enableMarkup );
-      break;
-    }
-    case Toolkit::TextVisual::Property::ENABLE_AUTO_SCROLL:
-    {
-      // nothing to do.
-      break;
-    }
-    case Toolkit::TextVisual::Property::AUTO_SCROLL_SPEED:
+    case Toolkit::TextVisual::Property::SHADOW:
     {
-      // nothing to do.
+      SetShadowProperties( mController, propertyValue, Text::EffectStyle::DEFAULT );
       break;
     }
-    case Toolkit::TextVisual::Property::AUTO_SCROLL_LOOP_COUNT:
+    case Toolkit::TextVisual::Property::UNDERLINE:
     {
-      // nothing to do.
+      SetUnderlineProperties( mController, propertyValue, Text::EffectStyle::DEFAULT );
       break;
     }
-    case Toolkit::TextVisual::Property::AUTO_SCROLL_GAP:
+    case Toolkit::DevelTextVisual::Property::OUTLINE:
     {
-      // nothing to do.
+      SetOutlineProperties( mController, propertyValue, Text::EffectStyle::DEFAULT );
       break;
     }
-    case Toolkit::TextVisual::Property::LINE_SPACING:
+    case Toolkit::DevelTextVisual::Property::BACKGROUND:
     {
-      const float lineSpacing = propertyValue.Get<float>();
-      mController->SetDefaultLineSpacing( lineSpacing );
-      mRenderer.Reset();
+      SetBackgroundProperties( mController, propertyValue, Text::EffectStyle::DEFAULT );
       break;
     }
-    case Toolkit::TextVisual::Property::UNDERLINE:
-    {
-      // TODO : This switch can be removed when the deprecated SHADOW_OFFSET and SHADOW_COLOR properties are finally removed.
-      //        Only the code for the MAP case should be kept.
-      switch( propertyValue.GetType() )
-      {
-        case Property::VECTOR4:
-        {
-          const Vector4 color = propertyValue.Get<Vector4>();
-          if( mController->GetUnderlineColor() != color )
-          {
-            mController->SetUnderlineColor( color );
-            mRenderer.Reset();
-          }
-          break;
-        }
-        case Property::FLOAT:
-        {
-          float height = propertyValue.Get<float>();
-          if( fabsf( mController->GetUnderlineHeight() - height ) > Math::MACHINE_EPSILON_1000 )
-          {
-            mController->SetUnderlineHeight( height );
-            mRenderer.Reset();
-          }
-          break;
-        }
-        case Property::BOOLEAN:
-        {
-          const bool enabled = propertyValue.Get<bool>();
-          if( mController->IsUnderlineEnabled() != enabled )
-          {
-            mController->SetUnderlineEnabled( enabled );
-            mRenderer.Reset();
-          }
-          break;
-        }
-        case Property::MAP:
-        {
-          const bool update = SetUnderlineProperties( mController, propertyValue, Text::EffectStyle::DEFAULT );
-          if( update )
-          {
-            mRenderer.Reset();
-          }
-          break;
-        }
-        default:
-        {
-          // Nothing to do.
-          break;
-        }
-      }
+  }
+}
 
-      break;
-    }
-    case Toolkit::TextVisual::Property::SHADOW:
+void TextVisual::UpdateRenderer()
+{
+  Actor control = mControl.GetHandle();
+  if( !control )
+  {
+    // Nothing to do.
+    return;
+  }
+
+  // Calculates the size to be used to relayout.
+  Vector2 relayoutSize;
+
+  const bool isWidthRelative = fabsf( mImpl->mTransform.mOffsetSizeMode.z ) < Math::MACHINE_EPSILON_1000;
+  const bool isHeightRelative = fabsf( mImpl->mTransform.mOffsetSizeMode.w ) < Math::MACHINE_EPSILON_1000;
+
+  // Round the size and offset to avoid pixel alignement issues.
+  relayoutSize.width = floorf( 0.5f + ( isWidthRelative ? mImpl->mControlSize.width * mImpl->mTransform.mSize.x : mImpl->mTransform.mSize.width ) );
+  relayoutSize.height = floorf( 0.5f + ( isHeightRelative ? mImpl->mControlSize.height * mImpl->mTransform.mSize.y : mImpl->mTransform.mSize.height ) );
+
+  std::string text;
+  mController->GetText( text );
+
+  if( ( fabsf( relayoutSize.width ) < Math::MACHINE_EPSILON_1000 ) || ( fabsf( relayoutSize.height ) < Math::MACHINE_EPSILON_1000 ) || text.empty() )
+  {
+    // Remove the texture set and any renderer previously set.
+    RemoveRenderer( control );
+
+    // Nothing else to do if the relayout size is zero.
+    ResourceReady( Toolkit::Visual::ResourceStatus::READY );
+    return;
+  }
+
+
+  Dali::LayoutDirection::Type layoutDirection;
+  if( mController->IsMatchSystemLanguageDirection() )
+  {
+    layoutDirection = static_cast<Dali::LayoutDirection::Type>( DevelWindow::Get( control ).GetRootLayer().GetProperty( Dali::Actor::Property::LAYOUT_DIRECTION ).Get<int>() );
+  }
+  else
+  {
+    layoutDirection = static_cast<Dali::LayoutDirection::Type>( control.GetProperty( Dali::Actor::Property::LAYOUT_DIRECTION ).Get<int>() );
+  }
+
+  const Text::Controller::UpdateTextType updateTextType = mController->Relayout( relayoutSize, layoutDirection );
+
+  if( Text::Controller::NONE_UPDATED != ( Text::Controller::MODEL_UPDATED & updateTextType )
+   || mRendererUpdateNeeded )
+  {
+    mRendererUpdateNeeded = false;
+
+    // Remove the texture set and any renderer previously set.
+    RemoveRenderer( control );
+
+    if( ( relayoutSize.width > Math::MACHINE_EPSILON_1000 ) &&
+        ( relayoutSize.height > Math::MACHINE_EPSILON_1000 ) )
     {
-      // TODO : This switch can be removed when the deprecated SHADOW_OFFSET and SHADOW_COLOR properties are finally removed.
-      //        Only the code for the MAP case should be kept.
-      switch( propertyValue.GetType() )
+      // Check whether it is a markup text with multiple text colors
+      const Vector4* const colorsBuffer = mController->GetTextModel()->GetColors();
+      bool hasMultipleTextColors = ( NULL != colorsBuffer );
+
+      // Check whether the text contains any color glyph
+      bool containsColorGlyph = false;
+
+      TextAbstraction::FontClient fontClient = TextAbstraction::FontClient::Get();
+      const Text::GlyphInfo* const glyphsBuffer = mController->GetTextModel()->GetGlyphs();
+      const Text::Length numberOfGlyphs = mController->GetTextModel()->GetNumberOfGlyphs();
+      for ( Text::Length glyphIndex = 0; glyphIndex < numberOfGlyphs; glyphIndex++ )
       {
-        case Property::VECTOR2:
-        {
-          const Vector2 shadowOffset = propertyValue.Get<Vector2>();
-          if( mController->GetShadowOffset() != shadowOffset )
-          {
-            mController->SetShadowOffset( shadowOffset );
-            mRenderer.Reset();
-          }
-          break;
-        }
-        case Property::VECTOR4:
-        {
-          const Vector4 shadowColor = propertyValue.Get<Vector4>();
-          if( mController->GetShadowColor() != shadowColor )
-          {
-            mController->SetShadowColor( shadowColor );
-            mRenderer.Reset();
-          }
-          break;
-        }
-        case Property::MAP:
-        {
-          const bool update = SetShadowProperties( mController, propertyValue, Text::EffectStyle::DEFAULT );
-          if( update )
-          {
-            mRenderer.Reset();
-          }
-          break;
-        }
-        default:
+        // Retrieve the glyph's info.
+        const Text::GlyphInfo* const glyphInfo = glyphsBuffer + glyphIndex;
+
+        // Whether the current glyph is a color one.
+        if( fontClient.IsColorGlyph( glyphInfo->fontId, glyphInfo->index ) )
         {
-          // Nothing to do.
+          containsColorGlyph = true;
           break;
         }
       }
-      break;
-    }
-    case Toolkit::TextVisual::Property::EMBOSS:
-    {
-      const bool update = SetEmbossProperties( mController, propertyValue, Text::EffectStyle::DEFAULT );
-      if( update )
-      {
-        mRenderer.Reset();
-     }
-      break;
-    }
-    case Toolkit::TextVisual::Property::OUTLINE:
-    {
-      const bool update = SetOutlineProperties( mController, propertyValue, Text::EffectStyle::DEFAULT );
-      if( update )
+
+      // Check whether the text contains any style colors (e.g. underline color, shadow color, etc.)
+
+      bool shadowEnabled = false;
+      const Vector2& shadowOffset = mController->GetTextModel()->GetShadowOffset();
+      if ( fabsf( shadowOffset.x ) > Math::MACHINE_EPSILON_1 || fabsf( shadowOffset.y ) > Math::MACHINE_EPSILON_1 )
       {
-        mRenderer.Reset();
+        shadowEnabled = true;
       }
-      break;
-    }
-    case Toolkit::TextVisual::Property::BATCHING_ENABLED:
-    {
-      // TODO
-      break;
-    }
-    default:
-    {
-      // Should not arrive here.
-      DALI_ASSERT_DEBUG( false );
+
+      const bool underlineEnabled = mController->GetTextModel()->IsUnderlineEnabled();
+      const bool outlineEnabled = ( mController->GetTextModel()->GetOutlineWidth() > Math::MACHINE_EPSILON_1 );
+      const bool backgroundEnabled = mController->GetTextModel()->IsBackgroundEnabled();;
+
+      const bool styleEnabled = ( shadowEnabled || underlineEnabled || outlineEnabled || backgroundEnabled );
+
+
+      AddRenderer( control, relayoutSize, hasMultipleTextColors, containsColorGlyph, styleEnabled );
+
+      // Text rendered and ready to display
+      ResourceReady( Toolkit::Visual::ResourceStatus::READY );
     }
   }
 }
 
-Dali::Property::Value TextVisual::DoGetProperty( Dali::Property::Index index )
+void TextVisual::AddTexture( TextureSet& textureSet, PixelData& data, Sampler& sampler, unsigned int textureSetIndex )
+{
+  Texture texture = Texture::New( Dali::TextureType::TEXTURE_2D,
+                                  data.GetPixelFormat(),
+                                  data.GetWidth(),
+                                  data.GetHeight() );
+  texture.Upload( data );
+
+  textureSet.SetTexture( textureSetIndex, texture );
+  textureSet.SetSampler( textureSetIndex, sampler );
+}
+
+PixelData TextVisual::ConvertToPixelData( unsigned char* buffer, int width, int height, int offsetPosition, const Pixel::Format textPixelFormat )
 {
-  Dali::Property::Value value;
+  int bpp = Pixel::GetBytesPerPixel( textPixelFormat );
+  unsigned int bufferSize = width * height * bpp;
+  unsigned char* dstBuffer = static_cast<unsigned char*>( malloc ( bufferSize ) );
+  memcpy( dstBuffer, buffer + offsetPosition * bpp, bufferSize );
+  PixelData pixelData = Dali::PixelData::New( dstBuffer,
+                                              bufferSize,
+                                              width,
+                                              height,
+                                              textPixelFormat,
+                                              Dali::PixelData::FREE );
+  return pixelData;
+}
 
-  switch( index )
+void TextVisual::CreateTextureSet( TilingInfo& info, Renderer& renderer, Sampler& sampler, bool hasMultipleTextColors, bool containsColorGlyph, bool styleEnabled )
+{
+
+  TextureSet textureSet = TextureSet::New();
+  unsigned int textureSetIndex = 0u;
+
+  // Convert the buffer to pixel data to make it a texture.
+  if( info.textBuffer )
   {
-    case Toolkit::TextVisual::Property::RENDERING_BACKEND:
-    {
-      value = mRenderingBackend;
-      break;
-    }
-    case Toolkit::TextVisual::Property::TEXT:
-    {
-      std::string text;
-      mController->GetText( text );
-      value = text;
-      break;
-    }
-    case Toolkit::TextVisual::Property::FONT_FAMILY:
-    {
-      value = mController->GetDefaultFontFamily();
-      break;
-    }
-    case Toolkit::TextVisual::Property::FONT_STYLE:
-    {
-      GetFontStyleProperty( mController, value, Text::FontStyle::DEFAULT );
-      break;
-    }
-    case Toolkit::TextVisual::Property::POINT_SIZE:
-    {
-      value = mController->GetDefaultPointSize();
-      break;
-    }
-    case Toolkit::TextVisual::Property::MULTI_LINE:
-    {
-      value = mController->IsMultiLineEnabled();
-      break;
-    }
-    case Toolkit::TextVisual::Property::HORIZONTAL_ALIGNMENT:
-    {
-      const char* name = Scripting::GetEnumerationName< Toolkit::Text::LayoutEngine::HorizontalAlignment >( mController->GetHorizontalAlignment(),
-                                                                                                            HORIZONTAL_ALIGNMENT_STRING_TABLE,
-                                                                                                            HORIZONTAL_ALIGNMENT_STRING_TABLE_COUNT );
-      if( name )
-      {
-        value = std::string( name );
-      }
-      break;
-    }
-    case Toolkit::TextVisual::Property::VERTICAL_ALIGNMENT:
-    {
-      const char* name = Scripting::GetEnumerationName< Toolkit::Text::LayoutEngine::VerticalAlignment >( mController->GetVerticalAlignment(),
-                                                                                                          VERTICAL_ALIGNMENT_STRING_TABLE,
-                                                                                                          VERTICAL_ALIGNMENT_STRING_TABLE_COUNT );
-      if( name )
-      {
-        value = std::string( name );
-      }
-      break;
-    }
-    case Toolkit::TextVisual::Property::TEXT_COLOR:
-    {
-      value = mController->GetTextColor();
-      break;
-    }
-    case Toolkit::TextVisual::Property::ENABLE_MARKUP:
-    {
-      value = mController->IsMarkupProcessorEnabled();
-      break;
-    }
-    case Toolkit::TextVisual::Property::ENABLE_AUTO_SCROLL:
-    {
-      // nothing to do.
-      break;
-    }
-    case Toolkit::TextVisual::Property::AUTO_SCROLL_SPEED:
-    {
-      // nothing to do.
-      break;
-    }
-    case Toolkit::TextVisual::Property::AUTO_SCROLL_LOOP_COUNT:
-    {
-      // nothing to do.
-      break;
-    }
-    case Toolkit::TextVisual::Property::AUTO_SCROLL_GAP:
+    PixelData data = ConvertToPixelData( info.textBuffer, info.width, info.height, info.offsetPosition, info.textPixelFormat );
+    AddTexture( textureSet, data, sampler, textureSetIndex );
+    ++textureSetIndex;
+  }
+
+  if( styleEnabled && info.styleBuffer )
+  {
+    PixelData styleData = ConvertToPixelData( info.styleBuffer, info.width, info.height, info.offsetPosition, Pixel::RGBA8888 );
+    AddTexture( textureSet, styleData, sampler, textureSetIndex );
+    ++textureSetIndex;
+  }
+
+  if( containsColorGlyph && !hasMultipleTextColors && info.maskBuffer )
+  {
+    PixelData maskData = ConvertToPixelData( info.maskBuffer, info.width, info.height, info.offsetPosition, Pixel::L8 );
+    AddTexture( textureSet, maskData, sampler, textureSetIndex );
+  }
+
+  renderer.SetTextures( textureSet );
+
+  //Register transform properties
+  mImpl->mTransform.RegisterUniforms( renderer, Direction::LEFT_TO_RIGHT );
+
+  // Enable the pre-multiplied alpha to improve the text quality
+  renderer.SetProperty( Renderer::Property::BLEND_PRE_MULTIPLIED_ALPHA, true );
+  renderer.RegisterProperty( PREMULTIPLIED_ALPHA, 1.0f );
+
+  // Set size and offset for the tiling.
+  renderer.RegisterProperty( SIZE, Vector2( info.width, info.height ) );
+  renderer.RegisterProperty( OFFSET, Vector2( info.offSet.x, info.offSet.y ) );
+  renderer.RegisterProperty( "uHasMultipleTextColors", static_cast<float>( hasMultipleTextColors ) );
+  renderer.SetProperty( Renderer::Property::BLEND_MODE, BlendMode::ON);
+
+  mRendererList.push_back( renderer );
+}
+
+
+void TextVisual::AddRenderer( Actor& actor, const Vector2& size, bool hasMultipleTextColors, bool containsColorGlyph, bool styleEnabled )
+{
+  Shader shader = GetTextShader( mFactoryCache, hasMultipleTextColors, containsColorGlyph, styleEnabled );
+  mImpl->mRenderer.SetShader( shader );
+
+  // Get the maximum size.
+  const int maxTextureSize = Dali::GetMaxTextureSize();
+
+  // No tiling required. Use the default renderer.
+  if( size.height < maxTextureSize )
+  {
+    TextureSet textureSet = GetTextTexture( size, hasMultipleTextColors, containsColorGlyph, styleEnabled );
+
+    mImpl->mRenderer.SetTextures( textureSet );
+    //Register transform properties
+    mImpl->mTransform.RegisterUniforms( mImpl->mRenderer, Direction::LEFT_TO_RIGHT );
+    mImpl->mRenderer.RegisterProperty( "uHasMultipleTextColors", static_cast<float>( hasMultipleTextColors ) );
+    mImpl->mRenderer.SetProperty( Renderer::Property::BLEND_MODE, BlendMode::ON);
+
+    mRendererList.push_back( mImpl->mRenderer );
+  }
+  // If the pixel data exceeds the maximum size, tiling is required.
+  else
+  {
+    // Filter mode needs to be set to linear to produce better quality while scaling.
+    Sampler sampler = Sampler::New();
+    sampler.SetFilterMode( FilterMode::LINEAR, FilterMode::LINEAR );
+
+    // Create RGBA texture if the text contains emojis or multiple text colors, otherwise L8 texture
+    Pixel::Format textPixelFormat = ( containsColorGlyph || hasMultipleTextColors ) ? Pixel::RGBA8888 : Pixel::L8;
+
+    // Check the text direction
+    Toolkit::DevelText::TextDirection::Type textDirection = mController->GetTextDirection();
+
+    // Create a texture for the text without any styles
+    PixelData data = mTypesetter->Render( size, textDirection, Text::Typesetter::RENDER_NO_STYLES, false, textPixelFormat );
+
+    int verifiedWidth = data.GetWidth();
+    int verifiedHeight = data.GetHeight();
+
+    // Set information for creating textures.
+    TilingInfo info( verifiedWidth, maxTextureSize, textPixelFormat );
+
+    // Get the buffer of text.
+    Dali::DevelPixelData::PixelDataBuffer textPixelData = Dali::DevelPixelData::ReleasePixelDataBuffer( data );
+    info.textBuffer = textPixelData.buffer;
+
+    if( styleEnabled )
     {
-      // nothing to do.
-      break;
+      // Create RGBA texture for all the text styles (without the text itself)
+      PixelData styleData = mTypesetter->Render( size, textDirection, Text::Typesetter::RENDER_NO_TEXT, false, Pixel::RGBA8888 );
+      Dali::DevelPixelData::PixelDataBuffer stylePixelData = Dali::DevelPixelData::ReleasePixelDataBuffer( styleData );
+      info.styleBuffer = stylePixelData.buffer;
     }
-    case Toolkit::TextVisual::Property::LINE_SPACING:
+
+    if ( containsColorGlyph && !hasMultipleTextColors )
     {
-      value = mController->GetDefaultLineSpacing();
-      break;
+      // Create a L8 texture as a mask to avoid color glyphs (e.g. emojis) to be affected by text color animation
+      PixelData maskData = mTypesetter->Render( size, textDirection, Text::Typesetter::RENDER_MASK, false, Pixel::L8 );
+      Dali::DevelPixelData::PixelDataBuffer maskPixelData = Dali::DevelPixelData::ReleasePixelDataBuffer( maskData );
+      info.maskBuffer = maskPixelData.buffer;
     }
-    case Toolkit::TextVisual::Property::UNDERLINE:
+
+    // Get the current offset for recalculate the offset when tiling.
+    Property::Map retMap;
+    mImpl->mTransform.GetPropertyMap( retMap );
+    Property::Value* offsetValue = retMap.Find( Dali::Toolkit::Visual::Transform::Property::OFFSET );
+    if( offsetValue )
     {
-      GetUnderlineProperties( mController, value, Text::EffectStyle::DEFAULT );
-      break;
+      offsetValue->Get( info.offSet );
     }
-    case Toolkit::TextVisual::Property::SHADOW:
+
+    // Create a textureset in the default renderer.
+    CreateTextureSet( info, mImpl->mRenderer, sampler, hasMultipleTextColors, containsColorGlyph, styleEnabled );
+
+    verifiedHeight -= maxTextureSize;
+
+    Geometry geometry = mFactoryCache.GetGeometry( VisualFactoryCache::QUAD_GEOMETRY );
+
+    int offsetPosition = verifiedWidth * maxTextureSize;
+    // Create a renderer by cutting maxTextureSize.
+    while( verifiedHeight > 0 )
     {
-      GetShadowProperties( mController, value, Text::EffectStyle::DEFAULT );
-      break;
+      Renderer tilingRenderer = Renderer::New( geometry, shader );
+      tilingRenderer.SetProperty( Dali::Renderer::Property::DEPTH_INDEX, Toolkit::DepthIndex::CONTENT );
+      // New offset position of buffer for tiling.
+      info.offsetPosition += offsetPosition;
+      // New height for tiling.
+      info.height = ( verifiedHeight - maxTextureSize ) > 0 ? maxTextureSize : verifiedHeight;
+      // New offset for tiling.
+      info.offSet.y += maxTextureSize;
+      // Create a textureset int the new tiling renderer.
+      CreateTextureSet( info, tilingRenderer, sampler, hasMultipleTextColors, containsColorGlyph, styleEnabled );
+
+      verifiedHeight -= maxTextureSize;
     }
-    case Toolkit::TextVisual::Property::EMBOSS:
+  }
+
+  mImpl->mFlags &= ~Impl::IS_ATLASING_APPLIED;
+
+  for( RendererContainer::iterator iter = mRendererList.begin(); iter != mRendererList.end(); ++iter)
+  {
+    Renderer renderer = (*iter);
+    if( renderer )
     {
-      GetEmbossProperties( mController, value, Text::EffectStyle::DEFAULT );
-      break;
+      actor.AddRenderer( renderer );
     }
-    case Toolkit::TextVisual::Property::OUTLINE:
+  }
+}
+
+
+TextureSet TextVisual::GetTextTexture( const Vector2& size, bool hasMultipleTextColors, bool containsColorGlyph, bool styleEnabled )
+{
+  // Filter mode needs to be set to linear to produce better quality while scaling.
+  Sampler sampler = Sampler::New();
+  sampler.SetFilterMode( FilterMode::LINEAR, FilterMode::LINEAR );
+
+  TextureSet textureSet = TextureSet::New();
+
+  // Create RGBA texture if the text contains emojis or multiple text colors, otherwise L8 texture
+  Pixel::Format textPixelFormat = ( containsColorGlyph || hasMultipleTextColors ) ? Pixel::RGBA8888 : Pixel::L8;
+
+  // Check the text direction
+  Toolkit::DevelText::TextDirection::Type textDirection = mController->GetTextDirection();
+
+  // Create a texture for the text without any styles
+  PixelData data = mTypesetter->Render( size, textDirection, Text::Typesetter::RENDER_NO_STYLES, false, textPixelFormat );
+
+  // It may happen the image atlas can't handle a pixel data it exceeds the maximum size.
+  // In that case, create a texture. TODO: should tile the text.
+  unsigned int textureSetIndex = 0u;
+
+  AddTexture( textureSet, data, sampler, textureSetIndex );
+  ++textureSetIndex;
+
+  if ( styleEnabled )
+  {
+    // Create RGBA texture for all the text styles (without the text itself)
+    PixelData styleData = mTypesetter->Render( size, textDirection, Text::Typesetter::RENDER_NO_TEXT, false, Pixel::RGBA8888 );
+
+    AddTexture( textureSet, styleData, sampler, textureSetIndex );
+    ++textureSetIndex;
+  }
+
+  if ( containsColorGlyph && !hasMultipleTextColors )
+  {
+    // Create a L8 texture as a mask to avoid color glyphs (e.g. emojis) to be affected by text color animation
+    PixelData maskData = mTypesetter->Render( size, textDirection, Text::Typesetter::RENDER_MASK, false, Pixel::L8 );
+
+    AddTexture( textureSet, maskData, sampler, textureSetIndex );
+  }
+
+  return textureSet;
+}
+
+Shader TextVisual::GetTextShader( VisualFactoryCache& factoryCache, bool hasMultipleTextColors, bool containsColorGlyph, bool styleEnabled )
+{
+  Shader shader;
+
+  if( hasMultipleTextColors && !styleEnabled )
+  {
+    // We don't animate text color if the text contains multiple colors
+    shader = factoryCache.GetShader( VisualFactoryCache::TEXT_SHADER_MULTI_COLOR_TEXT );
+    if( !shader )
     {
-      GetOutlineProperties( mController, value, Text::EffectStyle::DEFAULT );
-      break;
+      shader = Shader::New( VERTEX_SHADER, FRAGMENT_SHADER_MULTI_COLOR_TEXT );
+      shader.RegisterProperty( PIXEL_AREA_UNIFORM_NAME, FULL_TEXTURE_RECT );
+      factoryCache.SaveShader( VisualFactoryCache::TEXT_SHADER_MULTI_COLOR_TEXT, shader );
     }
-    case Toolkit::TextVisual::Property::BATCHING_ENABLED:
+  }
+  else if( hasMultipleTextColors && styleEnabled )
+  {
+    // We don't animate text color if the text contains multiple colors
+    shader = factoryCache.GetShader( VisualFactoryCache::TEXT_SHADER_MULTI_COLOR_TEXT_WITH_STYLE );
+    if( !shader )
     {
-      // TODO
-      break;
+      shader = Shader::New( VERTEX_SHADER, FRAGMENT_SHADER_MULTI_COLOR_TEXT_WITH_STYLE );
+      shader.RegisterProperty( PIXEL_AREA_UNIFORM_NAME, FULL_TEXTURE_RECT );
+      factoryCache.SaveShader( VisualFactoryCache::TEXT_SHADER_MULTI_COLOR_TEXT_WITH_STYLE, shader );
     }
-    default:
+  }
+  else if( !hasMultipleTextColors && !containsColorGlyph && !styleEnabled )
+  {
+    shader = factoryCache.GetShader( VisualFactoryCache::TEXT_SHADER_SINGLE_COLOR_TEXT );
+    if( !shader )
     {
-      // Should not arrive here.
-      DALI_ASSERT_DEBUG( false );
+      shader = Shader::New( VERTEX_SHADER, FRAGMENT_SHADER_SINGLE_COLOR_TEXT );
+      shader.RegisterProperty( PIXEL_AREA_UNIFORM_NAME, FULL_TEXTURE_RECT );
+      factoryCache.SaveShader( VisualFactoryCache::TEXT_SHADER_SINGLE_COLOR_TEXT, shader );
     }
   }
-
-  return value;
-}
-
-void TextVisual::RenderText()
-{
-  Actor self = mSelf.GetHandle();
-  if( !self )
+  else if( !hasMultipleTextColors && !containsColorGlyph && styleEnabled )
   {
-    // Nothing to do if the handle is not initialized.
-    return;
+    shader = factoryCache.GetShader( VisualFactoryCache::TEXT_SHADER_SINGLE_COLOR_TEXT_WITH_STYLE );
+    if( !shader )
+    {
+      shader = Shader::New( VERTEX_SHADER, FRAGMENT_SHADER_SINGLE_COLOR_TEXT_WITH_STYLE );
+      shader.RegisterProperty( PIXEL_AREA_UNIFORM_NAME, FULL_TEXTURE_RECT );
+      factoryCache.SaveShader( VisualFactoryCache::TEXT_SHADER_SINGLE_COLOR_TEXT_WITH_STYLE, shader );
+    }
   }
-
-  Actor renderableActor;
-
-  if( mRenderer )
+  else if( !hasMultipleTextColors && containsColorGlyph && !styleEnabled )
   {
-    renderableActor = mRenderer->Render( mController->GetView(), Toolkit::DepthIndex::TEXT );
+    shader = factoryCache.GetShader( VisualFactoryCache::TEXT_SHADER_SINGLE_COLOR_TEXT_WITH_EMOJI );
+    if( !shader )
+    {
+      shader = Shader::New( VERTEX_SHADER, FRAGMENT_SHADER_SINGLE_COLOR_TEXT_WITH_EMOJI );
+      shader.RegisterProperty( PIXEL_AREA_UNIFORM_NAME, FULL_TEXTURE_RECT );
+      factoryCache.SaveShader( VisualFactoryCache::TEXT_SHADER_SINGLE_COLOR_TEXT_WITH_EMOJI, shader );
+    }
   }
-
-  if( renderableActor != mRenderableActor )
+  else // if( !hasMultipleTextColors && containsColorGlyph && styleEnabled )
   {
-    UnparentAndReset( mRenderableActor );
-
-    if( renderableActor )
+    shader = factoryCache.GetShader( VisualFactoryCache::TEXT_SHADER_SINGLE_COLOR_TEXT_WITH_STYLE_AND_EMOJI );
+    if( !shader )
     {
-      const Vector2& scrollOffset = mController->GetScrollPosition();
-      renderableActor.SetPosition( scrollOffset.x, scrollOffset.y );
-
-      self.Add( renderableActor );
+      shader = Shader::New( VERTEX_SHADER, FRAGMENT_SHADER_SINGLE_COLOR_TEXT_WITH_STYLE_AND_EMOJI );
+      shader.RegisterProperty( PIXEL_AREA_UNIFORM_NAME, FULL_TEXTURE_RECT );
+      factoryCache.SaveShader( VisualFactoryCache::TEXT_SHADER_SINGLE_COLOR_TEXT_WITH_STYLE_AND_EMOJI, shader );
     }
-    mRenderableActor = renderableActor;
   }
+
+  return shader;
 }
 
 } // namespace Internal