Change the precision of size and uSize from mediumP to highP
[platform/core/uifw/dali-toolkit.git] / dali-toolkit / internal / visuals / text / text-visual.cpp
index e44b005..e9a32f6 100755 (executable)
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2017 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.
 
 // 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/visuals/text-visual-properties.h>
@@ -35,6 +40,7 @@
 #include <dali-toolkit/internal/text/text-effects-style.h>
 #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,37 +53,19 @@ namespace Internal
 
 namespace
 {
-
-// Property names - common properties defined in visual-string-constants.h/cpp
-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 SHADOW_PROPERTY( "shadow" );
-const char * const UNDERLINE_PROPERTY( "underline" );
-const char * const OUTLINE_PROPERTY( "outline" );
-
 const Vector4 FULL_TEXTURE_RECT( 0.f, 0.f, 1.f, 1.f );
 
 const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
   attribute mediump vec2 aPosition;\n
-  uniform mediump mat4 uMvpMatrix;\n
-  uniform mediump vec3 uSize;\n
+  uniform highp   mat4 uMvpMatrix;\n
+  uniform highp   vec3 uSize;\n
   uniform mediump vec4 pixelArea;\n
 
-  uniform mediump mat4 uModelMatrix;\n
-  uniform mediump mat4 uViewMatrix;\n
-  uniform mediump mat4 uProjection;\n
-
   varying mediump vec2 vTexCoord;\n
 
   //Visual size and offset
   uniform mediump vec2 offset;\n
-  uniform mediump vec2 size;\n
+  uniform highp   vec2 size;\n
   uniform mediump vec4 offsetSizeMode;\n
   uniform mediump vec2 origin;\n
   uniform mediump vec2 anchorPoint;\n
@@ -91,12 +79,8 @@ const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
 
   void main()\n
   {\n
-    mediump vec4 nonAlignedVertex = uViewMatrix*uModelMatrix*ComputeVertexPosition();\n
-    mediump vec4 pixelAlignedVertex = vec4 ( floor(nonAlignedVertex.xyz), 1.0 );\n
-    mediump vec4 vertexPosition = uProjection*pixelAlignedVertex;\n
-
+    gl_Position = uMvpMatrix * ComputeVertexPosition();\n
     vTexCoord = pixelArea.xy+pixelArea.zw*(aPosition + vec2(0.5) );\n
-    gl_Position = vertexPosition;\n
   }\n
 );
 
@@ -104,48 +88,29 @@ 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 mediump vec4 uAtlasRect;\n
   uniform lowp vec4 uColor;\n
   uniform lowp vec3 mixColor;\n
-  uniform lowp float opacity;\n
-  uniform lowp float preMultipliedAlpha;\n
-  \n
-  lowp vec4 visualMixColor()\n
-  {\n
-    return vec4( mixColor * mix( 1.0, opacity, preMultipliedAlpha ), opacity );\n
-  }\n
   \n
   void main()\n
   {\n
-    mediump vec2 texCoord = clamp( mix( uAtlasRect.xy, uAtlasRect.zw, vTexCoord ), uAtlasRect.xy, uAtlasRect.zw );\n
-    mediump float textTexture = texture2D( sTexture, texCoord ).r;\n
+    mediump float textTexture = texture2D( sTexture, vTexCoord ).r;\n
 
     // Set the color of the text to what it is animated to.
-    gl_FragColor = uTextColorAnimatable * textTexture * uColor * visualMixColor();
+    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 mediump vec4 uAtlasRect;\n
   uniform lowp vec4 uColor;\n
   uniform lowp vec3 mixColor;\n
-  uniform lowp float opacity;\n
-  uniform lowp float preMultipliedAlpha;\n
-  \n
-  lowp vec4 visualMixColor()\n
-  {\n
-    return vec4( mixColor * mix( 1.0, opacity, preMultipliedAlpha ), opacity );\n
-  }\n
   \n
   void main()\n
   {\n
-    mediump vec2 texCoord = clamp( mix( uAtlasRect.xy, uAtlasRect.zw, vTexCoord ), uAtlasRect.xy, uAtlasRect.zw );\n
-    mediump vec4 textTexture = texture2D( sTexture, texCoord );\n
-    textTexture.rgb *= mix( 1.0, textTexture.a, preMultipliedAlpha );\n
+    mediump vec4 textTexture = texture2D( sTexture, vTexCoord );\n
 
-    gl_FragColor = textTexture * uColor * visualMixColor();
+    gl_FragColor = textTexture * uColor * vec4( mixColor, 1.0 );
   }\n
 );
 
@@ -154,25 +119,16 @@ const char* FRAGMENT_SHADER_SINGLE_COLOR_TEXT_WITH_STYLE = DALI_COMPOSE_SHADER(
   uniform sampler2D sTexture;\n
   uniform sampler2D sStyle;\n
   uniform lowp vec4 uTextColorAnimatable;\n
-  uniform mediump vec4 uAtlasRect;\n
   uniform lowp vec4 uColor;\n
   uniform lowp vec3 mixColor;\n
-  uniform lowp float opacity;\n
-  uniform lowp float preMultipliedAlpha;\n
-  \n
-  lowp vec4 visualMixColor()\n
-  {\n
-    return vec4( mixColor * mix( 1.0, opacity, preMultipliedAlpha ), opacity );\n
-  }\n
   \n
   void main()\n
   {\n
-    mediump vec2 texCoord = clamp( mix( uAtlasRect.xy, uAtlasRect.zw, vTexCoord ), uAtlasRect.xy, uAtlasRect.zw );\n
-    mediump float textTexture = texture2D( sTexture, texCoord ).r;\n
-    mediump vec4 styleTexture = texture2D( sStyle, texCoord );\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 - textTexture ) ) * uColor * visualMixColor();\n
+    gl_FragColor = ( uTextColorAnimatable * textTexture + styleTexture * ( 1.0 - uTextColorAnimatable.a * textTexture ) ) * uColor * vec4( mixColor, 1.0 );\n
   }\n
 );
 
@@ -180,26 +136,16 @@ 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 mediump vec4 uAtlasRect;\n
   uniform lowp vec4 uColor;\n
   uniform lowp vec3 mixColor;\n
-  uniform lowp float opacity;\n
-  uniform lowp float preMultipliedAlpha;\n
-  \n
-  lowp vec4 visualMixColor()\n
-  {\n
-    return vec4( mixColor * mix( 1.0, opacity, preMultipliedAlpha ), opacity );\n
-  }\n
   \n
   void main()\n
   {\n
-    mediump vec2 texCoord = clamp( mix( uAtlasRect.xy, uAtlasRect.zw, vTexCoord ), uAtlasRect.xy, uAtlasRect.zw );\n
-    mediump vec4 textTexture = texture2D( sTexture, texCoord );\n
-    mediump vec4 styleTexture = texture2D( sStyle, texCoord );\n
-    textTexture.rgb *= mix( 1.0, textTexture.a, preMultipliedAlpha );\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 * visualMixColor();\n
+    gl_FragColor = ( textTexture + styleTexture * ( 1.0 - textTexture.a ) ) * uColor * vec4( mixColor, 1.0 );\n
   }\n
 );
 
@@ -208,31 +154,22 @@ const char* FRAGMENT_SHADER_SINGLE_COLOR_TEXT_WITH_EMOJI = DALI_COMPOSE_SHADER(
   uniform sampler2D sTexture;\n
   uniform sampler2D sMask;\n
   uniform lowp vec4 uTextColorAnimatable;\n
-  uniform mediump vec4 uAtlasRect;\n
   uniform lowp vec4 uColor;\n
   uniform lowp vec3 mixColor;\n
-  uniform lowp float opacity;\n
-  uniform lowp float preMultipliedAlpha;\n
-  \n
-  lowp vec4 visualMixColor()\n
-  {\n
-    return vec4( mixColor * mix( 1.0, opacity, preMultipliedAlpha ), opacity );\n
-  }\n
   \n
   void main()\n
   {\n
-    mediump vec2 texCoord = clamp( mix( uAtlasRect.xy, uAtlasRect.zw, vTexCoord ), uAtlasRect.xy, uAtlasRect.zw );\n
-    mediump vec4 textTexture = texture2D( sTexture, texCoord );\n
-    mediump float maskTexture = texture2D( sMask, texCoord ).r;\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 ) * mix( 1.0, textTexture.a, preMultipliedAlpha );\n
+    textTexture.rgb = mix( textTexture.rgb, uTextColorAnimatable.rgb, vstep * maskTexture );\n
 
     // Draw the text as overlay above the style
-    gl_FragColor = textTexture * uColor * visualMixColor();\n
+    gl_FragColor = textTexture * uColor * vec4( mixColor, 1.0 );\n
   }\n
 );
 
@@ -243,32 +180,23 @@ const char* FRAGMENT_SHADER_SINGLE_COLOR_TEXT_WITH_STYLE_AND_EMOJI = DALI_COMPOS
   uniform sampler2D sMask;\n
   uniform lowp float uHasMultipleTextColors;\n
   uniform lowp vec4 uTextColorAnimatable;\n
-  uniform mediump vec4 uAtlasRect;\n
   uniform lowp vec4 uColor;\n
   uniform lowp vec3 mixColor;\n
-  uniform lowp float opacity;\n
-  uniform lowp float preMultipliedAlpha;\n
-  \n
-  lowp vec4 visualMixColor()\n
-  {\n
-    return vec4( mixColor * mix( 1.0, opacity, preMultipliedAlpha ), opacity );\n
-  }\n
   \n
   void main()\n
   {\n
-    mediump vec2 texCoord = clamp( mix( uAtlasRect.xy, uAtlasRect.zw, vTexCoord ), uAtlasRect.xy, uAtlasRect.zw );\n
-    mediump vec4 textTexture = texture2D( sTexture, texCoord );\n
-    mediump vec4 styleTexture = texture2D( sStyle, texCoord );\n
-    mediump float maskTexture = texture2D( sMask, texCoord ).r;\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 ) ) * mix( 1.0, textTexture.a, preMultipliedAlpha );\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 * visualMixColor();\n
+    gl_FragColor = ( textTexture + styleTexture * ( 1.0 - textTexture.a ) ) * uColor * vec4( mixColor, 1.0 );\n
   }\n
 );
 
@@ -334,10 +262,36 @@ Dali::Property::Index StringKeyToIndexKey( const std::string& stringKey )
   {
     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;
+}
+
+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, const Property::Map& properties )
@@ -414,6 +368,9 @@ void TextVisual::DoCreatePropertyMap( Property::Map& map ) const
 
   GetOutlineProperties( mController, value, Text::EffectStyle::DEFAULT );
   map.Insert( Toolkit::DevelTextVisual::Property::OUTLINE, value );
+
+  GetBackgroundProperties( mController, value, Text::EffectStyle::DEFAULT );
+  map.Insert( Toolkit::DevelTextVisual::Property::BACKGROUND, value );
 }
 
 void TextVisual::DoCreateInstancePropertyMap( Property::Map& map ) const
@@ -427,7 +384,7 @@ void TextVisual::DoCreateInstancePropertyMap( Property::Map& map ) const
 
 
 TextVisual::TextVisual( VisualFactoryCache& factoryCache )
-: Visual::Base( factoryCache ),
+: Visual::Base( factoryCache, Visual::FittingMode::FIT_KEEP_ASPECT_RATIO, Toolkit::Visual::TEXT ),
   mController( Text::Controller::New() ),
   mTypesetter( Text::Typesetter::New( mController->GetTextModel() ) ),
   mAnimatableTextColorPropertyIndex( Property::INVALID_INDEX ),
@@ -465,7 +422,7 @@ void TextVisual::DoSetProperties( const Property::Map& propertyMap )
   engine.SetCursorWidth( 0u ); // Do not layout space for the cursor.
 }
 
-void TextVisual::DoSetOnStage( Actor& actor )
+void TextVisual::DoSetOnScene( Actor& actor )
 {
   mControl = actor;
 
@@ -486,30 +443,46 @@ void TextVisual::DoSetOnStage( Actor& actor )
     // Create constraint for the animatable text's color Property with uTextColorAnimatable in the renderer.
     if( shaderTextColorIndex != Property::INVALID_INDEX )
     {
-      Constraint constraint = Constraint::New<Vector4>( mImpl->mRenderer, shaderTextColorIndex, EqualToConstraint() );
-      constraint.AddSource( Source( actor, mAnimatableTextColorPropertyIndex ) );
-      constraint.Apply();
+      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();
     }
   }
 
   // Renderer needs textures and to be added to control
   mRendererUpdateNeeded = true;
 
+  mRendererList.push_back( mImpl->mRenderer );
+
   UpdateRenderer();
 }
 
-void TextVisual::DoSetOffStage( Actor& actor )
+void TextVisual::RemoveRenderer( Actor& actor )
 {
-  if( mImpl->mRenderer )
+  for( RendererContainer::iterator iter = mRendererList.begin(); iter != mRendererList.end(); ++iter)
   {
-    // Removes the renderer from the actor.
-    actor.RemoveRenderer( mImpl->mRenderer );
+    Renderer renderer = (*iter);
+    if( renderer )
+    {
+      // Removes the renderer from the actor.
+      actor.RemoveRenderer( renderer );
+    }
+  }
+  // Clear the renderer list
+  mRendererList.clear();
+}
 
-    RemoveTextureSet();
+void TextVisual::DoSetOffScene( Actor& actor )
+{
+  RemoveRenderer( actor );
 
-    // Resets the renderer.
-    mImpl->mRenderer.Reset();
-  }
+  // Resets the renderer.
+  mImpl->mRenderer.Reset();
 
   // Resets the control handle.
   mControl.Reset();
@@ -607,6 +580,11 @@ void TextVisual::DoSetProperty( Dali::Property::Index index, const Dali::Propert
       SetOutlineProperties( mController, propertyValue, Text::EffectStyle::DEFAULT );
       break;
     }
+    case Toolkit::DevelTextVisual::Property::BACKGROUND:
+    {
+      SetBackgroundProperties( mController, propertyValue, Text::EffectStyle::DEFAULT );
+      break;
+    }
   }
 }
 
@@ -629,37 +607,39 @@ void TextVisual::UpdateRenderer()
   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 ) );
 
-  if( ( fabsf( relayoutSize.width ) < Math::MACHINE_EPSILON_1000 ) || ( fabsf( relayoutSize.height ) < Math::MACHINE_EPSILON_1000 ) )
-  {
-    // Removes the texture set.
-    RemoveTextureSet();
+  std::string text;
+  mController->GetText( text );
 
-    // Remove any renderer previously set.
-    if( mImpl->mRenderer )
-    {
-      control.RemoveRenderer( mImpl->mRenderer );
-    }
+  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;
   }
 
-  const Text::Controller::UpdateTextType updateTextType = mController->Relayout( relayoutSize );
+
+  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;
 
-    // Removes the texture set.
-    RemoveTextureSet();
-
-    // Remove any renderer previously set.
-    if( mImpl->mRenderer )
-    {
-      control.RemoveRenderer( mImpl->mRenderer );
-    }
+    // Remove the texture set and any renderer previously set.
+    RemoveRenderer( control );
 
     if( ( relayoutSize.width > Math::MACHINE_EPSILON_1000 ) &&
         ( relayoutSize.height > Math::MACHINE_EPSILON_1000 ) )
@@ -668,17 +648,21 @@ void TextVisual::UpdateRenderer()
       const Vector4* const colorsBuffer = mController->GetTextModel()->GetColors();
       bool hasMultipleTextColors = ( NULL != colorsBuffer );
 
-      // Check whether the text contains any emoji
-      bool containsEmoji = false;
+      // Check whether the text contains any color glyph
+      bool containsColorGlyph = false;
 
-      Text::ScriptRunIndex numberOfScripts = mController->GetTextModel()->GetNumberOfScripts();
-      const Text::ScriptRun* scripts = mController->GetTextModel()->GetScriptRuns();
-      for ( Text::ScriptRunIndex scriptIndex = 0u; scriptIndex < numberOfScripts; scriptIndex++ )
+      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++ )
       {
-        const Text::ScriptRun& scriptRun = *( scripts + scriptIndex );
-        if( TextAbstraction::EMOJI == scriptRun.script )
+        // 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 ) )
         {
-          containsEmoji = true;
+          containsColorGlyph = true;
           break;
         }
       }
@@ -694,54 +678,204 @@ void TextVisual::UpdateRenderer()
 
       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 );
+      const bool styleEnabled = ( shadowEnabled || underlineEnabled || outlineEnabled || backgroundEnabled );
 
-      TextureSet textureSet = GetTextTexture( relayoutSize, hasMultipleTextColors, containsEmoji, styleEnabled );
-      mImpl->mRenderer.SetTextures( textureSet );
 
-      Shader shader = GetTextShader( mFactoryCache, hasMultipleTextColors, containsEmoji, styleEnabled );
-      mImpl->mRenderer.SetShader(shader);
+      AddRenderer( control, relayoutSize, hasMultipleTextColors, containsColorGlyph, styleEnabled );
 
-      mImpl->mFlags &= ~Impl::IS_ATLASING_APPLIED;
+      // Text rendered and ready to display
+      ResourceReady( Toolkit::Visual::ResourceStatus::READY );
+    }
+  }
+}
 
-      Vector4 atlasRect = FULL_TEXTURE_RECT;
-      mImpl->mRenderer.RegisterProperty( ATLAS_RECT_UNIFORM_NAME, atlasRect );
-      mImpl->mRenderer.RegisterProperty( "uHasMultipleTextColors", static_cast<float>( hasMultipleTextColors ) );
+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 );
 
-      mImpl->mRenderer.SetProperty( Renderer::Property::BLEND_MODE, BlendMode::ON);
+  textureSet.SetTexture( textureSetIndex, texture );
+  textureSet.SetSampler( textureSetIndex, sampler );
+}
 
-      //Register transform properties
-      mImpl->mTransform.RegisterUniforms( mImpl->mRenderer, Direction::LEFT_TO_RIGHT );
+PixelData TextVisual::ConvertToPixelData( unsigned char* buffer, int width, int height, int offsetPosition, const Pixel::Format textPixelFormat )
+{
+  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;
+}
 
-      control.AddRenderer( mImpl->mRenderer );
+void TextVisual::CreateTextureSet( TilingInfo& info, Renderer& renderer, Sampler& sampler, bool hasMultipleTextColors, bool containsColorGlyph, bool styleEnabled )
+{
 
-      // Text rendered and ready to display
-      ResourceReady( Toolkit::Visual::ResourceStatus::READY );
-    }
+  TextureSet textureSet = TextureSet::New();
+  unsigned int textureSetIndex = 0u;
+
+  // Convert the buffer to pixel data to make it a texture.
+  if( info.textBuffer )
+  {
+    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::RemoveTextureSet()
+
+void TextVisual::AddRenderer( Actor& actor, const Vector2& size, bool hasMultipleTextColors, bool containsColorGlyph, bool styleEnabled )
 {
-  if( mImpl->mFlags & Impl::IS_ATLASING_APPLIED )
+  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 )
   {
-    // Removes the text's image from the texture atlas.
-    Vector4 atlasRect;
+    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 );
 
-    const Property::Index index = mImpl->mRenderer.GetPropertyIndex( ATLAS_RECT_UNIFORM_NAME );
-    if( index != Property::INVALID_INDEX )
+    // Get the buffer of text.
+    Dali::DevelPixelData::PixelDataBuffer textPixelData = Dali::DevelPixelData::ReleasePixelDataBuffer( data );
+    info.textBuffer = textPixelData.buffer;
+
+    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 );
+      Dali::DevelPixelData::PixelDataBuffer stylePixelData = Dali::DevelPixelData::ReleasePixelDataBuffer( styleData );
+      info.styleBuffer = stylePixelData.buffer;
+    }
+
+    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 );
+      Dali::DevelPixelData::PixelDataBuffer maskPixelData = Dali::DevelPixelData::ReleasePixelDataBuffer( maskData );
+      info.maskBuffer = maskPixelData.buffer;
+    }
+
+    // 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 )
+    {
+      offsetValue->Get( info.offSet );
+    }
+
+    // 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 )
     {
-      const Property::Value& atlasRectValue = mImpl->mRenderer.GetProperty( index );
-      atlasRectValue.Get( atlasRect );
+      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;
+    }
+  }
+
+  mImpl->mFlags &= ~Impl::IS_ATLASING_APPLIED;
 
-      const TextureSet& textureSet = mImpl->mRenderer.GetTextures();
-      mFactoryCache.GetAtlasManager()->Remove( textureSet, atlasRect );
+  for( RendererContainer::iterator iter = mRendererList.begin(); iter != mRendererList.end(); ++iter)
+  {
+    Renderer renderer = (*iter);
+    if( renderer )
+    {
+      actor.AddRenderer( renderer );
     }
   }
 }
 
-TextureSet TextVisual::GetTextTexture( const Vector2& size, bool hasMultipleTextColors, bool containsEmoji, bool styleEnabled )
+
+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();
@@ -750,68 +884,42 @@ TextureSet TextVisual::GetTextTexture( const Vector2& size, bool hasMultipleText
   TextureSet textureSet = TextureSet::New();
 
   // Create RGBA texture if the text contains emojis or multiple text colors, otherwise L8 texture
-  Pixel::Format textPixelFormat = ( containsEmoji || hasMultipleTextColors ) ? Pixel::RGBA8888 : Pixel::L8;
+  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, Text::Typesetter::RENDER_NO_STYLES, false, textPixelFormat );
+  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;
 
-  Texture texture = Texture::New( Dali::TextureType::TEXTURE_2D,
-                                  data.GetPixelFormat(),
-                                  data.GetWidth(),
-                                  data.GetHeight() );
-
-  texture.Upload( data );
-
-  textureSet.SetTexture( 0u, texture );
-  textureSet.SetSampler( 0u, sampler );
+  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, Text::Typesetter::RENDER_NO_TEXT, false, Pixel::RGBA8888 );
+    PixelData styleData = mTypesetter->Render( size, textDirection, Text::Typesetter::RENDER_NO_TEXT, false, Pixel::RGBA8888 );
 
-    Texture styleTexture = Texture::New( Dali::TextureType::TEXTURE_2D,
-                                         styleData.GetPixelFormat(),
-                                         styleData.GetWidth(),
-                                         styleData.GetHeight() );
-
-    styleTexture.Upload( styleData );
-
-    textureSet.SetTexture( 1u, styleTexture );
-    textureSet.SetSampler( 1u, sampler );
+    AddTexture( textureSet, styleData, sampler, textureSetIndex );
+    ++textureSetIndex;
   }
 
-  if ( containsEmoji && !hasMultipleTextColors )
+  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, Text::Typesetter::RENDER_MASK, false, Pixel::L8 );
-
-    Texture maskTexture = Texture::New( Dali::TextureType::TEXTURE_2D,
-                                        maskData.GetPixelFormat(),
-                                        maskData.GetWidth(),
-                                        maskData.GetHeight() );
-
-    maskTexture.Upload( maskData );
+    PixelData maskData = mTypesetter->Render( size, textDirection, Text::Typesetter::RENDER_MASK, false, Pixel::L8 );
 
-    if ( !styleEnabled )
-    {
-      textureSet.SetTexture( 1u, maskTexture );
-      textureSet.SetSampler( 1u, sampler );
-    }
-    else
-    {
-      textureSet.SetTexture( 2u, maskTexture );
-      textureSet.SetSampler( 2u, sampler );
-    }
+    AddTexture( textureSet, maskData, sampler, textureSetIndex );
   }
 
   return textureSet;
 }
 
-Shader TextVisual::GetTextShader( VisualFactoryCache& factoryCache, bool hasMultipleTextColors, bool containsEmoji, bool styleEnabled )
+Shader TextVisual::GetTextShader( VisualFactoryCache& factoryCache, bool hasMultipleTextColors, bool containsColorGlyph, bool styleEnabled )
 {
   Shader shader;
 
@@ -837,7 +945,7 @@ Shader TextVisual::GetTextShader( VisualFactoryCache& factoryCache, bool hasMult
       factoryCache.SaveShader( VisualFactoryCache::TEXT_SHADER_MULTI_COLOR_TEXT_WITH_STYLE, shader );
     }
   }
-  else if( !hasMultipleTextColors && !containsEmoji && !styleEnabled )
+  else if( !hasMultipleTextColors && !containsColorGlyph && !styleEnabled )
   {
     shader = factoryCache.GetShader( VisualFactoryCache::TEXT_SHADER_SINGLE_COLOR_TEXT );
     if( !shader )
@@ -847,7 +955,7 @@ Shader TextVisual::GetTextShader( VisualFactoryCache& factoryCache, bool hasMult
       factoryCache.SaveShader( VisualFactoryCache::TEXT_SHADER_SINGLE_COLOR_TEXT, shader );
     }
   }
-  else if( !hasMultipleTextColors && !containsEmoji && styleEnabled )
+  else if( !hasMultipleTextColors && !containsColorGlyph && styleEnabled )
   {
     shader = factoryCache.GetShader( VisualFactoryCache::TEXT_SHADER_SINGLE_COLOR_TEXT_WITH_STYLE );
     if( !shader )
@@ -857,7 +965,7 @@ Shader TextVisual::GetTextShader( VisualFactoryCache& factoryCache, bool hasMult
       factoryCache.SaveShader( VisualFactoryCache::TEXT_SHADER_SINGLE_COLOR_TEXT_WITH_STYLE, shader );
     }
   }
-  else if( !hasMultipleTextColors && containsEmoji && !styleEnabled )
+  else if( !hasMultipleTextColors && containsColorGlyph && !styleEnabled )
   {
     shader = factoryCache.GetShader( VisualFactoryCache::TEXT_SHADER_SINGLE_COLOR_TEXT_WITH_EMOJI );
     if( !shader )
@@ -867,7 +975,7 @@ Shader TextVisual::GetTextShader( VisualFactoryCache& factoryCache, bool hasMult
       factoryCache.SaveShader( VisualFactoryCache::TEXT_SHADER_SINGLE_COLOR_TEXT_WITH_EMOJI, shader );
     }
   }
-  else // if( !hasMultipleTextColors && containsEmoji && styleEnabled )
+  else // if( !hasMultipleTextColors && containsColorGlyph && styleEnabled )
   {
     shader = factoryCache.GetShader( VisualFactoryCache::TEXT_SHADER_SINGLE_COLOR_TEXT_WITH_STYLE_AND_EMOJI );
     if( !shader )