Se você quer estilizar seus textos com uma fonte diferente, experimente fazer image replacement com um helper que irá gerar a imagem automaticamente. Adicione o método abaixo ao arquivo app/helpers/application_helper.rb.

def title_tag(text)
  hash          = Digest::MD5.hexdigest(text)[0,10]
  relative_name = "titles/#{hash}.png"
  full_path     = "#{Rails.root}/public/images/#{relative_name}"
 
  unless File.file?(full_path)
    image = Magick::Image.new(500, 30)
    image.format = "PNG"
 
    title = Magick::Draw.new
 
    title.annotate(image, 500, 30, 0, 0, text) do
      self.fill        = "#333"
      self.font        = Rails.root + "/fonts/Clarenton LT Bold.ttf"
      self.font_family = "Clarenton LT Bold"
      self.font_weight = Magick::BoldWeight
      self.gravity     = Magick::NorthWestGravity
      self.pointsize   = 24
    end
 
    image.write(full_path)
  end
 
  url = image_path(relative_name)
  content_tag(:h2, text, :class => "ir", :style => "background-image: url(#{url});")
end

Agora, basta você chamar o helper da seguinte maneira:

<%= title_tag "Easy image replacement" %>

Uma imagem como está será gerada:

Imagem gerada pelo RMagick

No HTML, o código gerado será esse:

<h2 class="ir" style="background-image: url(/images/titles/ad80520fd1.png?1234484835);">
  Easy image replacement
</h2>

Você também vai precisar do CSS:

.ir {
  background: transparent no-repeat;
  height: 30px;
  text-ident: -9999px;
  width: 500px;
}

Lembre-se de alterar o helper, adicionando sua fonte, cor e tamanho.

Comentários #

# Raul Souza Lima disse:
12 Fev 09, 10:48PM

Fernando, tem alguma razão em especial utilizar um hash para o nome do arquivo e ñ o próprio texto melhor formatado, com _ ou tudo junto?
O hash seria pra não ocorrer de ter uma imagem com o mesmo nome?
Muito boa dica!
Abraço!

# Junio Vitorino disse:
13 Fev 09, 08:21AM

Muito legal a dica, o uso de dynamic image replacemente é condenado por alguns e amado por outros, questões como performace, banda e outras entram em check. Nando, o que você pensa sobre isso?

# Nando Vieira disse:
13 Fev 09, 08:58AM

Raul, o hash é para evitar que um nome inválido seja usado na hora de criar um arquivo. Caracteres como asterisco (*) e barra (/) são inválidos na maioria dos sistemas operacionais.

Junio, em uma aplicação com muitas requisições (Blogblogs por exemplo) seria inviável. Na maioria das aplicações não faz diferença.

# Leonardo Faria disse:
13 Fev 09, 04:46PM

puta dica

vocês tá usando essa técnica no blogblogs?

# Nando Vieira disse:
13 Fev 09, 07:28PM

Nah... eu estou usando em um projeto que estou fazendo! ;)

# Marcio Migueis disse:
10 Mar 10, 11:20AM

Nando,

Você acha viável salvar as imagens geradas, de forma que quando o usuário abrir a página, nenhum transformação será feita? Apenas a imagem gerada em um momento anterior e salva no disco , será carregada e exibida.
Tenho um cliente que quer evitar dar copy and paste em parte dos textos da página dele.

Obrigado

Marcio

# Nando Vieira disse:
10 Mar 10, 10:36PM

Marcio, esse script já verifica se o arquivo existe, gerando a imagem apenas caso ela não seja encontrada. Com certeza é a melhor coisa a se fazer!

Deixe um comentário





Não é aceito código HTML: adicione-o no pastie.org ou paste.milk-it.net e poste apenas o link.

Se este é seu primeiro comentário, ele terá que ser aprovado antes de ser exibido.