texto efeitos de texto fontes Helder da Rocha

Transcrição

1 texto efeitos de texto fontes Helder da Rocha

2 Texto Pode ser desenhado com o elemento <text> Atributos e sub- elementos permitem controle sobre muitos aspectos do texto e caracteres individuais Dimensões, espaçamento, rotação, etc. Pode ser desenhado na ver=cal, na diagonal, em caminhos arbitrários (associado a um <path>) Assim como ocorre com as figuras, pode- se aplicar cor, filtros, gradientes, padrões, clipping, etc. Amplo suporte para acessibilidade e internacionalização Especificação h7p:// 2

3 Baseline As coordenadas iniciais de um elemento de texto não ficam no canto superior esquerdo como as figuras A posição exata depende de fatores culturais (idioma), da natureza do texto (alfabé=co, matemá=co, etc.) Âncora default tem origem na linha base (baseline) para textos la=nos alfabé=cos Tanto o retângulo abaixo como o texto têm as mesmas coordenadas x,y <svg... viewbox=" "> <rect x="0" y="0" height="36" width="180"... /> <text font- size="36" x="0" y="0">agora</text> </svg> Posição (0,0) só esta parte será visível se viewbox começar em 0,0 3

4 Fontes Associadas a texto através de atributos de es=lo em <text> ou elementos mais altos na hierarquia (ex: <g>) Podem ser aplicados via XML ou CSS São iden=ficadas pelo nome O atributo font- family permite especificar uma lista de nomes: caso o primeiro não seja encontrado, será usado o segundo, e assim por diante Há nomes default como sans- serif, serif, monospace Há vários atributos para controlar aspectos de fontes, como peso, inclinação, tamanho, etc Mesmas propriedades do CSS 2 e mesma sintaxe Na ausência de uma fonte, o texto é desenhado em uma fonte default, como serif 4

5 Atributos de es=lo para fontes font- family Um ou mais nomes de fonte separados por vírgula font- size Podem ser especificados tanto em XML (como atributos próprios) como em CSS (dentro de folhas de esklo, blocos <style> ou atributos style) rela%vo ao viewbox, ou com unidades absolutas: pt, cm, in, px, em, ex, pc font- weight peso: bold, light, 100, 200,..., 900 font- style esklo de grifo: italic, oblique font- variant variação: small- caps font- stretch normal, condensed, etc. Expande ou condensa a fonte font Atalho para especificar várias propriedades de uma vez 5

6 Fontes embu=das e SVG Fonts Fontes do sistema não podem ser embu=das em SVG Mas é possível definir fontes em SVG, que podem ser referenciadas por arquivos CSS ou SVG Elemento <font> permite a definição de bibliotecas inteiras de fontes usando SVG, referenciáveis via ID por CSS Dentro de <font> são definidos Caracterís=cas da fonte como família, altura, linha- base, etc: <font- face> Iden=ficadores para a fonte (<font- face- src>, <font- face- Uri>, etc.) Glifos* <glyph> individuais de cada caractere são desenhados dentro deste elemento usando sintaxe de <path> Atributos de <glyph> permitem especificar para cada glifo códigos Unicode, iden=ficadores, códigos de idioma, métricas, ligaduras, etc. Detalhes da criação e manipulação de SVG Fonts foge ao escopo deste curso. Para mais detalhes consulte a especificação em: h7p:// * Símbolo usado para representar um caractere, em uma determinada família de fontes 6

7 Exemplo de definição de fontes* <svg width="400px" height="300px" version="1.1" xmlns = ' <defs> <font id="font1" horiz- adv- x="1000"> <font- face font- family="super Sans" font- weight="bold" font- style="normal" units- per- em="1000" cap- height="600" x- height="400" ascent="700" descent="300" alphabetic="0" mathematical="350" ideographic="400" hanging="500"> <font- face- src> <font- face- name name="super Sans Bold"/> </font- face- src> </font- face> <missing- glyph><path d="m0,0h200v200h- 200z"/></missing- glyph> <glyph unicode="!" horiz- adv- x="300"><path d="..."/></glyph> <glyph unicode="@"><path d="..."/></glyph>... </font> <font id="font2" horiz- adv- x="1000"> <font- face font- family="super Sans" font- weight="normal" font- style="italic"...> <font- face- src> <font- face- name name="super Sans Italic"/> </font- face- src> </font- face> <missing- glyph><path d="m0,0h200v200h- 200z"/></missing- glyph> <glyph unicode="!" horiz- adv- x="300"><path d="..."/></glyph> <glyph unicode="@"><path d="..."/></glyph>... </font> </defs> </svg> * extraído da especificação W3C myfont.svg 7

8 Como usar uma fonte SVG Uma vez definida a fonte, ela deve ser referenciada via face { font- family: 'Super Sans'; font- weight: normal; font- style: italic; src: url("myfont.svg#font2") format("svg") face { font- family: 'Super Sans'; font- weight: bold; font- style: normal; src: url("myfont.svg#font1") format("svg") } Depois, qualquer elemento SVG pode usá- la <text x="100" y="100" style="font- family: 'Super Sans'; font- weight: normal; font- style: italic">texto usando uma SVG Font</text> 8

9 Como gerar SVG Fonts Criar uma família de fontes usando SVG Fonts requer muito trabalho Se você tem fontes true- type, pode convertê- las para SVG através do framework Apache Ba=k (h7p://xmlgraphics.apache.org/bakk) O Ba=k também fornece uma ferramenta de linha de comando: ba=k- I2svg que pode ser chamada por quaisquer aplicações Exemplo de uso O exemplo abaixo gera um arquivo contendo fontes SVG para os caracteres `0` (Unicode 0048) a `9` (Unicode 0057) em uma fonte SVG java - jar batik- ttf2svg.jar /fontes/corbel.ttf \ - l 48 - h 57 id ncorbel - o NumCorbel.svg A fonte deve ser referenciada via CSS face {font- family: 'Corbel'; src: url("numcorbel.svg#ncorbel") format("svg") </style> E depois pode ser usada normalmente em qualquer elemento: <text font- family="corbel"... /> 9

10 Atributos de <text> x e y representam coordenadas absolutas Podem conter um ou mais valores Primeiros n valores são posições dos n primeiros caracteres. Ex: <text x="0 5 10" y="0">olá</text> desenha O na posição 0, L na posição 5 e Á na posição 10 Os atributos dx e dy representam coordenadas rela=vas Deslocam o caractere (ou os primeiros n caracteres, se houver n valores) em relação à posição anterior do texto rotate gira o primeiro caractere Ou primeiros n caracteres se houver n valores textlength determina o comprimento do texto O texto é ajustado para caber no espaço lengthadjust="spacing spacingandglyphs" Define a forma como textlength ajusta o texto para caber no comprimento (variando espaço ou es=cando a fonte) 10

11 <tspan> <tspan> é um bloco interno ao texto que permite alterar propriedades de um trecho do texto Coordenadas Es=lo etc. Os atributos principais de <tspan> são os mesmos de <text> Mas cada <tspan> está no contexto de um <text> pai. SVG não possui recursos para automa=camente quebrar linhas (não há blocos de parágrafo) Cada elemento <text> desenha uma única linha de texto. Mas com <tspan> é possível construir blocos <text> mul=linha com cada linha definida em um <tspan>. 11

12 Exemplo com <tspan> e dx/dy Nos exemplos abaixo, o deslocamento horizontal rela=vo é man=do Incrementos com atributo dy, que leva em conta o valor anterior Os dois arquivos produzem o mesmo resultado <svg xmlns=" viewbox=" "> <text font- size="12" x="5" y="15"> <tspan dx="0" dy="0">um</tspan> <tspan dy="15">dois</tspan> <tspan dy="15">tres</tspan> <tspan dy="15">quatro</tspan> <tspan dy="15">cinco</tspan> <tspan x="5" dy="0">um</tspan> <tspan dy="- 15">Dois</tspan> <tspan dy="- 15">Tres</tspan> <tspan dy="- 15">Quatro</tspan> <tspan dy="- 15">Cinco</tspan> </text> </svg> <svg xmlns=" viewbox=" "> <text font- size="12" x="5" y="15"> <tspan dx="0" dy=" "> Um Dois Tres Quatro Cinco</tspan> <tspan x="5" dy=" "> Um Dois Tres Quatro Cinco</tspan> </text> </svg> 12

13 Exemplos com rotate (W3C) <text font- family="verdana" font- size="55" fill="blue" > <tspan x="250" y="150" rotate="- 30,0,30"> Hello, out there</tspan> </text> <text id="parent" font- family="arial, sans- serif" font- size="32" fill="red" x="40" y="40" rotate="5,15,25,35,45,55"> Not <tspan id="child1" rotate="- 10,- 20,- 30,- 40" fill="orange">all characters <tspan id="child2" rotate="70,60,50,40,30,20,10" fill="yellow">in <tspan id="child3">the</tspan> </tspan> <tspan id="child4" fill="orange" x="40" y="90">text</tspan> have a </tspan> <tspan id="child5" rotate="- 10" fill="blue">specified</tspan> rotation </text> Fonte: W3C (SVG spec) 13

14 Exemplos <text> e <tspan> (W3C) <text x="250" y="150" font- family="verdana" font- size="55" fill="blue" > Hello, out there</text> <text x="200" y="150" fill="blue" > You are <tspan font- weight="bold" fill="red">not</tspan> a banana. </text> <text x="200" y="150" fill="blue" > But you <tspan dx="2em" dy="- 50" font- weight="bold" fill="red" >are</tspan> <tspan dy="100">a peach!</tspan></text> <text fill="rgb(255,164,0)" > <tspan x=" " y="100">cute and</tspan> <tspan x=" " y="200">fuzzy</tspan> </text> Fonte: W3C (SVG spec) 14

15 Atributos de es=lo (CSS ou XML) text- decoration="underline overline line- through..." Texto sublinhado, sobrelinhado, riscado letter- spacing="normal valor inherit" E s p a ç o e n t r e l e t r a s word- spacing="normal valor inherit" Espaço entre palavras kerning="auto comprimento inherit" Espaçamento especial entre caracteres Modo auto é default e automa=camente reduz o espaçamento entre caracteres específicos (ex: "VA") 15

16 Atributos de alinhamento text- anchor="start middle end" Alinhamento do texto (onde ele é ancorado) Posição depende do idioma, cultura, etc. Para alfabeto la=no start = esquerda, end = direita baseline- shift="baseline sub super n% valor..." Desvio rela=vo ver=cal em relação à linha base Permite efeitos subescrito, sobrescrito, etc. dominant- baseline="auto ideographic..." Linha base principal do texto alignment- baseline="auto ideographic..." Linhas base secundárias (rela=vas à linha base principal) 16

17 Suporte de atributos de es=lo <style type="text/css"> #decoration {text- decoration: overline underline line- through;} #linespace {letter- spacing: 1em} #wordspace {word- spacing: 1cm} #stretch {font- stretch: ultra- expanded} #squish {font- stretch: ultra- condensed} #nokern {kerning: 0} #kernauto {kerning: auto} #kernjoin {kerning: - 8} </style> Squiggle 4.0Beta <text font- family="corbel, sans- serif" font- size="20"> <tspan id="decoration">texto cheio de linhas</tspan> <tspan dy="30" x="50" id="linespace">letras espacadas</tspan> <tspan dy="30" x="50" id="wordspace">muito espaco entre palavras</tspan> <tspan dy="30" x="50" id="stretch">texto esticado</tspan> <tspan dy="30" x="50" id="squish">texto espremido</tspan> <tspan dy="30" x="50" textlength="200">200 pixels</tspan> <tspan dy="30" x="50" textlength="200" lengthadjust="spacingandglyphs">200 pixels de largura</tspan> <tspan dy="30" x="50" textlength="200" lengthadjust="spacingandglyphs">texto... pixels de largura</tspan> <tspan dy="30" x="50">h<tspan baseline- shift="sub">2</tspan>o</tspan> <tspan>e = mc<tspan baseline- shift="super">2</tspan></tspan> <tspan dy="30" x="50" id="nokern">vavav</tspan> <tspan id="kernauto">vavav</tspan> <tspan id="kernjoin">vavav</tspan> </text> 17

18 Alinhamento horizontal: text- anchor <svg xmlns=" width="600" height="300"> <g transform="translate(300,50)" > <g id="grid" stroke="blue"... stroke- dasharray="10 10"> <line x1="0" y1="- 25" x2="0" y2="150" /> <line x1="- 300" y1="0" x2="300" y2="0" /> <line x1="- 300" y1="60" x2="300" y2="60" /> <line x1="- 300" y1="120" x2="300" y2="120" /> </g> <text font- family="monospace" font- size="24"> <tspan x="0" y="0" text- anchor="start">pelo inicio (START)</tspan> <tspan x="0" dy="60" text- anchor="middle">pelo meio (MIDDLE)</tspan> <tspan x="0" dy="60" text- anchor="end">pelo final (FIM)</tspan> </text> </g> </svg> 18

19 Alinhamento ver=cal: baseline Resultado diferente webkit e mozilla Apenas hanging e auto são confiáveis Outros browsers: apenas auto funciona <g transform="translate(50,50)"... > <line x1="0" y1="0" x2="300" y2="0" /> <line x1="0" y1="100" x2="300" y2="100" /> <line x1="0" y1="200" x2="300" y2="200" /> <line x1="0" y1="300" x2="300" y2="300" /> </g> <g transform="translate(50,50)" text- anchor="start" font- family="monospace" font- size="24" font- weight="bold"> <text x="0" y="0" dominant- baseline="ideographic">ideographic baseline</text> <text x="0" y="100" dominant- baseline="auto">auto baseline</text> <text x="0" y="200" dominant- baseline="mathematical">mathematical baseline</text> <text x="0" y="300" dominant- baseline="hanging">hanging baseline</text> </g> 4.0Beta 19

20 Elementos <text> podem ser referenciados e reusados como qualquer outro objeto SVG através de <use> <tref> Para segmentos de texto con=dos no interior de blocos <text>, pode- se usar o elemento <tref> Referencia apenas o conteúdo do texto (não preserva atributos de es=lo ou posição) <svg viewbox=" "... > <defs> <text id="svg">scalable Vector Graphics</text> </defs> <text x="50" font- weight="bold" font- style="italic" y="100" font- size="12pt" lengthadjust="spacingandglyphs" font- family="arial"> <tspan textlength="250" x="100">os arquivos foram criados com</tspan> <tspan textlength="300" dy="30" x="50"><tref xlink:href="#svg"/> 1.1</tspan> <tspan textlength="300" dy="30" x="50">e as animacoes geradas com </tspan> <tspan textlength="300" dy="30" x="50"><tref xlink:href="#svg"/> 1.2 Tiny.</tspan> </text> </svg> 20

21 <textpath> Texto pode ser desenhado na forma de um caminho curvo Elemento <textpath> referencia um <path> que servirá de linha base para o texto Atributo startoffset = percentagem % Indica a posição, especificada como uma percentagem do comprimento total do caminho, onde o texto começa method="align stretch" (default = align) Se o texto deve ser es=cado para seguir o caminho ou alinhado pela tangente (default) spacing="auto exact" Define a forma como os caracteres são calculados sobre o caminho (auto é default) 21

22 Exemplos (W3C) Texto seguindo um caminho Com offset para iniciar <defs><path id="mypath" d="m C C C " /></defs> <use xlink:href="#mypath" fill="none" stroke="red" /> <text font- family="verdana" font- size="42.5" fill="blue" > <textpath xlink:href="#mypath"> We go up, then we go down, then up again </textpath> </text> <textpath xlink:href="#mypath" startoffset="80%"> We go up, then we go down, then up again </textpath> Com <tspan> Fonte: W3C (SVG spec) <textpath xlink:href="#mypath"> We go <tspan dy="- 30" fill="red" >up</tspan> <tspan dy="30">, </tspan> then we go down, then up again </textpath> 22

23 Texto girando em caminho circular <defs> <path d="m100,200 C100, , ,200 S100, ,200" id="circulo" stroke="red" stroke- width="1" fill- opacity="0"> </path> </defs>... <use xlink:href="#circulo" stroke- dasharray="5 5" /> <text font- size="15" x="100" dy="- 10" id="texto" font- family="monospace"> <animatetransform attributename="transform" type="rotate" from="0,175,200" to="360,175,200" repeatcount="indefinite" fill="freeze" dur="7s"/> <textpath xlink:href="#circulo"> palavras que giram confundem as letras </textpath> </text> 23

24 Outros atributos Outros atributos e propriedades de <text> são relacionados à internacionalização direc=on="ltr rtl" (lew- to- right e right- to- lew) indica a direção do texto; idiomas como árabe e hebraico lêem da direita para a esquerda wri=ng- mode="lr- tb rl- tb etc." (lr = right- lew, tb = top- boyom) permite escrever em várias direções (como ideogramas orientais) unicode- bidi="..." define forma de suporte à texto bidirecional (use com xml:lang e atributos de internacionalização h7p:// i18n- bp/) 24