justCode

O modo programador e open source de ver o mundo.

Imagem de destaque do blog justcode.com.br.

Como formatar textos em GTK com Pango Markup

—

by

natorsc
in

O Pango Markup é uma linguagem de marcação que permite a formação e aplicação de estilos nos textos de aplicativos que são desenvolvidos com toolkit GTK.

Com a linguagem de marcação Pango é possível adicionar aos textos elementos de formatação como negrito, itálico, sublinhado, cores e tamanhos de fonte personalizados.

Posts relacionados:

    Atributos

    font

    Valores:

    1. Sans.
    2. Roboto.
    3. Etc.

    Exemplo:

    <span font="Sans">Lorem...</span>
<span font="Roboto">Lorem...</span>

    font_desc

    Valores:

    1. "Sans Italic".
    2. "Sans Italic 14".

    Exemplo:

    1. <span font_desc="Sans Italic">Lorem...</span>
2. <span font_desc="Sans Italic 14">Lorem...</span>

    font_family

    Valores:

    1. "Sans Italic".
    2. "Roboto Italic".

    Exemplo:

    1. <span font_family="Sans Italic">Lorem...</span>
2. <span font_family="Roboto Italic">Lorem...</span>

    face

    Valores:

    1. "Sans Bold 12pt".
    2. "Roboto Bold 12pt".

    Exemplo:

    1. <span face="Sans Bold 12pt">Lorem...</span>
2. <span face="Roboto Bold 12pt">Lorem...</span>

    font_size

    Valores:

    1. "12".
    2. "14".

    Exemplo:

    1. <span font_size="12">Lorem...</span>
2. <span font_size="14">Lorem...</span>

    size

    Valores:

    1. "xx-small".
    2. "x-small".
    3. "small".
    4. "medium".
    5. "large".
    6. "x-large".
    7. "xx-large".
    8. "200%".
    9. "14".
    10. "12.5pt".

    Exemplo:

    1. <span size="xx-small">Lorem...</span>
2. <span size="x-small">Lorem...</span>
3. <span size="small">Lorem...</span>
4. <span size="medium">Lorem...</span>
5. <span size="large">Lorem...</span>
6. <span size="x-large">Lorem...</span>
7. <span size="xx-large">Lorem...</span>
8. <span size="200%">Lorem...</span>
9. <span size="14">Lorem...</span>
10. <span size="12.5pt">Lorem...</span>

    font_style

    Valores:

    1. "normal".
    2. "oblique".
    3. "italic".

    Exemplo:

    1. Lorem <span style="normal">Lorem...</span>
2. Lorem <span style="oblique">Lorem...</span>
3. Lorem <span style="italic">Lorem...</span>

    style

    Valores:

    1. "normal".
    2. "oblique".
    3. "italic".

    Exemplo:

    1. Lorem <span style="normal">Lorem...</span>
2. Lorem <span style="oblique">Lorem...</span>
3. Lorem <span style="italic">Lorem...</span>

    font_weight

    Valores:

    1. "ultralight".
    2. "light".
    3. "normal".
    4. "bold".
    5. "ultrabold".
    6. "heavy".
    7. "20".

    Exemplo:

    1. <span font_weight="ultralight">Lorem...</span>
2. <span font_weight="light">Lorem...</span>
3. <span font_weight="normal">Lorem...</span>
4. <span font_weight="bold">Lorem...</span>
5. <span font_weight="ultrabold">Lorem...</span>
6. <span font_weight="heavy">Lorem...</span>
7. <span font_weight="20">Lorem...</span>

    weight

    Valores:

    1. "ultralight".
    2. "light".
    3. "normal".
    4. "bold".
    5. "ultrabold".
    6. "heavy".
    7. "20".

    Exemplo:

    1. <span weight="ultralight">Lorem...</span>
2. <span weight="light">Lorem...</span>
3. <span weight="normal">Lorem...</span>
4. <span weight="bold">Lorem...</span>
5. <span weight="ultrabold">Lorem...</span>
6. <span weight="heavy">Lorem...</span>
7. <span weight="20">Lorem...</span>

    font_variant

    Valores:

    1. “normal”.
    2. “small-caps”.
    3. “all-small-caps”.
    4. “petite-caps”.
    5. “all-petite-caps”.
    6. “unicase”.
    7. “title-caps”.

    Exemplo:

    1. <span font_variant="normal">Lorem...</span>
2. <span font_variant="small-caps">Lorem...</span>
3. <span font_variant="all-small-caps">Lorem...</span>
4. <span font_variant="petite-caps">Lorem...</span>
5. <span font_variant="all-petite-caps">Lorem...</span>
6. <span font_variant="unicase">Lorem...</span>
7. <span font_variant="title-caps">Lorem...</span>

    variant

    Valores:

    1. “normal”.
    2. “small-caps”.
    3. “all-small-caps”.
    4. “petite-caps”.
    5. “all-petite-caps”.
    6. “unicase”.
    7. “title-caps”.

    Exemplo:

    1. <span variant="normal">Lorem...</span>
2. <span variant="small-caps">Lorem...</span>
3. <span variant="all-small-caps">Lorem...</span>
4. <span variant="petite-caps">Lorem...</span>
5. <span variant="all-petite-caps">Lorem...</span>
6. <span variant="unicase">Lorem...</span>
7. <span variant="title-caps">Lorem...</span>

    font_stretch

    Valores:

    1. ultracondensed.
    2. extracondensed.
    3. condensed.
    4. semicondensed.
    5. normal.
    6. semiexpanded.
    7. expanded.
    8. extraexpanded.
    9. ultraexpanded.

    Exemplo:

    1. <span font_stretch="ultracondensed">Lorem...</span>
2. <span font_stretch="extracondensed">Lorem...</span>
3. <span font_stretch="condensed">Lorem...</span>
4. <span font_stretch="semicondensed">Lorem...</span>
5. <span font_stretch="normal">Lorem...</span>
6. <span font_stretch="semiexpanded">Lorem...</span>
7. <span font_stretch="expanded">Lorem...</span>
8. <span font_stretch="extraexpanded">Lorem...</span>
9. <span font_stretch="ultraexpanded">Lorem...</span>

    stretch

    Valores:

    1. ultracondensed.
    2. extracondensed.
    3. condensed.
    4. semicondensed.
    5. normal.
    6. semiexpanded.
    7. expanded.
    8. extraexpanded.
    9. ultraexpanded.

    Exemplo:

    1. <span stretch="ultracondensed">Lorem...</span>
2. <span stretch="extracondensed">Lorem...</span>
3. <span stretch="condensed">Lorem...</span>
4. <span stretch="semicondensed">Lorem...</span>
5. <span stretch="normal">Lorem...</span>
6. <span stretch="semiexpanded">Lorem...</span>
7. <span stretch="expanded">Lorem...</span>
8. <span stretch="extraexpanded">Lorem...</span>
9. <span stretch="ultraexpanded">Lorem...</span>

    font_features

    Valores:

    1. dlig=1, -kern, afrc on.

    Exemplo:

    1. <span font_features="dlig=1, -kern, afrc on">Lorem...</span>

    foreground

    Valores:

    1. "#00FF00".
    2. "green".

    Exemplo:

    1. <span foreground="#00FF00">Lorem...</span>
2. <span foreground="green">Lorem...</span>

    fgcolor

    Valores:

    1. "#00FF00".
    2. "green".

    Exemplo:

    1. <span fgcolor="#00FF00">Lorem...</span>
2. <span fgcolor="green">Lorem...</span>

    color

    Valores:

    1. "#00FF00".
    2. "green".

    Exemplo:

    1. <span color="#00FF00">Lorem...</span>
2. <span color="green">Lorem...</span>

    background

    Valores:

    1. "#00FF00".
    2. "green".

    Exemplo:

    1. <span background="#00FF00">Lorem...</span>
2. <span background="green">Lorem...</span>

    bgcolor

    Valores:

    1. "#00FF00".
    2. "green".

    Exemplo:

    1. <span bgcolor="#00FF00">Lorem...</span>
2. <span bgcolor="green">Lorem...</span>

    alpha

    Valores:

    1. "10". Valor entre 1 e 65536.
    2. "50%".

    Exemplo:

    1. <span alpha="10">Lorem...</span>
2. <span alpha="50%">Lorem...</span>

    fgalpha

    Valores:

    1. "10". Valor entre 1 e 65536.
    2. "50%".

    Exemplo:

    1. <span fgalpha="10">Lorem...</span>
2. <span fgalpha="50%">Lorem...</span>

    background_alpha

    Valores:

    1. "10". Valor entre 1 e 65536.
    2. "50%".

    Exemplo:

    1. <span background_alpha="10">Lorem...</span>
2. <span background_alpha="50%">Lorem...</span>

    bgalpha

    Valores:

    1. "10". Valor entre 1 e 65536.
    2. "50%".

    Exemplo:

    1. <span bgalpha="10">Lorem...</span>
2. <span bgalpha="50%">Lorem...</span>

    underline

    Valores:

    1. "none".
    2. "single".
    3. "double".
    4. "low".
    5. "error".

    Exemplo:

    1. <span underline="none">Lorem...</span>
2. <span underline="single">Lorem...</span>
3. <span underline="double">Lorem...</span>
4. <span underline="low">Lorem...</span>
5. <span underline="error">Lorem...</span>

    underline_color

    Valores:

    1. "#00FF00".
    2. "green".

    Exemplo:

    1. <span underline_color="#00FF00">Lorem...</span>
2. <span underline_color="green">Lorem...</span>

    overline

    Valores:

    1. "none".
    2. "single".

    Exemplo:

    1. <span overline="none">Lorem...</span>
2. <span overline="single">Lorem...</span>

    overline_color

    Valores:

    1. "#00FF00".
    2. "green".

    Exemplo:

    1. <span overline_color="#00FF00">Lorem...</span>
2. <span overline_color="green">Lorem...</span>

    rise

    Valores:

    1. "6pt".
    2. "12pt".

    Exemplo:

    1. <span rise="6pt">Lorem...</span>
2. <span rise="12pt">Lorem...</span>

    baseline_shift

    Valores:

    1. "6pt".
    2. "12pt".

    Exemplo:

    1. <span baseline_shift="6pt">Lorem...</span>
2. <span baseline_shift="12pt">Lorem...</span>

    font_scale

    Valores:

    1. "superscript".
    2. "subscript".
    3. "small-caps".

    Exemplo:

    1. <span font_scale="superscript">Lorem...</span>
2. <span font_scale="subscript">Lorem...</span>
3. <span font_scale="small-caps">Lorem...</span>

    strikethrough

    Valores:

    1. "true".
    2. "false".

    Exemplo:

    1. <span strikethrough="true">Lorem...</span>
2. <span strikethrough="false">Lorem...</span>

    strikethrough_color

    Valores:

    1. "#00FF00".
    2. "green".

    Exemplo:

    1. <span strikethrough_color="#00FF00">Lorem...</span>
2. <span strikethrough_color="green">Lorem...</span>

    fallback

    Valores:

    1. "true".
    2. "false".

    Exemplo:

    1. <span fallback="true">Lorem...</span>
2. <span fallback="false">Lorem...</span>

    lang

    Valores:

    1. "en_US".
    2. "pt_BR".

    Exemplo:

    1. <span lang="en_US">Lorem...</span>
2. <span lang="pt_BR">Lorem...</span>

    letter_spacing

    Valores:

    1. "5".
    2. "10".

    Exemplo:

    1. <span letter_spacing="5">Lorem...</span>
2. <span letter_spacing="10">Lorem...</span>

    gravity

    Valores:

    1. south.
    2. east.
    3. north.
    4. west.

    Exemplo:

    1. <span gravity="south">Lorem...</span>
2. <span gravity="east">Lorem...</span>
3. <span gravity="north">Lorem...</span>
4. <span gravity="west">Lorem...</span>

    gravity_hint

    Valores:

    1. natural.
    2. strong.
    3. line.

    Exemplo:

    1. <span gravity_hint="natural">Lorem...</span>
2. <span gravity_hint="strong">Lorem...</span>
3. <span gravity_hint="line">Lorem...</span>

    show

    Valores:

    1. none.
    2. spaces.
    3. line-breaks.
    4. ignorables.

    Exemplo:

    1. <span show="none">Lorem...</span>
2. <span show="spaces">Lorem...</span>
3. <span show="line-breaks">Lorem...</span>
4. <span show="ignorables">Lorem...</span>

    insert_hyphens

    Valores:

    1. true.
    2. false.

    Exemplo:

    1. <span insert_hyphens="true">Lorem...</span>
2. <span insert_hyphens="false">Lorem...</span>

    allow_breaks:

    Valores:

    1. true.
    2. false.

    Exemplo:

    1. <span allow_breaks="true">Lorem...</span>
2. <span allow_breaks="false">Lorem...</span>

    line_height:

    Valores:

    1. 1.
    2. 10.

    Exemplo:

    1. <span line_height="1">Lorem...</span>
2. <span line_height="10">Lorem...</span>

    text_transform

    Valores:

    1. none.
    2. lowercase.
    3. uppercase.
    4. capitalize.

    Exemplo:

    1. <span text_transform="none">Lorem...</span>
2. <span text_transform="lowercase">Lorem...</span>
3. <span text_transform="uppercase">Lorem...</span>
4. <span text_transform="capitalize">Lorem...</span>

    segment

    Valores:

    1. sentence.
    2. word.

    Exemplo:

    1. Lorem <span segment="sentence">Lorem...</span>
2. Lorem <span segment="word">Lorem...</span>

    Tags de conveniência

    O Pango também fornece algumas tags que facilitam a aplicação de alguns estilos as fontes:

    1. <b>: Negrito.
    2. <big>: Torna a fonte grande, equivalente ao size=larger.
    3. <i>: Itálico.
    4. <s>: Riscado (tachado).
    5. <sub>: subscrito.
    6. <sup>: Sobrescrito.
    7. <small>: Torna a fonte pequena, equivalente ao size=smaller.
    8. <tt>: Monospace.
    9. <u>: Sublinhar.

    Exemplo:

    1. <b>Lorem...</b>
2. <big>Lorem...</big>
3. <i>Lorem...</i>
4. <s>Lorem...</s>
5. <sub>Lorem...</sub>
6. <sup>Lorem...</sup>
7. <small>Lorem...</small>
8. <tt>Lorem...</tt>
9. <u>Lorem...</u>