Inline Image and Text in EDC with Proper Alignment

Original Created Feb 16, 2017 | Regeneration Apr 22, 2026

Question

I created an EDC file containing an inline image and text. However, when the text is longer, it expands in both directions. I tried making it expand only to the right but was unsuccessful.

I also attempted to create a horizontal box with an image, but the image wasn't working as expected.

What I want to achieve: [Img] short text [Img] little longer text

What I currently have: [Img] short text [Img] little longer text

Here's my EDC file:

collections
{
   base_scale: 1.0;
   group 
   {
      name: "horizontal_image_text";
      parts 
      {
         part 
         {
            name: "image";
            type: SWALLOW;
            description 
            {
               state: "default";
               fixed: 1 1;
               align: 0.0 0.0;
            }
         }
         part
         { 
            name: "text";
            type: TEXT;
            description 
            { 
               state: "default";
               fixed: 1 1;
               rel1.to: "image";
               rel2.to: "image";
               rel1.relative: 1.0 0.5;
               rel2.relative: 4.0 0.5;
               text 
               {
                  font: "Tizen:style=Regular";
                  size: 35;
                  min : 1 1;
               }
               color: 255 255 255 255;
            }
         }        
      }
   }
}

Answer

Problem Understanding

The user wants to create an EDC layout with an image and text where:

The text should align properly next to the image
Text expansion should only occur to the right
The image should maintain its position regardless of text length

Solution Methods

Using the align property:
- Add an align property to the text part to control text positioning
- Example: align: 0.25 0.0; for left alignment with offset
Proper relative positioning:
- Adjust rel1.relative and rel2.relative values to control text positioning relative to the image
- Ensure proper spacing between image and text
Complete layout example:
- Use a combination of image and text parts with proper relative positioning and alignment

Code Examples

Here's a working example that maintains image aspect ratio and properly aligns text:

collections { group { name: "x";
  images.image: "x.jpg" LOSSY 80;
  parts {
    part { name: "image"; type: IMAGE;
      description { state: "default" 0.0;
        image.normal: "x.jpg";
        aspect: 1.0 1.0;
        aspect_preference: VERTICAL;
        min: 32 32;
        align: 0.0 0.5;
        rel2.relative: 0.0 1.0;
      }
    }
    part { name: "text"; type: TEXT;
      description { state: "default" 0.0;
        color: 255 128 0 255;
        rel1.to: "image";
        rel1.relative: 1.0 0.0;
        rel1.offset: 40 0;
        text { font: "Sans"; size: 35;
          text: "Hello world";
          align: 0.0 0.5;
          min: 1 1;
        }
      }
    }
  }
} }

Additional Tips

For SWALLOW type images, remove the image.normal line
Adjust the rel1.offset value to change the spacing between image and text
Use aspect_preference: VERTICAL to maintain image aspect ratio
Experiment with different alignment values to achieve the desired layout