Imagem de destaque do blog justcode.com.br.

Como formatar textos em GTK com Pango Markup

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.

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>