<h1>CSS attempts at text with inline skewed background</h1>
<p class="gray">Update: Some corrections and elaborations on 18/02/2019.</p>

<h2>Notes:</h2>
<ul class="gray">
    <li>Using skew is only rendered if the item is display block or inline-block.</li>
    <li>Some of these look the same on a wide viewport but fail differently as the viewport width is decreased.</li>
</ul>

<section>
<h2>Attempt 1 - only use 1 element</h2>
<ul>
  <li>🤷‍♀️ Text will be skewed the same as the background. Don't know how to straighten the text, if straight text is desired.</li>
  <li>⚠️ If multiline, preceding and following text is ejected to the next line even if there is space for it inline.</li>
  <li>✅ Text always stays within background.</li>
</ul>
<p class="attempt-1">Some text with some <em>skewed words</em> in the middle.</p>
<p class="attempt-1">Lorem ipsum dolor sit amet, consectetur <em>adipisicing elit. Assumenda, eius consequuntur. Culpa possimus rem quibusdam odit facilis dolorum mollitia, voluptates</em> sapiente dolor doloribus quos nam quasi, repellendus blanditiis saepe fuga.</p>
</section>
  
<section>
<h2>Attempt 2 - 1 element and a pseudo element</h2>
<ul>
  <li>⚠️ If multiline, preceding and following text is ejected to the next line.</li>
  <li>⚠️ Multi line text like this won't always sit on the background properly or will escape outside the background.</li>
  <li>⚠️ Some weird z-index to get the background behind the text.</li>
</ul>
<p class="attempt-2">Some text with some <em>skewed words</em> in the middle.</p>
<p class="attempt-2">Lorem ipsum dolor sit amet, consectetur <em>adipisicing elit. Assumenda, eius consequuntur. Culpa possimus rem quibusdam odit facilis dolorum mollitia, voluptates</em> sapiente dolor doloribus quos nam quasi, repellendus blanditiis saepe fuga.</p></section>
  
<section>
<h2>Attempt 3 - 1 element, box-decoration-break: clone</h2>
<ul>
  <li>🛑 No skew - seems to be ignored on inline elements (in Webkit at least).</li>
  <li>✅ Multi line consistency</li>
  <li>✅ No multiline following text eject to next line.</li>
  <li>⚠️ If multiline, following lines can cover the decenders of previous line's characters.</li>
  <li>⚠️ Poor multiline left-to-right gradient background color; visible lines in most cases.</li>
</ul>
<p class="attempt-3">Some text with some <em>skewed words</em> in the middle.</p>
<p class="attempt-3">Lorem ipsum dolor sit amet, consectetur <em>adipisicing elit. Assumenda, eius consequuntur. Culpa possimus rem quibusdam odit facilis dolorum mollitia, voluptates</em> sapiente dolor doloribus quos nam quasi, repellendus blanditiis saepe fuga.</p></section>
  
<section>
<h2>Attempt 4 - double wrapping elements</h2>
<ul>
  <li>✅ Avoids pseudo element z-index issues.</li>
  <li>🤷‍♂️ Don't know if double skewing elements causes subtle text rendering changes</li>
  <li>⚠️ If multiline, preceding and following text is ejected to the next line.</li>
</ul>
<p class="attempt-4">Some text with some <em><span>skewed words</span></em> in the middle.</p>
<p class="attempt-4">Lorem ipsum dolor sit amet, consectetur <em><span>adipisicing elit. Assumenda, eius consequuntur. Culpa possimus rem quibusdam odit facilis dolorum mollitia, voluptates</span></em> sapiente dolor doloribus quos nam quasi, repellendus blanditiis saepe fuga.</p>
</section>
  
<section>
<h2>Attempt 5 - double pseudo elements at ends</h2>
<ul>
  <li>⚠️ Poor multiline rendering. Pseudo elements don't always line up nicely. Can cause sharp corners or gaps.</li>
  <li>⚠️ If multiline, preceding and following text is ejected to the next line.</li>
</ul>
<p class="attempt-5">Some text with some <em>skewed words</em> in the middle.</p>
<p class="attempt-5">Lorem ipsum dolor sit amet, consectetur <em>adipisicing elit. Assumenda, eius consequuntur. Culpa possimus rem quibusdam odit facilis dolorum mollitia, voluptates</em> sapiente dolor doloribus quos nam quasi, repellendus blanditiis saepe fuga.</p>
</section>

$c1: mediumturquoise;
$c2: mediumpurple;
$g1: linear-gradient(to right, $c1, $c2);

.attempt-1{
  font-size: 1.5rem;
  
  em{
    font-style: normal;
    padding: 0.1em 0.3em;
    border-radius: 0.2em;
    position: relative;
    background: white;
    background: $g1;
    transform: skewX(-10deg);
    display: inline-block;
  }
}

.attempt-2{
  font-size: 1.5rem;
  position: relative;
  z-index: 0;
  
  em{
    font-style: normal;
    padding: 0.1em 0.3em;
    position: relative;
    display: inline-block;
    
    &::after{
      content: "";
      position: absolute;
      background: white;
      background: $g1;
      top:0;
      left:0;
      right:0;
      bottom:0;
      z-index: -1;
      border-radius: 0.2em;
      transform: skewX(-10deg);
    }
  }
}

.attempt-3{
  font-size: 1.5rem;
  
  em{
    font-style: normal;
    position: relative;
    display: inline;
    box-decoration-break: clone;
    padding: 0.1em 0.2em;
    border-radius: 0.2em;
    background: white;
    background: $g1;
    transform: skewX(-10deg); // this is ignored on inline elements, in Webkit at least.
  }
}

.attempt-4{
  font-size: 1.5rem;
  
  em{
    display: inline-block;
    font-style: normal;
    padding: 0.1em 0.3em;
    border-radius: 0.2em;
    position: relative;
    background: white;
    background: $g1;
    transform: skewX(-10deg);
    
    span{
      display: inline-block;
      transform: skewX(10deg);
    }
  }
}

.attempt-5{
  font-size: 1.5rem;
  position: relative;
  z-index: 0;
  
  em{
    font-style: normal;
    padding: 0.1em 0;
    margin-left: 0.5em;
    margin-right: 0.5em;
    position: relative;
    background: white;
    background: $g1;
    display: inline-block;
    
    &::before,
    &::after{
      content: "";
      border-radius: 0.2em;
      background: white;
      display: inline-block;
      width: 1em;
      transform: skewX(-10deg);
      position: absolute;
      z-index: -1;
    }
    
    &::before{
      top: 0;
      bottom: 0;
      left: -0.3em;
      background: $c1;
    }
    
    &::after{
      top: 0;
      bottom: 0;
      right: -0.3em;
      background: $c2;
    }
  }
}




/* Setup CSS unrelated to core task. */

body{
  background: #ccc;
  background: linear-gradient(to right, #abd, #bce);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 300;
  width: min(90vw, 600px);
  margin-left: auto;
  margin-right: auto;
  margin-top: 5rem;
  margin-bottom: 5rem;
}

section {
  background: rgba(white,.6);
  padding: 2rem;
  margin: 2rem auto;
  border-radius: 0.3rem;
  border: 1px solid rgba(white,.2);
}

h1,
h2{
  font-weight: 400;
}

.gray {
  color: #666;
}

li{
  margin-bottom: 0.5em;  
}