Escalar elemento de texto en relación con su contenedor principal-TextBlock

Vista prévia

Descripción

La biblioteca TextBlock JavaScript ajusta dinámicamente el tamaño de fuente, el peso de la fuente y la altura de línea para ajustar el texto dentro de su contenedor principal al cambiar el tamaño.

Install & Download:

# NPM
$ npm install textblock --save

Cómo utilizarlo:

Importe el bloque de texto o cargue directamente la versión compilada desde una red CDN.

<script src="https://unpkg.com/textblock"></script>

Cree un nuevo objeto TextBlock y defina los elementos de texto de destino:

Textblock([

{


target: ".element-1",

},

{


target: "#element-2"

}
]);

Pase los siguientes parámetros para personalizar el TextBlock.

• minWidth: min ancho del elemento Text
• maxWidth: ancho máximo del elemento de texto
• minWidthFontSize: min tamaño de fuente
• maxWidthFontSize: tamaño de fuente máximo
• minWidthLineHeight: altura de línea mínima
• maxWidthLineHeight: altura de línea máxima
• minWidthVariableGrade: min Peso de la fuente
• maxWidthVariableGrade: peso de la fuente máx
• unidades: em, PX, REM, etc

Textblock([

{


target: ".element-1",


minWidth: 400,


maxWidth: 800,


minWidthFontSize: 18,


maxWidthFontSize: 24,


minWidthLineHeight: 1.33,


maxWidthLineHeight: 1.2,


units: "px"

},

{


target: "#element-2",


minWidthFontSize: 1.8,


maxWidthFontSize: 2.4,


minWidthVariableGrade: 490,


maxWidthVariableGrade: 400,


container: "self"

}
]);