css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <meta name="viewport" content="width=device-width">

<div class="page">

<h1 class="head">
  <a href="https://github.com/hokkey/jquery.yakumono" target="_blank">
    <img src="https://cloud.githubusercontent.com/assets/6197292/23058600/1dff15ac-f539-11e6-8c71-eaabfe263b9a.png" alt="jQuery.yakumono"/><br/>
  </a>
</h1>

<p class="subtitle">※Chrome, Firefoxでしか動作しません。Safariはバージョンによって崩れる場合があります。</p>

<h2 class="head-small">jquery.yakumono・ベタ組み:</h2>
<div class="frame"><div class="demo js-yakumono js-yakumono-beta"></div></div>

<h2 class="head-small">jquery.yakumono・ツメ組み+ジャスティファイ:</h2>
<div class="frame"><div class="demo justify js-yakumono js-yakumono-tsume"></div></div>

<h2 class="head-small">調整なしのジャスティファイ:</h2>
<div class="frame"><div class="demo justify"></div></div>

<p class="head-small"><a href="http://en.wikipedia.org/wiki/MIT_License" target="_blank">&copy; 2017 Yuma Hori MIT license</a></p>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/julianshapiro/blast/master/jquery.blast.min.js"></script>
<script src="https://rawgit.com/hokkey/jquery.yakumono/master/dist/jquery.yakumono.min.js"></script>
</body>
</html>

            
          
!
            
              // 最近のCDN版NotoSansではカーニング情報が含まれていません。
// NotoSansでカーニングを効かせたい場合は、以下の記事を参考にしてください。
//
// OpenTypeフォントの軽量化と自動カーニング - ureta.net
// https://ureta.net/2017/02/tool_fonttools/
//
// @import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/*!
  jQuery.yakumono (0.3.0) github.com/hokkey/jquery.yakumono
  (C) 2017 Yuma Hori.
  MIT @license: en.wikipedia.org/wiki/MIT_License
*/

// 約物・アキなしミックスイン
@mixin yakumono-aki-nashi() {
  font-feature-settings: 'halt' 1;

  .is-tategumi & {
    font-feature-settings: 'vhal' 1;
  }
}

.js-yakumono {

  // 行末文字の影響で意図しない追い込みが発生してしまった場合の追い出し処理
  .is-oidashi {
    margin-right: .5em;

    &.is-tategumi {
      margin-right: 0;
      margin-bottom: .5em;
    }
  }
  // 行頭文字の影響で意図しない追い込みが発生してしまった場合の追い出し処理
  .is-oidashi-small {
    margin-right: .01em;

    &.is-tategumi {
      margin-right: 0;
      margin-bottom: .01em;
    }
  }

  // ベタ組みモード
  &.is-betagumi {
    text-align: justify;

    // borderやpaddingがあっても横幅に影響しないようにする
    box-sizing: content-box;
  }

  // ベタ組み時の左右の余りを左右マージンで吸収する
  &.is-betagumi-center {
    margin-left: auto;
    margin-right: auto;
  }

  // 字下げをする
  &.is-jisage {
    text-indent: 1em;

    > p, .js-jisage {
      text-indent: 1em;
    }
  }

  // ツメ組みモード
  &.is-tsumegumi {
    // 約物以外をプロポーショナル字形に
    .js-char:not(.js-char-yakumono) {
      font-feature-settings: 'palt' 1;
    }
  }

  // 縦書きモード (experimental)
  &.is-tategumi {
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
  }
}

// 行末約物半角モード
.js-yakumono.is-gyomatsu-yakumono-hankaku {
  .js-char-yakumono--owarikakko,
  .js-char-yakumono--kuten,
  .js-char-yakumono--touten,
  .js-char-yakumono--nakaten {
    &.is-end-of-line {
      @include yakumono-aki-nashi();
    }
  }
}

// 始め括弧系
.js-char-yakumono--hajimekakko {
  // 始め括弧系・行頭
  &.is-start-of-line,
  // 始め括弧系の後に始め括弧系
  // 「「 , 「( , (「
  &.js-char-yakumono--after--hajimekakko {
    @include yakumono-aki-nashi();

    // Safari用ポリフィル
    .is-safari & {
      // 半角ずらす
      position: relative;
      left: 0;
    }
  }
}

// 終わり括弧系
.js-char-yakumono--owarikakko {
  // 終わり括弧系の後に終わり括弧系
  // 」」, )」 ,  」)
  &.js-char-yakumono--before--owarikakko,
  // 終わり括弧系の後に始め括弧系
  // 」「 ,  )「  ,  」(
  &.js-char-yakumono--before--hajimekakko {
    @include yakumono-aki-nashi();
  }
}

// 句点
.js-char-yakumono--kuten {
  // 句点の後に始め括弧
  // 。「
  &.js-char-yakumono--before--hajimekakko,
  // 句点の後に終わり括弧
  // 。」
  &.js-char-yakumono--before--owarikakko {
    @include yakumono-aki-nashi();
  }
}

// 読点
.js-char-yakumono--touten {
  // 読点の後に始め括弧
  // 、「
  &.js-char-yakumono--before--hajimekakko,
  // 読点の後に終わり括弧
  // 、」
  &.js-char-yakumono--before--owarikakko {
    @include yakumono-aki-nashi();
  }
}

// 中点
.js-char-yakumono--nakaten {
  // 終わり括弧類 + 中点 + 始め括弧類
  // 」・「 , )・(
  &.js-char-yakumono--after--owarikakko.js-char-yakumono--before--hajimekakko {
    @include yakumono-aki-nashi();

    // Safari用ポリフィル
    .is-safari & {
      position: relative;
      left: 0;
    }
  }
}

body {
  font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  margin-top: 2em;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 2em;
}

.page {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
}

div, p {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  width: 400px;
  position: relative;
}

.head, .head-small {
  line-height: 1;
  font-size: 12px;
}

.head {
  text-align: center;
}

.subtitle {
  font-size: 11px;
  margin-bottom: 10px;
}

.head-small {
  margin-top: 2em;
}

.frame {
  background: #eee;
  border: 1px solid #ccc;
  font-size: 12px;
  line-height: 1.8;
  padding: 10px 5%;
  position: relative;
  max-height: 1.8 * 5em;
  overflow-y: scroll;

  @media all and (min-width: 600px) {
    max-height: 1.8 * 7em;
  }

  > div {
    position: relative;

    &::before, &::after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
    }

    &::before {
      left: 0;
      border-left: 1px solid #ccc;
    }

    &::after {
      right: 0;
      border-right: 1px solid #ccc;
    }
  }

  p + p {
    margin-top: 1em;
  }
}

.justify {
  text-align: justify;
}

.vertical {
  height: 40em;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;

  > p {
    text-indent: 1em;
  }
}

            
          
!
            
              'use strict';
// insert demo text
var demo = '<p>「生きろ。」「生きねば。」と。そして辿り着いた答えは、「水とともに生きる」「土から離れては生きられない」ということです。「生きろ。」「生きねば。」と。そして辿り着いた答えは、「水とともに生きる」「土から離れては生きられない」ということです。「生きろ。」「生きねば。」と。そして辿り着いた答えは、「水とともに生きる」「土から離れては生きられない」ということです。「生きろ。」「生きねば。」と。そして辿り着いた答えは、「水とともに生きる」「土から離れては生きられない」ということです。</p>';
demo = '<p>「□□」・「□・□、」「(□□)」(「□□」)</p><p>「天は人の上に人を造らず人の下に人を造らず」と言えり。されば天より人を生ずるには、万人は万人みな同じ位にして、生まれながら貴賤《きせん》上下の差別なく、万物の霊たる身と心との働きをもって天地の間にあるよろずの物を資《と》り、もって衣食住の用を達し、自由自在、互いに人の妨げをなさずしておのおの安楽にこの世を渡らしめ給うの趣意なり。</p><p>されども今、広くこの人間世界を見渡すに、かしこき人あり、おろかなる人あり、貧しきもあり、富めるもあり、貴人もあり、下人もありて、その有様雲と泥《どろ》との相違あるに似たるはなんぞや。その次第はなはだ明らかなり。『実語教《じつごきょう》』に、「人学ばざれば智なし、智なき者は愚人なり」とあり。されば賢人と愚人との別は学ぶと学ばざるとによりてできるものなり。また世の中にむずかしき仕事もあり、やすき仕事もあり。そのむずかしき仕事をする者を身分重き人と名づけ、やすき仕事をする者を身分軽き人という。すべて心を用い、心配する仕事はむずかしくして、手足を用うる力役《りきえき》はやすし。</p><p>ゆえに医者、学者、政府の役人、または大なる商売をする町人、あまたの奉公人を召し使う大百姓などは、身分重くして貴き者と言うべし。</p>';

// insert demo text
$('.demo').html(demo);

// run jquery.yakumono
$('.js-yakumono-beta').yakumono({
  isBetagumi: true,
  betagumiCenter: true
});

$('.js-yakumono-tsume').yakumono({
  isTsumegumi: true
});

$('.js-yakumono-tate').yakumono({
  isBetagumi: true,
  isTategumi: true,
  useJisage: true,
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console