Bonjour à tous,
j'utilise une css pour effectuer des impressions et je m'appuie notamment sur le style writing-mode de IE pour passer en mode paysage. Cela fonctionne bien excepté pour les pages qui contiennent des formulaires où je constate un décalage vertical dû à la présence des inputs de type text.
Voici un exemple de code :
j'utilise une css pour effectuer des impressions et je m'appuie notamment sur le style writing-mode de IE pour passer en mode paysage. Cela fonctionne bien excepté pour les pages qui contiennent des formulaires où je constate un décalage vertical dû à la présence des inputs de type text.
Voici un exemple de code :
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-16">
</head>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen">
<link href="css/style_print.css" type="text/css" rel="stylesheet" media="print">
<body>
<form name="form" method="post" action="host.do">
<pre xml:space="preserve"><div id="DIV_PAGE_1"> SYS000 le <span class="display">16/12/05</span>
IDENTIFICATION UTILISATEUR
┌──────────────────────────────────────────────────────────────────────────────┐
│ │
│ Numero : <input type="text" class="text" name="value(WS_NUMERO)" id="WS_NUMERO" size="6" maxlength="6" value="" > <span class="display"> </span> │
│ <span class="display"> </span> │
│ Mot de passe : [<input type="password" class="text" name="value(WS_PASSWORD)" id="WS_PASSWORD" size="8" maxlength="8" value="" >] │
│ │
│ Site : <input type="text" class="text" name="value(WS_SS)" id="WS_SS" size="2" maxlength="2" value="00" ><input type="text" class="text" name="value(WS_AA)" id="WS_AA" size="2" maxlength="2" value="00" > <span class="display">XXXXXXX SUD.EST </span> │
│ <span class="display">S.S.E </span> │
│ │
│ Profil : <input type="text" class="text" name="value(WS_PROFIL)" id="WS_PROFIL" size="8" maxlength="8" value="" > │
│ │
│ Imprimantes Bon de preparation : <input type="text" class="text" name="value(WS_BP)" id="WS_BP" size="2" maxlength="2" value="01" > │
│ Bon de livraison : <input type="text" class="text" name="value(WS_BL)" id="WS_BL" size="2" maxlength="2" value="01" > │
│ Systeme : <input type="text" class="text" name="value(WS_LP)" id="WS_LP" size="2" maxlength="2" value="01" > │
│ │
│ Message : <span class="display"> </span> │
│ <span class="display"> </span> │
│ <span class="display"> </span> │
│ <span class="display"> </span> │
│ <span class="display"> </span> │
└──────────────────────────────────────────────────────────────────────────────┘
</div></pre>
<pre><div id="DIV_ERROR" xml:space="preserve"></div></pre>
<div id="DIV_CONTROLLER">
<object id="WebBrowser" width="0" height="0" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></object><table width="100%">
Une zone que je ne souhaite pas imprimer.
<a href="#" tabIndex="-1" onClick="document.WebBrowser.execWB(6,2)">Imprimer</a>
</div>
</form>
</body>
</html>
style.css
body {
font-family: Courier;
font-weight: normal;
font-size: 16px;
color: #000000;
line-height: 16px;
}
pre {
margin: 0;
padding: 0;
}
input.text {
font-family: Courier;
font-weight: normal;
font-size-adjust: 16px;
letter-spacing: 2px;
color: #000066;
background: #DDDDDD;
border: none;
width: expression(this.size * 10 + 'px');
}
.display {
color: #000066;
}
table {
margin: auto;
text-align: left;
}
#DIV_CONTROLLER {
position: absolute;
bottom: 10px;
}
#DIV_ERROR {
font-family: Courier;
font-weight: normal;
font-size: 16px;
color: red;
position: absolute;
bottom: 60px;
}
input.button {
font-family: Verdana;
border: 1px solid #999999;
width: 85px;
height: 40px;
}
style_print.css
body {
font-family: Courier;
font-weight: normal;
font-size: 16px;
line-height: 16px;
}
div {
writing-mode:tb-rl;
}
pre {
margin: 0;
padding: 0;
}
input.text {
font-family: Courier;
font-weight: normal;
font-size-adjust: 16px;
letter-spacing: 2px;
border: none;
width: expression(this.size * 10 + 'px');
writing-mode:tb-rl;
}
#DIV_CONTROLLER {
display: none;
}