cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <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>

            
          
!
            
              @import url(http://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: -.5em;
    }
  }
}

// 終わり括弧系
.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: -.25em;
    }
  }
}

body {
  font-family: "Noto Sans JP", 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
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console