Positioning Flag Note 2

by pmamode

HTML

<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>


<table>
  <tr>
    <td style="width:50px;">
      <div style="position:relative; height:100%; text-align:center; background-color:#87CEFA; padding-top: 0px;">
        1.
        <div style="position:absolute; top:10px; left:20px; background: yellow;">
          X
        </div>

      </div>
    </td>
    <td>
      <div style="position:relative; height: 100%;  text-align:left; background-color:#87CEFA; padding-top: 0px;">
        <div id="bar" style="white-space:pre;"></div>
        <div style="position:absolute; top:10px; left:20px; background: yellow;">
          X<sup>X</sup>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td style="width:50px;">
      <div style="position:relative; height:100%; text-align:center; background-color:#87CEFA; padding-top: 0px;">
        1.


      </div>
    </td>
    <td>
      <div style="position:relative; height: 100%;  text-align:left; background-color:#87CEFA; padding-top: 0px;">
        <div id="bar" style="white-space:pre;">REFERENCE DRAWINGS&#13;&#10;&nbsp;&nbsp;&nbsp;&nbsp;04646001&nbsp;&nbsp;&nbsp;&nbsp;ASSEMBLY&#13;&#10;&nbsp;&nbsp;&nbsp;&nbsp;04646010&nbsp;&nbsp;&nbsp;&nbsp;BLOCK DIAGRAM&#13;&#10;&nbsp;&nbsp;&nbsp;&nbsp;04646020&nbsp;&nbsp;&nbsp;&nbsp;CUSTOMER
          CONNECTION DIAGRAM</div>
      </div>
    </td>
  </tr>
  <tr>
    <td style="width:50px;">
      <div style="position:relative; height:100%; text-align:center; background-color:#87CEFA; padding-top: 0px;">1.
      </div>
    </td>
    <td>
      <div style="position:relative; height: 100%;  text-align:left; background-color:#87CEFA; padding-top: 0px;">
        <div id="bar" style="white-space:pre;">XXXXXXXXXXXX&#13;&#10;XXXXXXXXXX<div class="content">XX<span class="overlay"><svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="33px" height="28.58px" viewBox="0...

CSS

body,
pre {
  font-family: 'Inconsolata', sans-serif;
  font-size: 16px;
}

table,
tr {
  height: 100%;
  border-collapse: collapse;
  width: 100%;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}

td {
  border: 1px solid #ddd;
}

.leftcell {
  width: 80px;
  text-align: center;
}

.rightcell {
  padding-top: 14px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
}

.table {
  display: table;
}

.cell {
  display: table-cell;
}

.table,
.cell {
  height: 100%;
}

.content {
  display: inline-block;
  position: relative;
  color: red;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  color: green;
  top: -12px;
  left: -8.5px;
}

.overlay2 {
  width: 100%;
  height: 100%;
  position: absolute;
  color: green;
  top: -12px;
  left: -12.5px;
}

JavaScript

var textarea = document.createElement("textarea");
textarea.value = "\n";
var eol = textarea.value.replace(/\r\n/, "\r");

var string = "REFERENCE DRAWINGS" + "\r\n" + "    04646001    ASSEMBLY" + "\r\n" + "    04646010    BLOCK DIAGRAM" + "\r\n" + "    04646020    CUSTOMER CONNECTION DIAGRAM";
var text = document.createTextNode(string);
document.getElementById('bar').appendChild(text);