CODEWITHSUNDEEP
tizentizen-native-app
Daniel
Daniel

Reputation: 2592

How can I align text to baseline in EDC?

I have two different font-sized texts in EDC, and I want them to be baseline-aligned:

enter image description here

This is the source generating this:

 text { "elm.text";
    scale: 1;   
    desc { "default";
       color: 255 0 0 255;
       text {
          text: "0.2";
          size: 32;
          ellipsis: -1;
          min: 1 1;
          max: 1 1;
          align: 1 1;
       }
    }
 }
 text { "elm.text.unit";
    scale: 1;
    desc { "default";
       color: 255 0 0 255;
       rel1 {
          to: "elm.text";
          relative: 1 0;
       }
       rel2 {
          to_y: "elm.text";
          relative: 1 1;
       }
       text {
          text: "amps";
          size: 16;
          align: 0 1;
       }
    }
 }

So, goal is something like this:

enter image description here

How can I do this with EDC?

Upvotes: 0

Views: 64

Answers (1)

wonrst
wonrst

Reputation: 31

As far as I know there is no baseline align api in efl.

I think the easiest way is to set a suitable value for text align in "elm.text.unit".

 text { "elm.text.unit";
    scale: 1;
    desc { "default";
       color: 255 0 0 255;
       rel1 {
          to: "elm.text";
          relative: 1 0;
       }
       rel2 {
          to_y: "elm.text";
          relative: 1 1;
       }
       text {
          text: "amps";
          size: 16;
          align: 0 0.75;
       }
    }
 }

align 0.75

But if you want precise baseline align, you can use markup. Since the TEXT part does not support markup, you should use the TEXTBLOCK part.

However, this method requires handling strings in app. So I think the first method is better.

   group { "main";
      styles {
         style {
            name: "tb_style";
            base: "font=Tizen";
         }
      }
      parts {         
         textblock { "elm.text";
            scale;
            desc { "default";
               text {
                  style: "tb_style";
                  text: "<font_size=32 color=#FF0000>0.2</font_size><font_size=16 color=#FF0000>amps</font_size>";
               }
            }
         }
      }
   }

markup

Upvotes: 2

Related Questions