Page MenuHomePhabricator

Edje Style
Updated 2,147 Days AgoPublic

Styles are used to define display properties for the textblock part.

It uses an effect independent tagging system that allows the writer to use abstract tag names like "<important>" or "<title>" and the designer to decide how those tags affect the text.

style {
  name: "style_name"; 
  base: "general_style_properties";

  tag:  "tag_name" "style_properties";

name: "styleName";
This name is used to set the style to a textblock part.

base: "general_style_properties";
This sets the default text properties (which can be overridden by tags in specific parts of the text later) using the style notation.

tag: "tag_name" "style_properties";
Allows the designer to create tags that will apply a given text style to the selected part of text. For example, a tag named "title" will be used as "<title>" in the texttblock.

Style Notation

An complete example of a style applied to a textblock part can be found in the [EdjeTextblockPart Edje Textblock Part] article.


base: "... wrap=type ...";

Wrapping changes the way the text is going to be distributed when the textblock container's is resized.

"word" is the default value, and makes the text adjust by the word, "char" in the other hand causes the textblock to be adjusted for each character, leaving incomplete words in different lines.


base: "... align=value valign=value ...";

"align" is used for horizontal alignment and can take two different types of values, words, "middle2, "center", "left", "right", or decimals that go from 0.0 (left) to 1.0 (right).

"valign" is used for vertical alignment, and can take either text, "top", "middle", "center", "bottom", "base", "baseline", or decimal values from 0.0 (top) to 1.0 (bottom), "base" and "baseline" are set as -1.0. Note: This value is not for the whole text block, but the alignment within one line, in case of different font heights.


base: "... font=Font-Name font_size=99 ...";

"font" sets the "Font-name" to one of the declared in the [EdjeDataCollection#Fonts fonts block]. If none is specified, the textblock will use the system default font.

"font_size" sets the size of the font in points. The default value is 1.


base: "... color=#00ff00ff ...";

Colors declared in style use the hexadecimal color notation that includes the alpha channel, when the alpha channel is ommited, full opacity is assumed.

Alternatively, colors can be set using one character per channel, for example, #fff as white or #f00 as red.

The color property sets the color for the text itself, each effect has it's own color properties, when no color is specified for the effect, the text's color is used.


base: "... style=name effectname_color=#00ff00ff ...";
tag:  "tag_name" "... style=name effectname_color=#00ff00ff ...";

Styles are used to change the display style to one of the valid [Evas] text effects, whole textblock (when set on base) or the text between a particular tag.

Multiple styles of different kind can be applied to the same time by using multiple "style" properties on the "base" (global), or "!tag:", to limit the effect to a given tag. The default value is "plain".


base: "... shadow_color=#00ff00ff ...";
tag:  "solid_shadow"  "... style=shadow  ...";
tag:  "smooth_shadow" "... style=soft_shadow ...";
tag:  "far_shadow"    "... style=far_shadow ...";

Each type of shadow has a different effect (solid, smooth and separate from the text respectively) and can't be used together since they override each other effects.


base: "... outline_color=#00ff00ff ...";
tag:  "solid_outline"  "... style=outline ...";
tag:  "smooth_outline" "... style=soft_outline ...";

Outline displays a border around each character of the selected text, the border can be solid or smoothed, but both can't be used together.

Shadows & Outlines Combinations

base: "... shadow_color=#00ff00ff outline_color=#00ff00ff ...";
tag:  "both_solid" "... style=outline_shadow ...";
tag:  "one_solid"  "... style=outline_soft_shadow ...";

These styles displays a combination of the two effects, in one case a solid outline along a solid shadow and in the other a solid outline along a smooth shadow.


base: "... style=glow glow_color=#00ff00ff glow2_color=#00ff00ff".

Displays a combination of two outlines, one solid and one blurry, around the text. The inner color (solid) is set with "glow2_color" and the outter color (blurry) is set with "glow_color".


base: "... style=underline underline_color=#00ff00ff underline2_color=#00ff00ff ...";

Underline draws one or two lines below the text depending on he colors set, underline_color sets the top underline and underline2_color sets the bottom underline. The default value for both is transparent.


base: "... strikethrough_color=#00ff00ff ...";
tag:  "wrong" "+ style=strikethrough"

Draws a line through the selected text, it takes no value and can be used directly as a tag. The default value for the color is transparent.

Creating Tags

style {
  tag:  "tag_name"  "+ style_properties";
  tag:  "/tag_name" "- style_properties"; //optional

Each style can have multiple "tag" declarations, tags are later used as <tag> in the textblock text, a tag can take the same style properties as base and additional special characters.

When a <tag> is called inside a textblock, the parser basically applies the <tag> as <property1=value property2=value> to all text that follows until the ending </tag> is met.

Ending tags can have additional properties themselves, which will be applied to all text after the ending tag.

Tags are applied in order and a new tag will override any colliding style properties with the former.

The advantage of this flexible tagging system is that it allows to keep the visual effect off the tag separate from his formatting effect, a "<important>" tag could change the color to red or increase the font size.

Special Characters

tag: "br"         "+ \n"
tag: "/sentence"  "- \n";
tag: "/paragraph" "- \n \n";

Tags can also be used to insert special characters in your text.

Special Characters Supported

New Line "\n"

Imported from
1 lebarjack 2010-09-15 09:42:43
2 jt_a 2011-05-04 19:52:42 restoring links
3 jt_a 2011-05-04 19:54:46

Last Author
Last Edited
Sep 5 2013, 2:39 PM