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>
<style>
#container {
  font-family: 'Yu Gothic', 'YuGothic', 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-size: 20px;
  display: grid;
  gap: .5em;
  grid-template-columns: 1fr 1fr;
  width: 26em;
  overflow: hidden;
  resize: horizontal;
}
.test {
  border: 1px solid blue;
  -webkit-user-modify: read-write;
}
#normal {
  text-spacing-trim: normal;
  grid-column: 1;
  grid-row: 2;
}
#space-all {
  text-spacing-trim: space-all;
  grid-column: 1;
  grid-row: 1;
}
#trim-start {
  text-spacing-trim: trim-start;
  grid-column: 2;
  grid-row: 2;
}
#space-first {
  text-spacing-trim: space-first;
}
label {
  display: block;
  font-size: 80%;
}
</style>
​
<div id="container">
  <div id="normal">
    <label>normal (Chrome 123 default)</label>
    <div class="test">
      （東）、【「（東）」】。<br>
      「東」「東」「東」東東東「東」。
    </div>
  </div>
  <div id="space-all">
    <label>space-all (Chrome 122)</label>
    <div class="test"></div>
  </div>
  <div id="trim-start">
    <label>trim-start</label>
    <div class="test"></div>
  </div>
  <div id="space-first">
    <label for="space-first">space-first</label>
    <div class="test"></div>
  </div>
</div>
​
<script>
const tests = document.getElementsByClassName('test');
​
function copy_to_mirrors(source) {
  const text = source.textContent;
  for (const test of tests) {
    if (test == source) { continue; }
    test.textContent = '';
    for (const child of source.childNodes) {
      test.appendChild(child.cloneNode(true));
    }
  }
}
copy_to_mirrors(tests[0]);
​
for (const test of tests) {
  test.addEventListener('input', (e) => {
    copy_to_mirrors(e.target); });
}
</script>
​
Output

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

Dismiss x
public
Bin info
kojiishipro
0viewers