stevegt/template.html

## template.html
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style>
    body {
      font-family: Arial;
    }

    table {
      border: 0.35mm solid black; /* line weight based on DIN 15 */
      padding: 0;
      border-bottom: 0;
      border-right: 0;
      border-spacing: 0mm;
    }

    td {
      border: 0.25mm solid black; /* line weight based on DIN 15 */
      border-top: 0;
      border-left: 0;

      overflow: hidden;
      /* display: inline-block; */
      white-space: nowrap;
      font-size: 2.8mm;
    }

    img {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      max-height: 100%;
      max-width: 100%;
    }

    svg {
      max-width: 95%;
      max-height: 100%;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }

    #frame {
      position: relative;
      border: 0.35mm solid black
    }

    /* Canvas size based on DIN 823 / DIN 6771 / EN ISO 5457 */

    .A4 { /* portrait */
      width: 180mm;
      height: 277mm;
    }

    .A3 { /* landscape */
      width: 390mm;
      height: 277mm;
    }

    .A2 { /* landscape */
      width: 564mm;
      height: 400mm;
    }

    .US_letter, .sheetsize_default {
      width: 190mm;
      height: 250mm;
    }

    .US_letter_landscape {
      width: 250mm;
      height: 190mm;
    }

    #titleblock {
      position: absolute;
      bottom: 0mm;
      right: -0mm;
    }

    #titleblock table {
      width: 120mm;
      height: 38.25mm;
    }

    #titleblock tr, #bom tr {
      height: 4.25mm;
    }

    .A4 #bom { /* BOM on top of title block */
      position: absolute;
      bottom: 38.25mm;
      right: 0;
    }

    .A3 #bom, .A2 #bom { /* BOM to the left of title block */
      position: absolute;
      bottom: 0mm;
      left: 0mm;
    }

    #bom table {
      width:180mm
    }

    #diagram {
      position: relative;
      top: 0;
      left: 0;
      max-width: 100%;
      height: calc(100% - 5 * 4.25mm);
      /* TODO: auto-adapt to height of title block + BOM table;
               BOM table might be above (A4) or to the left (A3 and larger) of the title block */
      text-align: center;
      vertical-align: middle;
    }

    .name {
      width: 16mm;
    }

    .date {
      width: 10mm;
    }

    .revno {
      text-align: center;
      width: 6mm;
    }

    .changelog {
      width: 22mm;
    }

    .process {
      width: 18mm;
    }

    .title {
      width: 82mm;
      font-size: 5mm;
      text-align: center;
      white-space: normal;
    }

    .company {
      font-size: 4mm;
      text-align: center;
      white-space: normal;
    }

    .partno {
      font-size: 5mm;
      text-align: center;
      white-space: normal;
    }

    .sheetno {
      width: 12.75mm;
      text-align: center;
    }

  </style>
  <style type="text/css" media="print">

    @page {
      size: landscape;
      margin: 0;
    }

    /* TODO: auto-adjust based on portrait (larger margin on left) or landscape (larger margin on top) */
    #page {
      margin: 13mm;
      margin-left: 13mm;
    }

  </style>
</head>
<body>
  <div id="page">
    <div id="frame" class="sheetsize_default">

      <div id="diagram">
        <!-- diagram -->
      </div>

      <div id="titleblock">
        <table>
          <tr>
            <td class="title" colspan="3"><!-- part_title --></td>
          </tr>
          <tr>
            <td class="partno" colspan="3"><!-- part_number --></td>
          </tr>
          <tr>
            <td class="company" colspan="2"><!-- company --></td>
            <td class="sheetno"><!-- sheet_current --> of <!-- sheet_total --></td>
          </tr>
        </table>
      </div> <!-- /titleblock -->

    </div> <!-- /frame -->
  </div> <!-- /page -->
</body>
</html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<style>
	body {
	font-family: Arial;
	}

	table {
	border: 0.35mm solid black; /* line weight based on DIN 15 */
	padding: 0;
	border-bottom: 0;
	border-right: 0;
	border-spacing: 0mm;
	}

	td {
	border: 0.25mm solid black; /* line weight based on DIN 15 */
	border-top: 0;
	border-left: 0;

	overflow: hidden;
	/* display: inline-block; */
	white-space: nowrap;
	font-size: 2.8mm;
	}

	img {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	max-height: 100%;
	max-width: 100%;
	}

	svg {
	max-width: 95%;
	max-height: 100%;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	}

	#frame {
	position: relative;
	border: 0.35mm solid black
	}

	/* Canvas size based on DIN 823 / DIN 6771 / EN ISO 5457 */

	.A4 { /* portrait */
	width: 180mm;
	height: 277mm;
	}

	.A3 { /* landscape */
	width: 390mm;
	height: 277mm;
	}

	.A2 { /* landscape */
	width: 564mm;
	height: 400mm;
	}

	.US_letter, .sheetsize_default {
	width: 190mm;
	height: 250mm;
	}

	.US_letter_landscape {
	width: 250mm;
	height: 190mm;
	}

	#titleblock {
	position: absolute;
	bottom: 0mm;
	right: -0mm;
	}

	#titleblock table {
	width: 120mm;
	height: 38.25mm;
	}

	#titleblock tr, #bom tr {
	height: 4.25mm;
	}

	.A4 #bom { /* BOM on top of title block */
	position: absolute;
	bottom: 38.25mm;
	right: 0;
	}

	.A3 #bom, .A2 #bom { /* BOM to the left of title block */
	position: absolute;
	bottom: 0mm;
	left: 0mm;
	}

	#bom table {
	width:180mm
	}

	#diagram {
	position: relative;
	top: 0;
	left: 0;
	max-width: 100%;
	height: calc(100% - 5 * 4.25mm);
	/* TODO: auto-adapt to height of title block + BOM table;
	BOM table might be above (A4) or to the left (A3 and larger) of the title block */
	text-align: center;
	vertical-align: middle;
	}

	.name {
	width: 16mm;
	}

	.date {
	width: 10mm;
	}

	.revno {
	text-align: center;
	width: 6mm;
	}

	.changelog {
	width: 22mm;
	}

	.process {
	width: 18mm;
	}

	.title {
	width: 82mm;
	font-size: 5mm;
	text-align: center;
	white-space: normal;
	}

	.company {
	font-size: 4mm;
	text-align: center;
	white-space: normal;
	}

	.partno {
	font-size: 5mm;
	text-align: center;
	white-space: normal;
	}

	.sheetno {
	width: 12.75mm;
	text-align: center;
	}

	</style>
	<style type="text/css" media="print">

	@page {
	size: landscape;
	margin: 0;
	}

	/* TODO: auto-adjust based on portrait (larger margin on left) or landscape (larger margin on top) */
	#page {
	margin: 13mm;
	margin-left: 13mm;
	}

	</style>
	</head>
	<body>
	<div id="page">
	<div id="frame" class="sheetsize_default">

	<div id="diagram">
	<!-- diagram -->
	</div>

	<div id="titleblock">
	<table>
	<tr>
	<td class="title" colspan="3"><!-- part_title --></td>
	</tr>
	<tr>
	<td class="partno" colspan="3"><!-- part_number --></td>
	</tr>
	<tr>
	<td class="company" colspan="2"><!-- company --></td>
	<td class="sheetno"><!-- sheet_current --> of <!-- sheet_total --></td>
	</tr>
	</table>
	</div> <!-- /titleblock -->

	</div> <!-- /frame -->
	</div> <!-- /page -->
	</body>
	</html>