Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Mudar a fonte de uma palavra de uma String

por Gabriel Vendramini
| 93.1k xp | 37 posts

Olá outra vez estou fazendo uma lista de exercícios aqui e não estou conseguindo sair do lugar com o ultimo exercício.

Enunciado do Exercicio:

This is big and this is small

Modifique o tamanho das palavras neste parágrafo, sendo "Big" um tamanho de 160px, "small" de 10px e as outras 40px. Para fazer isso, você terá que escrever o texto palavra por palavra (use um vetor para salvar as palavras) e calcular cada posição e valor que ocupa cada palavra com a função textWidth(palavra), que nos retorna à largura em pixels de uma palavra.

var paragraf = "This is big and this small";
var paragraf_array;

function setup() {
    createCanvas(1024, 768);
    background("white");
    paragraf_array = paragraf.split(' ');
    findWords();
    text(paragraf_array, width / 2, 10, 300, 500);

}

function findWords() {
    fill(50);
    textLeading(25);
    textFont("Arial");
    for (var i = 0; i < paragraf_array.length; i++) {

        if (paragraf_array[i] === "big") {
            paragraf_array[i] = paragraf_array[i].toString().fontsize(160);

        }

        if (paragraf_array[i] === "small") {
            paragraf_array[i] = paragraf_array[i].toString().fontsize(10);
        }

        if (paragraf_array[i] != "small" && paragraf_array[i] != "big") {
            paragraf_array[i] = paragraf_array[i].toString().fontsize(40);
        }
    }
}
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="5-10.js">setup();</script>
<meta charset="utf-8" />
</head>
<body>    

</body>
</html>

Ele fala do textWidth(palavra) mas não sei como utilizar aqui e também minha fonte não esta mudando de tamanho.

7 respostas
por Andre Tardelli
| 157.1k xp | 152 posts
Instrutor Instrutor e Coordenador na Alura

Fala Gabriel!!

No caso desse exercício, você deve focar em gerar diversos elementos contendo cada um deles uma palavra da frase, para que desse modo você consiga alterar os seus atributos separadamente em seus próprios elementos.

Acho que utilizar um canvas pode dificultar um pouco mais as coisas. Tente criar elementos(como divs por exemplo) diretamente no corpo do html, e vá atribuindo as propriedades uma por uma através daquele loop que você fez na função findWords.

Adaptei o seu código para fazer o que você quer. Dê uma olhada e veja se ele consegue esclarecer um pouco mais as coisas.

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script>
            var paragraf = "this is big and this is small";
            var paragraf_array;


            function findWords(){
                paragraf_array = paragraf.split(' ');
                return paragraf_array
            }

            function setup() {
                findWords();
                for (var i = 0; i < paragraf_array.length; i++) {
                    //crio uma div
                    var palavra = document.createElement("div");
                    //insiro o texto da minha div
                    palavra.innerHTML = paragraf_array[i];

                    //verifico qual a palavra encontrada no array
                    if (paragraf_array[i] === "big") {
                        //atribuo o css da minha div com o tamanho da fonte desejada
                        palavra.style.fontSize = "160px";
                    } else if (paragraf_array[i] === "small") {
                        palavra.style.fontSize = "10px";
                    } else {
                        palavra.style.fontSize = "40px";
                    }
                    //insiro essa div com as propriedades desejadas diretamente no body do html
                    document.body.appendChild(palavra);
                }
            }
            setup();
        </script>
    </body>
</html>

Caso tenha mais alguma dúvida em específico, só falar!! Bons estudos!!

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Gabriel, tudo bem? Desculpa mas eu não entendi muito bem.

Você precisa no seu HTML mostrar o texto:

This is big and this is small

Porém, o tamanho da fonta da palavra big deve ser de 160px, da small de 10px e as demais 40px, é isso?

Fico no aguardo.

por Gabriel Vendramini
| 93.1k xp | 37 posts

Ola Matheus.

Isso, mas pelo que entendi deve ser feito pelo arquivo javascript e no HTMLapenas mostrar as chamadas dos métodos.

Esse e como veio o exercício no pdf:

var paragraf = "This is big and this small";
var paragraf_array ;
function setup() {
createCanvas(1024, 768);
background("white");

fill(50);
textLeading(25);
paragraf_array = paragraf .split(' ');
}

Olá Andre. Imagino que não posso trocar o canvas e tenho que trabalhar com o javascrip diretamente como esta o corpo do exercício.

solução!
por Andre Tardelli
| 157.1k xp | 152 posts
Instrutor Instrutor e Coordenador na Alura

Oi Gabriel!!

Nesse caso, segue nova versão do seu arquivo javascript, dessa vez utilizando uma solução utilizando o canvas:

            var paragraf = "This is big and this small";
            var paragraf_array;

            function setup() {
                createCanvas(1024, 768);
                background("white");
                fill(50);
                textLeading(25);
                textFont("Arial");

                paragraf_array = paragraf.split(' ');
                let ultimaPosicao = 0;

                paragraf_array.forEach((palavra) => {

                    // realizo um regex para verificar a string no array gerado
                    let bigReg = new RegExp('big', 'i');
                    let smallReg = new RegExp('small', 'i');

                    // realizamos um if ternário e trocamos o tamanho do texto de acordo com a palavra encontrada
                    palavra.match(bigReg) ? textSize(160)
                     : palavra.match(smallReg) ? textSize(10) 
                        : textSize(40);

                    //atribuo a posição no eixo y de acordo com o tamanho do texto, para alinhá-los corretamente
                    text(palavra, width / 2, ultimaPosicao, 300, 500)
                    ultimaPosicao += textSize();
                })
            }

Utilizar o canvas tem alguns detalhes a mais: quando vamos escrever o texto, precisamos ajustar a posição do mesmo de acordo com o tamanho de cada fonte, ou os textos irão se sobrepor! Dessa forma, é preciso fazer com que a variável responsável pela posição no eixo y de cada texto seja incrementado de acordo com o seu valor atual.

Também foi necessário utilizar a função textSize() para atribuir o valor da fonte atual do nosso canvas para escrever as palavras. Assim, precisamos alterá-la a cada iteração para que a fonte fique no tamanho desejado.

No caso do if ternário e do regex, ele faz a mesma coisa do caso da solução anterior que coloquei, só é uma abordagem mais otimizada para o caso que queremos resolver!!

Espero que essa solução tenha conseguido te ajudar!! Se tiver alguma dúvida, só avisar!! Bons estudos!

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Entendi Gabriel, bom, acho que a solução do Andre deve ajudar.

Abraços e bons estudos.

por Gabriel Vendramini
| 93.1k xp | 37 posts

Ola Andre .

Que legal a forma ali de converter as palavras ali con o RegExp, fiz aqui e funcionou 100%.

por Paulo Scalercio
| 363.3k xp | 341 posts
Instrutor Instrutor & Desenvolvedor

Fala Gabriel!

Fico feliz que tenha solucionado sua dúvida!

Estou fechando o tópico! Qualquer nova pergunta basta criar um novo!

Abraços!