Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="description" content="line-grid-double">
<meta name="viewport" content="width=device-width">
<style>
html {
  font-size: 20px;
}
section {
  border: #00bcd1 1px solid;
  margin-bottom: 1em;
  display: inline-block;
  vertical-align: top;
}
h2 {
  font-size: inherit;
  margin: 0;
}
p {
  /*background: rgba(255, 204, 186, 0.5);*/
  /*outline: blue solid 1px;*/
  margin: 0;
  padding: 0;
}
.large {
  font-size: 180%;
}
.line-grid {
  line-height: 1.15;
  -webkit-line-grid: create;
  -webkit-line-snap: contain;
  /*-webkit-line-snap: baseline;*/
}
.line-grid > * {
  line-height: normal;
}
.line-box-contain-block {
  -webkit-line-box-contain: block;
}
.guide-line {
  background-size: 100% var(--guide-line);
  background-image: linear-gradient(to bottom, #00bcd1 1px, transparent 1px);
}
</style>
<body>
<section>
  <h2>Normal flow</h2>
  <p>Hello</p>
  <p>Hello</p>
  <p>اللغة العربية</p>
  <p>اللغة العربية</p>
  <p>རྒྱལ་སྤྱིར་བསྒྱུར་བའི་ལས་དོན།</p>
  <p>རྒྱལ་སྤྱིར་བསྒྱུར་བའི་ལས་དོན།</p>
  <p><span class=large>H</span>ello</p>
  <p><span class=large>H</span>ello</p>
</section>
<section class=line-grid>
  <h2>line-grid</h2>
  <p>Hello</p>
  <p>Hello</p>
  <p>اللغة العربية</p>
  <p>اللغة العربية</p>
  <p>རྒྱལ་སྤྱིར་བསྒྱུར་བའི་ལས་དོན།</p>
  <p>རྒྱལ་སྤྱིར་བསྒྱུར་བའི་ལས་དོན།</p>
  <p><span class=large>H</span>ello</p>
  <p><span class=large>H</span>ello</p>
</section>
<section class="line-grid line-box-contain-block">
  <h2>lg + lbc: block</h2>
  <p>Hello</p>
  <p>Hello</p>
  <p>اللغة العربية</p>
  <p>اللغة العربية</p>
  <p>རྒྱལ་སྤྱིར་བསྒྱུར་བའི་ལས་དོན།</p>
  <p>རྒྱལ་སྤྱིར་བསྒྱུར་བའི་ལས་དོན།</p>
  <p><span class=large>H</span>ello</p>
  <p><span class=large>H</span>ello</p>
</section>
<script>
function ComputeUsedLineHeight(element) {
  let block = document.createElement('div');
  block.textContent = '0';
  let style = block.style;
  style.position = 'absolute';
  style.lineHeight = 'inherit';
  element.appendChild(block);
  let height = block.scrollHeight;
  element.removeChild(block);
  return height;
}
​
function ShowGuideLines(element) {
  let height = ComputeUsedLineHeight(element);
  console.log(height);
  element.style.setProperty('--guide-line', `${height}px`);
  element.classList.add('guide-line');
}
​
for (let e of document.querySelectorAll('section')) {
  ShowGuideLines(e);
}
</script>
</body>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kojiishipro
0viewers