5.1.1. —perdido, buscando el diseño ideal

Este post dista de ser introductorio. Con quien discutía sobre el tema no necesita algo así. El problema es como mostrar la versión extendida de ABBR al imprimir una página. Por suerte se puede contar con que en cada instancia, el @title está definido. Para hacerlo completo, vale aclarar que la hoja de estilos que utilice este código debería estar enlazada como <link href="foo.css" type="text/css" media="print">.

Abreviatura (forma completa)

abbr[title]:after {
  content: " (" attr(title) ")";
  }

Ejemplo 1

Forma completa (abreviatura)

abbr[title]:before {
  content: attr(title) " (";
  }
  
abbr[title]:after {
  content: ")"
  }

Ejemplo 2

Reemplazando todas las abreviaturas (sólo Opera)

abbr[title] {
  content: attr(title)
  }

Ejemplo 3

title=" "

En los tres casos anteriores hay que tener cuidado porque también seleccionaría los elementos cuyo @title sea simplemente un espacio en blanco.

Ejemplo 4

Reemplazando sólo la primera instancia

Un problema al que no le encuentro solución. Una de las opciones que propone WCAG version 1.0 es specify the expansion of each abbreviation or acronym in a document where it first occurs. La WCAG version 1.0 cambia en este aspecto, pero dado que hablamos de imprimir suena bastante útil. Aún así, no se me ocurre ninguna forma (fácil) usando sólo CSS. Si podemos contar con que el autor con una clase cada primera instancia de cada abreviatura se podría usar cualquier de las dos tecnicas anteriores reemplazando abbr[title] por .first (por suponer una clase).

Una solución posible con Javascript podría consistir en obtener dos arrays, uno que contenga todos los @title (ejemplo, foo y otro con todos los ABBR (ejemplo, var). Luego entrar en un loop que por cada @title recorra todos los ABBR hasta dar con alguno cuyo @title sea igual al actual dentro del loop, que sería cuando encuentre la primera instancia. En ese momento sólo bastaría con asignarle una clase especial y aplicar CSS.

forearch att-title in foo {
  i=1;
  while (var[i].getAttribute(title) != att-title) {
    i++;
  }
  var[i].className = first;
}

El código anterior es muy conceptual y mezcla lo poco que sé de Pascal, PHP y Javascript.

También sería útil utilizar para los enlaces lo propuesto en Improving Link Display for Print (y probablemente modificando ese script se pueda hacer lo mismo con las abreviaturas).