4

Como posso fazer uma fonte responsiva de acordo com o tamanho do texto? Tenho um site: radioturn.com.br

O nome da música se atualiza constantemente, gostaria de remover o marque e deixa-la parada, porém, algumas músicas são grandes demais e não cabem na div pai.

Como posso fazer isso?

Não quero usar text-overflow.

15
  • você esta a usar bootstrap ou esta fazendo tudo a mão ?
    – PululuK
    Commented 8/01/2017 às 19:23
  • Estou fazendo a mão, com bootstrap é possível? Commented 8/01/2017 às 19:24
  • 3
    Possível duplicata de Font Responsiva
    – Syzoth
    Commented 8/01/2017 às 19:28
  • 1
    obs.: o site ta bem legal.
    – viana
    Commented 8/01/2017 às 19:28
  • 1
    O que você precisa é de algo tipo "overflow:resize-text;". Mas isso não existe. Talvez tenha que calcular no Javascript. Como já responderam(não testei).
    – mau humor
    Commented 8/01/2017 às 20:09

3 Respostas 3

9

Acho que você pode recriar o elemento que compõe o nome da música, e obter sua largura em pixels. Se sua largura é maior do que a largura de seu container, você pode resolver criar um <marquee>.

Para aplicar a recriação do elemento basta remover um dos .som existentes, e depois puxar o novo elemento ao mesmo container.

Obs.: A largura do span está sendo quebrada pelo próprio container, impedindo a comparação de sua largura com a de seu container. Algum estilo resolveria isso.

Lembrando que não é preciso re-criar o elemento marquee/span.

Exemplo de como pré-armazenar o marquee/span:

var span = document.createElement('span');

span.className = 'som';
/* Desaplica a largura fixa de 300px: */
span.width = 'auto';

var marquee = document.createElement('marquee');
marquee.className = 'som';

Exemplo de como atualizar o nome da música:

/* Remove o marquee por precaução: */
marquee.remove();

var nomeDaMúsica = 'Nome da música';

var container = document.querySelector(
    '.player .caixa-status'
);

span.textContent = nomeDaMúsica;

// Para obter a largura renderizada do span vai ser necessário
// adicioná-lo ao container (obs.: se ele já estiver adicionado
// ele não duplica, de acordo com meu navegador):
container.appendChild(span);

var largura = som.offsetWidth;

if (largura > container.offWidth) {
    /* Transforma o elemento span em marquee: */

    span.remove();

    marquee.textContent = nomeDaMúsica;
    container.appendChild(marquee);
}
7
  • Não entendi muito como fazer, ainda sou novo em javascript. Commented 8/01/2017 às 20:10
  • @PauloSérgioFilho Você teria que fazer isso à cada vez que você atualiza o nome da música atual. Já viu o edit, também (havia um typo)?
    – user37626
    Commented 8/01/2017 às 20:14
  • Está retornando o seguinte erro: Uncaught TypeError: Cannot read property 'appendChild' of null at (index):39 Commented 8/01/2017 às 20:16
  • ´@PauloSérgioFilho Você está fazendo isso antes do container ser declarado, como pode ser visto no elemento <head>. Tentou declarar o elemento <script> no fim de <body> ou espere a página carregar para executar o código? Pelos meus testes, depois da página carregar, o container estava sendo sucessivamente pego.
    – user37626
    Commented 8/01/2017 às 20:19
  • Testei, e criou um marquee junto com span. Commented 8/01/2017 às 20:25
3

Tentei analisar o seu caso usando o javascript. Você pode adapta-lo de acordo o seu projecto usando outra linguanges se possivel.

  • Primeiro escolha um limite pra o tamanho dos titulos das musicas
  • Recupere o tamanho do titulo da musica
  • Se o tamanho exceder o limite, aplique uma fonte especifica
  • Se nao, mantém a fonte padrao.

Pra testar o script basta mudar o Titulo da Musica No codigo HTML ( o texto na baliza span )

function Adapfont(limit){
  var titulo_da_musica = document.getElementById("t").innerText ;
  
  if(titulo_da_musica.length > limit){
     document.getElementById("t").style.fontSize = "large";
  }else{
     document.getElementById("t").style.fontSize = "xx-large";
  }
}
var limit = 20 ;
Adapfont(limit);
<div>
    <span class="titulo-musica" id="t">Titulo da Musica</span>
</div>

SUGESTAO :

Uma outra solucao pra o seu caso seria limitar o numero de caracteres no titulo da musica.

3

Edição 1

Bem, eu li erroneamente a pergunta e acabei respondendo sobre responsividade de acordo com a viewport. Correndo o risco de ter votos negativos, deixarei minha resposta, mesmo errada, porque pode ser útil.


Você pode conseguir responsividade na tipografia usando somente CSS.

Primeiro, você pode recorrer à unidade em ou à %:

body {
    /**
    Faz a fonte ficar 2 vezes maior que o normal
    **/
    font-size: 2em;
    /**
    Fonte 95% do tamanho do normal
    font-size: 95%;
    **/
}

Ou ainda, aliar esses tipos de fonte com media queries ou, ainda, usar as media queries com os tamanhos de fonte para cada tamanho de tela:

/**
    Tela com até 600px
**/
@media (max-width: 600px){
    body{
        font-size: 10px;
    }
}

/**
    Tela com até 959px, maior que 600px
**/
@media (max-width: 959px){
    body{
        font-size: 14px;
    }
}
/**
    Tela com 960px +
**/
@media (min-width: 960px){
    body{
        font-size: 14px;
    }
}

A melhor solução CSS

Use a unidade vw

body{
    font-size: 8vw;  
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .