Log in / Register

Forum › How do I...?

Position in Percent

pestafo
To display gauges with their values I tried to use 'position:relative' together with 'left:-<GaugeLen>%'. That works fine in IE Browser but Prince seems to ignore percent values.

If Prince does not support percent in position is there an other solution to position the values to the left (negative values) or right (positive values) of the gauges?

Example:
<html>
  <head>
    <title>Gauge</title>
    <style type="text/css">
p {
	font-size: 6pt;
	margin:0;
	padding:0;
}
	
.gauge {
	width:100%;
}

.gauge-positive,
.gauge-negative {
	width: 50%;
}
 
.gauge-positive-gauge,
.gauge-negative-gauge {
	border: 1px solid grey;
	height: 6pt;
	margin: 0;
	padding: 0;
}

.gauge-positive-gauge {
	background-color: green;
}
.gauge-negative-gauge {
	background-color: red;
}

.gauge-negative-value,
.gauge-positive-value {
	height: 6pt;
	font-size: 6pt;
	margin: 0;
	padding: 0;
}
.gauge-negative-value {
	direction:rtl;
}

tr {
	margin:0;
	padding:0;
}
td { 
	margin:0;
	padding:0;
	border: 1px dotted lightgrey;
}


</style>
  </head>
  <body style="font-size:14pt;">

	
  
	<table style="width:100mm;border: 1px solid black; font-size: 6pt;">
		<tr>
			<td style="width:1px;"><p style="visibility:hidden;">-100.0</p></td>
			<td>
				<div class="gauge">
					<div class="gauge-positive" style="float:right;font-size:1px;">&nbsp;</div>
					<div class="gauge-negative" style="float:right;margin-bottom:-1em;text-align:right;">
						<div class="gauge-negative-gauge" style="margin-left:0%;width: 100%;font-size:1px;">&nbsp;</div>
						<div class="gauge-negative-value" style="position:relative;top:-1em;right:100%;">100.0-</div>
					</div>
				</div>
			</td>
			<td style="width:1px;"><p style="visibility:hidden;">-100.0</p></td>
		</tr>
		<tr>
			<td><p style="visibility:hidden;">-25.0</p></td>
			<td>
				<div class="gauge">
					<div class="gauge-positive" style="float:right;font-size:1px;">&nbsp;</div>
					<div class="gauge-negative" style="float:right;margin-bottom:-1em;text-align:right;">
						<div class="gauge-negative-gauge" style="margin-left:75%;width: 25%;font-size:1px;"></div>
						<div class="gauge-negative-value" style="position:relative;top:-1em;right:25%;">25.0-</div>
					</div>
				</div>
			</td>
			<td><p style="visibility:hidden;">-25.0</p></td>
		</tr>
		<tr>
			<td style="width:1px;"><p style="visibility:hidden;">100.0</p></td>
			<td>
				<div class="gauge">
					<div class="gauge-negative" style="float:left;font-size:1px;">&nbsp;</div>
					<div class="gauge-positive" style="float:left;margin-bottom:-1em;">
						<div class="gauge-positive-gauge" style="width: 100%;font-size:1px;">&nbsp;</div>
						<div class="gauge-positive-value" style="position:relative;top:-1em;left:100%;">100.0</div>
					</div>
				</div>
			</td>
			<td><p style="visibility:hidden;">100.0</p></td>
		</tr>
		<tr>
			<td><p style="visibility:hidden;">15.0</p></td>
			<td>
				<div class="gauge">
					<div class="gauge-negative" style="float:left;font-size:1px;">&nbsp;</div>
					<div class="gauge-positive" style="float:left;margin-bottom:-1em;">
						<div class="gauge-positive-gauge" style="width: 15%;font-size:1px;">&nbsp;</div>
						<div class="gauge-positive-value" style="position:relative;top:-1em;left:15%;">15.0</div>
					</div>
				</div>
			</td>
			<td><p style="visibility:hidden;">15.0</p></td>
		</tr>
	</table>

  </body>
 </html>
pestafo
I found a solution by using percent values together with margins. The question why Prince does not support percent values for positions (left, top, ...) remains open.

A problem with the use of margins is, that when the negative gauge fills the whole area the label can only be moved directly to the gauges border. A padding then has no effect. This would eventually be better when positioning the label via 'right:100%' in this case.

My solution
<html>
  <head>
    <title>Gauge</title>
    <style type="text/css">
p {
	font-size: 6pt;
	margin:0;
	padding:0;
}
	
.gauge {
	width:100%;
}

.gauge-positive,
.gauge-negative {
	width: 50%;
}
 
.gauge-positive-gauge,
.gauge-negative-gauge {
	/*border: 1px solid grey;*/
	height: 6pt;
	margin: 0;
	padding: 0;
}

.gauge-positive-gauge {
	background-color: green;
}
.gauge-negative-gauge {
	background-color: red;
}

.gauge-negative-value,
.gauge-positive-value {
	height: 6pt;
	font-size: 6pt;
	margin: 0;
	padding: 0;
}
.gauge-negative-value {
	direction:rtl;
}

.gauge-positive-value {
}

tr {
	margin:0;
	padding:0;
	border: 1px dotted lightgrey;
}
td { 
	margin:0;
	padding:0;
/*	border: 1px dotted lightgrey;*/
}


</style>
  </head>
  <body style="font-size:14pt;">

	
  
	<table style="border-collapse:collapse;width:100mm;border: 1px solid lightgrey; font-size: 6pt;">
		<tr>
			<td style="width:1px;"><p style="visibility:hidden;">&nbsp;-100.0</p></td>
			<td>
				<div class="gauge">
					<div class="gauge-positive" style="float:right;font-size:1px;">&nbsp;</div>
					<div class="gauge-negative" style="float:right;margin-bottom:-1em;text-align:right;">
						<div class="gauge-negative-gauge" style="margin-left:0%;width: 100%;font-size:1px;"></div>
						<div class="gauge-negative-value" style="position:relative;margin-right:100%;top:-1em;">&nbsp;100.0-</div>
					</div>
				</div>
			</td>
			<td style="width:1px;"><p style="visibility:hidden;">&nbsp;-100.00</p></td>
		</tr>
		<tr>
			<td><p style="visibility:hidden;">-25.0</p></td>
			<td>
				<div class="gauge">
					<div class="gauge-positive" style="float:right;font-size:1px;">&nbsp;</div>
					<div class="gauge-negative" style="float:right;margin-bottom:-1em;text-align:right;">
						<div class="gauge-negative-gauge" style="margin-left:75%;width: 25%;font-size:1px;"></div>
						<div class="gauge-negative-value" style="position:relative;top:-1em;margin-right:25%;">&nbsp;25.0-</div>
					</div>
				</div>
			</td>
			<td><p style="visibility:hidden;">-25.0</p></td>
		</tr>
		<tr>
			<td style="width:1px;"><p style="visibility:hidden;">&nbsp;100.0</p></td>
			<td>
				<div class="gauge">
					<div class="gauge-negative" style="float:left;font-size:1px;">&nbsp;</div>
					<div class="gauge-positive" style="float:left;margin-bottom:-1em;">
						<div class="gauge-positive-gauge" style="width: 100%;font-size:1px;">&nbsp;</div>
						<div class="gauge-positive-value" style="position:relative;top:-1em;margin-left:100%;">&nbsp;100.0</div>
					</div>
				</div>
			</td>
			<td><p style="visibility:hidden;">&nbsp;100.0</p></td>
		</tr>
		<tr>
			<td><p style="visibility:hidden;">&nbsp;15.0</p></td>
			<td>
				<div class="gauge">
					<div class="gauge-negative" style="float:left;font-size:1px;">&nbsp;</div>
					<div class="gauge-positive" style="float:left;margin-bottom:-1em;">
						<div class="gauge-positive-gauge" style="width: 15%;font-size:1px;">&nbsp;</div>
						<div class="gauge-positive-value" style="position:relative;top:-1em;margin-left:15%;">&nbsp;15.0</div>
					</div>
				</div>
			</td>
			<td><p style="visibility:hidden;">&nbsp;15.0</p></td>
		</tr>
	</table>

  </body>
 </html>