Supponiamo di avere la necessità di avere un testo di 25px quando il nostro DIV ha una dimensione di 960px in larghezza, in oltre tale testo che si deve rimpicciolire sino ad un minimo di 19px proporzionalmente alla larghezza minima del div di 500px.

Oltre i 960px o meno dei 500px di larghezza del div, il testo deve mantenere rispettivamente il valore massimo (25px da 960px in poi) e minimo (19px da 500px in giù).

Ci basterà chiamare richiamare la funzione JS indicando quindi dimensione minima e massima del div, la dimensione minima e massimo del testo ed l’ID dell’elemento al quale applicare il ridimensionamento.

resizeTextInRange(
  min-div-size,
  max-div-size, 
  min-text-size, 
  max-text.size, 
  div-element-id
);

Seguendo l’esempio precedente la funzione chiamata avrà questo aspetto.

resizeTextInRange(500,960,19,25,'#size-2');

Opzione: Ridimensionare testo di un div_1 rispetto alla larghezza di una div_2 diverso

Oppure si potrebbe avere la necessità di applicare la dimensione del testo ad un elemento (div_1), ma prendere come riferimento di larghezza un’altro elemento o elemento del DOM.

In questo caso ci basterà aggiungere un’ulteriore parametro alla funzione chiamata, ad esempio chiedendo alla funzione di mantenere la dimensione del testo negli stessi range di prima, ma tenendo in considerazione la larghezza del body anziché dell’elemento #size-2

resizeTextInRange(500,960,19,25,'#size-2’,’body");

Qui il codice completo: https://github.com/kiuz/sandbox-html-js-css/tree/gh-pages/text-resize-in-range-of-text-and-screen/src

Qui la pagina di esempio: https://kiuz.github.io/sandbox-html-js-css/text-resize-in-range-of-text-and-screen/src/index.html

Cosa ne pensi? Dimmelo su Twitter @_domenicomonaco oppure su Linkedin linkedin.com/in/domenicomonaco

L'articolo CSS/JS: ridimensionare il testo proporzionalmente alla dimensione del DIV sembra essere il primo su Domenico Monaco.

Ma ogni potente linguaggio ha di contro una pessima curva di apprendimento e quindi per semplificarne l’apprendimento e l’uso sul lungo periodo ci vengono in aiuto alcuni tools online.

Che cos’è una espressione regolare

Un’espressione regolare è una stringa che permette di configurare funzione regexp la quale permette di analizzare un testo in ingresso e verificare se rispetta o meno un certo pattern.

Ad esempio, supponiamo di voler verificare che la mail inserita sia o meno valida (del tipo testo@dominio.it). Per farlo è necessario definire un regexp che verifica il testi in punto analizzandone la presenza di una prima stringa alfanumerica, seguita dal simbolo “@” (chiocciola) seguito da una seconda coppia di stringhe alfanumeriche separate da un simbolo “.” (un punto).

L’espressione regolare così definita darà risultato positivo per un input tipo “domenico@domenicomonaco.it” mentre darà risultato negativo per un input del tipo “domenico#monaco”.

Migliori Tool Regexp online

Scrivere e verificare espressioni regolari

Probabilmente ne esistono molti altri, ma questi elencati di seguito sono quelli che preferisco, sia dal punto di vista delle funzionalità che dal punto di vista grafico, quest’ultimo da non ignorare quando si ha a che fare con pattern di testo complessi dove sia i colori che altri artifici grafici possono essere estremamente utili.

https://www.debuggex.com/

https://pythex.org/

Freformatter.com Regular Expression Tester

http://regex101.com

http://www.regexr.com

http://regexpal.com

https://txt2re.com

https://regexper.com/

L'articolo RegExp: editor online per espressioni regolari sembra essere il primo su Domenico Monaco.