Strip

by András Parditka

HTML

<div class="has-strip">
  <h1>
    Some Title
  </h1>
  <p>
    Earum facere; nesciunt ipsam ratione ipsum nesciunt quibusdam libero saepe rerum cum cumque. Porro quam illo amet soluta porro, Suscipit maiores – soluta eos magnam provident Quia-sunt rem nisi amet Numquam quasi ipsa – eius provident libero laboriosam adipisci. Aspernatur animi, nemo cum odit. Libero maxime-autem. Ipsum neque blanditiis nemo neque numquam eos facilis, accusantium incidunt ab repellat. Iste labore, sapiente repellendus-dignissimos – soluta ullam adipisci voluptatum. Quisquam laudantium earum nesciunt odio necessitatibus fuga ducimus excepturi pariatur totam.
  </p>
  <p>
    Maiores nisi eligendi sit suscipit saepe qui odio ipsa ratione odit illo ducimus modi adipisci ex totam. Asperiores in sint minus, nihil odio. Ad tempore aspernatur animi similique praesentium ipsam. A perspiciatis, deserunt possimus optio nobis sunt odit non et rerum-maxime facere aspernatur commodi inventore provident odio laudantium. Ut saepe, placeat dignissimos – tempora eum quidem expedita eveniet temporibus-excepturi, neque repellat. Quae quas expedita harum ad cupiditate laudantium libero dignissimos atque assumenda Consectetur, sunt neque atque in possimus beatae suscipit similique. Optio exercitationem earum provident, accusantium aliquid ipsum assumenda sapiente eligendi-in repellendus pariatur – sequi impedit.
  </p>
  <p>
    Maiores nisi eligendi sit suscipit saepe qui odio ipsa ratione odit illo ducimus modi adipisci ex totam. Asperiores in sint minus, nihil odio. Ad tempore aspernatur animi similique praesentium ipsam. A perspiciatis, deserunt possimus optio nobis sunt odit non et rerum-maxime facere aspernatur commodi inventore provident odio laudantium. Ut saepe, placeat dignissimos – tempora eum quidem expedita eveniet temporibus-excepturi, neque repellat. Quae quas expedita harum ad cupiditate laudantium libero dignissimos atque assumenda Consectetur, sunt neque atque in possimus beatae...

CSS

html,
body
{
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.has-strip
{
  position: relative;
  overflow: hidden;
  padding-left: 40px;
  padding-top: 40px;
}
.strip
{
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
}
.strip.vertical
{
  height: calc(100% - 30px);
  top: 30px;
}
.strip.horizontal
{
  width: 100%;
}

JavaScript

let stripsJq = jQuery('.has-strip')
for (let i = 0; i < stripsJq.length; i++) {
  processStrip(stripsJq.eq(i))
}

function processStrip(jq) {
  let stripFont = "font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 14px; line-height: 20px; font-weight: bold; fill: white;"
  let bgStyle = "fill: #0066cc;"
  let title = jq.find('h1').text()
  let titleSizeJq = jQuery('<div style="position: absolute; top: -1000px; left: -1000px; ' + stripFont + '">').prependTo('body')
  titleSizeJq.text(title)
  let titleSize = titleSizeJq.width()
  titleSizeJq.remove()
  let inset = 10
  let size = titleSize + inset * 2

  let svgV =
    '<svg viewBox="0 0 30 ' + size + '" width="30" height="' + size + '" xmlns="http://www.w3.org/2000/svg">' +
    '  <rect x="0" y="0" width="30" height="' + size + '" style="' + bgStyle + '"/>' +
    '  <text x="0" y="0" style="' + stripFont + '" transform="rotate(90 0,0) translate(' + inset + ',-11)">' +
    '    ' + title + '' +
    '  </text>' +
    '</svg>'
  let stripV = jQuery('<div class="strip vertical">').prependTo(jq)
  stripV.css('background-image', 'url(data:image/svg+xml;base64,' + btoa(svgV) + ')')

  let svgH =
    '  <svg viewBox="0 0 ' + size + ' 30" width="' + size + '" height="30" xmlns="http://www.w3.org/2000/svg">' +
    '    <rect x="0" y="0" width="' + size + '" height="30" style="' + bgStyle + '"/>' +
    '    <text x="0" y="0" style="' + stripFont + '" transform="translate(' + inset + ',19)">' +
    '      ' + title + '' +
    '    </text>' +
    '  </svg>'
  let stripH = jQuery('<div class="strip horizontal">').prependTo(jq)
  stripH.css('background-image', 'url(data:image/svg+xml;base64,' + btoa(svgH) + ')')
}