Taille du texte de format html pour correspondre à son contenu

Question

J'ai demandé quelques other questions ici à propos de ce système, donc je vais essayer d'éviter de répéter beaucoup de détails.

La version courte est que j'ai beaucoup de pages html, chacune avec un formulaire qui accepte l'entrée, mais n'enregistre jamais l'entrée n'importe où - elles sont seulement imprimées pour l'envoi. Un développeur précédemment qui n'avait jamais entendu parler de @media print a fait le travail initial sur la plupart d'entre eux, et donc il est venu avec ... impair solutions pour cacher les zones de texte laids sur la page imprimée, résultant généralement en deux copies complètement séparées de presque le même html. Malheureusement, cela a brisé le bouton de retour dans de nombreux cas, et maintenant je dois revenir en arrière et les réparer. Dans certains cas, ces formulaires html sont vraiment des lettres types, avec des entrées de texte au milieu du texte. Je peux styler les entrées de texte afin que la boîte ne s'affiche pas, mais elles sont toujours de la mauvaise taille. Cela se traduit par un tas d'espaces extra laids où il n'appartient pas. Comment peut-on adapter les entrées au texte saisi par l'utilisateur? Le meilleur que je peux trouver à l'heure actuelle est d'avoir un < span caché à côté de chaque entrée qui est stylée pour montrer au lieu de l'entrée lors de l'impression, et utiliser javascript pour le garder en synchronisation. Mais c'est moche. Je cherche quelque chose de mieux.

Mise à jour:
La plupart de nos utilisateurs sont encore IE6, mais nous avons quelques IE7 et Firefox là-bas.

Update2:
Je repensés cela un peu d'utiliser une étiquette plutôt que d'une portée. Je maintiens la relation en utilisant l'attribut for du libellé. Voir this question pour mon code final.

Answer 1

L'idée de portée n'est pas si mauvaise. Avec une bibliothèque Javascript comme jquery, une seule fonction Javascript de 1-2 lignes pourrait remplacer dynamiquement tous les tags appropriés <input> avec <span>..</span>. Vous n'auriez pas à entrer dans l'une des travées vous-même.

Dans le code pseudo-javascript vraiment rude avec jquery ce serait quelque chose comme:

function replaceInputsOnSomeButtonClick() { 
// Find all inputs, wrap value with span tag, remove the input tag 
$("input").text().wrap("<span>").remove(); 
} 

Answer 2

CSS n'a pas réponse à celui-ci. Les entrées sont des "éléments remplacés" - une boîte noire en CSS.

input {content:attr(value)} ne fonctionne que pour la valeur initiale en HTML et ne reflétera aucune modification ultérieure.

Alors le meilleur que vous pouvez obtenir est moins laid Javascript.

for(var i=0; i < form.elements.length; i++) 
{ 
    var input = form.elements[i]; 
    if (input.type != 'text') continue; 

    var span = document.createElement('span'); 
    input.parentNode.insertBefore(span,input); 

    span.className = 'show-in-print'; 
    input.className = 'hide-in-print'; 

    input.onchange = (function(span){ // trick to preserve current value of span 
     return function() 
     { 
     if (span.firstChild) span.removeChild(span.firstChild); 
     span.appendChild(document.createTextNode(this.value)); 
     } 
    })(span); 
}