SCR34Calcular el tamaño y la posición de forma que se escalen con el tamaño del texto

Aplicabilidad

Scripts del lado del cliente.

Descripción

El objetivo de esta técnica es calcular el tamaño y la posición de los elementos de forma que se escalen adecuadamente cuando se escala el tamaño del texto.

En JavaScript hay cuatro propiedades que ayudan a determinar el tamaño y la posición de los elementos:

• offsetHeight (la altura del elemento en píxeles)
• offsetWidth (la anchura del elemento en píxeles)
• offsetLeft (la distancia del elemento al borde izquierdo de su elemento padre (offsetParent) en píxeles)
• offsetTop (la distancia del elemento al borde superior de su elemento padre (offsetParent) en píxeles)

Calcular la altura y la anchura con offsetHeight y offsetWidth es sencillo, pero al calcular la posición izquierda y superior de un objeto como valores absolutos es necesario tener en cuenta el elemento padre. La función calculatePosition que se muestra a continuación recorre todos los nodos padre de un elemento para obtener el valor final. La función recibe dos parámetros: objElement (el nombre del elemento en cuestión) y la propiedad de desplazamiento (offsetLeft u offsetTop):

Ejemplos

function calculatePosition(objElement, strOffset {
  var iOffset = 0;
	if (objElement.offsetParent) {
    do {
      iOffset += objElement[strOffset];
      objElement = objElement.offsetParent;
    } while (objElement);
  }
  return iOffset;
}

// Get a reference object
var objReference = document.getElementById('refobject');
// Get the object to be aligned
var objAlign = document.getElementById('lineup');
objAlign.style.position = 'absolute';
objAlign.style.left = calculatePosition(objReference, 'offsetLeft') + 'px';
objAlign.style.top = calculatePosition(objReference, 'offsetTop')
 + objReference.offsetHeight + 'px'; 

Pruebas

Técnicas relacionadas

• C12: Usar porcentajes para el tamaño de la fuente
• C14: Usar unidades em para el tamaño de la fuente
• C17: Escalar los elementos de formulario que contienen texto
• C20: Usar medidas relativas para fijar la anchura de las columnas de modo que las líneas tengan de media 80 caracteres o menos cuando se cambia el tamaño del navegador
• C24: Usar valores porcentuales en CSS para la anchura de los contenedores
• G206: Proporcionar opciones dentro del contenido para cambiar a una disposición que no requiera desplazamiento horizontal para leer una línea de texto