Text wrapper sample

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <textarea id="textarea" style="box-sizing: border-box; width: 100%; height: 150px;"></textarea>
    <input type="button" value="Execute" onclick="execute()" />
    <p>
      By style:
    </p>
    <div id="bystyle" class="textbox wrap">
      abc잉여<br />
      잉여abc
    </div>
    <p>
      By script:
    </p>
    <div id="byscript" class="textbox">
      abc
    </div>
  </body>

</html>

var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
context.font = "16px NanumGothicCoding, monospace";

function wrapText(width, str) {
  var result = [];
  // Wrap each lines
  str.split("\n").forEach(function (line) {
    Array.prototype.push.apply(result, wrapLine(width, line));
  });
  return result;
}

function wrapLine(width, line) {
  var wrapped = [];
  
  // Slice the text line by the specified width.
  
  var subject = line;
  var measure = context.measureText(subject); // Measure text width by HTML5 measureText
  while (measure.width > width) { // Slice the line if its width is bigger than the specified value
    var sliced = sliceByWidth(width, subject);
    wrapped.push(sliced);
    subject = subject.slice(sliced.length);
    measure = context.measureText(subject);
  } 
  wrapped.push(subject);
  
  return wrapped;
}

function sliceByWidth(width, subject) {
  // If the text width is shorter than the specified width, do nothing.
  if (context.measureText(subject) <= width)
    return subject;
  
  // Break the text to get proper width, by binary search algorithm.
  var left = 0;
  var right = subject.length;
  while (left < right) {
    var middle = (left + right) / 2;
    var slice = subject.slice(0, middle);
    var measure = context.measureText(slice);
    if (measure.width === width)
      return slice;
    else if (measure.width < width)
      left = Math.ceil(middle);
    else
      right = Math.floor(middle);
  }
  
  // Last condition
  if (context.measureText(subject.slice(0, left)).width < width)
    return subject.slice(0, left);
  else
    return subject.slice(0, left - 1);
}

function execute() {
  bystyle.innerHTML = textarea.value.replace(/\n/g, "<br />");
  byscript.innerHTML = wrapText(byscript.clientWidth - 20, textarea.value).join("<br />");
}

document.addEventListener("DOMContentLoaded", function () {
  textarea.value = "Article source: http://saschanaz.wordpress.com/2014/03/25/%eb%b2%88%ec%97%ad-%ec%a3%bc%ec%8b%9d%ed%9a%8c%ec%82%ac-%ed%94%84%eb%a1%9c%eb%8d%95%ec%85%98-i-g%ec%99%80-%eb%a7%88%ec%9d%b4%ed%81%ac%eb%a1%9c%ec%86%8c%ed%94%84%ed%8a%b8%ea%b0%80-%ec%95%a0%eb%8b%88/\n\n[번역] 주식회사 프로덕션 I.G와 마이크로소프트가 애니메이션 「취성의 가르간티아」로 콜라보, Internet Explorer 11으로 가르간티아의 세계를 즐기자!\n \n\n마이크로소프트 IE11과 ‘취성의 가르간티아’ 콜라보 소식이 떴길래 간단히 번역해보았습니다.\n\n원문: http://blogs.technet.com/b/microsoft_japan_corporate_blog/archive/2014/03/24/internet-explorer-11.aspx\n\n\n\n안녕하세요, 여러분. Windows 부서의 후지모토[藤本]입니다.\n\n3월 22일부터 23일까지 개최됐던 일본 최대 규모 애니메이션 이벤트 AnimeJapan 2014에서 주식회사 프로젝션 I.G가 「취성의 가르간티아」와 마이크로소프트의 웹 브라우저 Internet Explorer간의 콜라보레이션을 통해 웹 게임 「취성의 가르간티아～キミと届けるメッセージ～」을 제작한다고 발표했습니다. (발표내용은 여기 http://gargantia.jp/blog/?p=1835, 공식 사이트는 여기 http://www.production-ig.co.jp/gargantia-ie/). 오늘은 그 콜라보레이션 내용에 대해 소개합니다.\n\n\nhttp://www.production-ig.co.jp/gargantia-ie/\n\n이번에 발표된 것은 주식회사 프로덕션 I.G에서 제작하고 2013년 4월에서 6월까지 방송됐던 「취성의 가르간티아」 및 올 가을 예정된 「취성의 가르간티아～めぐる航路、遥か～」의 세계를 마이크로소프트의 웹 브라우저인 Internet Explorer를 통해 즐기는 것이 가능한 브라우저 기반 게임입니다. 이 게임은 유저 (여러분)가 직접 주인공인 레드가 되어 서프 카이트를 조종해 미션을 수행하는 웹 브라우저 기반 스카이 액션 게임입니다. 어드벤처 파트도 준비되어 있고, 엔딩은 유저의 선택 순서에 따라 바뀌도록 되어 있습니다. 애니메이션판 「취성의 가르간티아」의 무라타 카즈야 감독과 주식회사 프로덕션 I.G에서 감수를 맡았고, 애니메이션에서도 각본을 담당한 타니무라 다이시로 씨의 시나리오를 기반으로 마이크로소프트가 제작하고 있습니다.\n\n이 게임에서 눈여겨볼 점은 뭐니뭐니해도 웹 브라우저에서 손쉽게 가르간티아의 작품 세계를 3D 게임을 통해 체험할 수 있다는 것입니다. Internet Explorer의 최신판 Internet Explorer 11은 WebGL이라는 표준 기술에 대응합니다. 조금 기술적인 내용입니다만, WebGL이란 플러그인 없이 웹 브라우저 상에서 GPU를 이용해 3D 그래픽 영상을 고속으로 렌더링할 수 있는 기술입니다. Internet Explorer 11의 WebGL 대응 덕분에 3D 웹 게임 UX를 실현할 수 있게 된 것입니다.\n\n이 게임은 WebGL에 대응한 웹 브라우저에서 플레이할 수 있습니다만 Windows 8.1에서 돌아가는 Internet Explorer 11에 최적화되어 있습니다. Windows 8.1의 Internet Explorer 11은 키보드와 마우스 조작 말고도 터치 조작에도 최적화되어 있어 태블릿 기기에서도 쾌적하게 즐길 수가 있습니다 (또한, Internet Explorer 11은 Windows 7용으로도 제공되고 있습니다).\n\n\n게임 플레이 화면 (아직 개발 중인 상태의 화면입니다)\n\n\n게임 플레이 화면 (아직 개발 중인 상태의 화면입니다)\n\n\n게임 플레이 화면 (아직 개발 중인 상태의 화면입니다)\n\n이번 콜라보레이션은 마이크로소프트가 전세계에 펼치고 있는 ReThink IE 시리즈의 일환입니다. ReThink IE란 Internet Explorer를 활용한 여러가지 데모를 통해 웹을 혁신할 UX를 실현한다는 것을 목표로 삼은 프로젝트입니다.\n\n주식회사 프로덕션 I.G는 지난해 일본에서의 Surface 발매 때 자사 작품인 「공각기동대」로 콜라보레이션을 했었는데, 이번에도 다시 콜라보레이션을 할 수 있게 되어 매우 기쁘게 생각합니다.\n\n게임 공개는 올해 여름으로 예정되어 있습니다. 꼭 Windows 8.1과 Internet Explorer 11을 미리 준비해서 이용해보시고 앞으로 기대해주세요!\n\n【주식회사 프로덕션 I.G에 대해】 Production I.G는 컨텐츠, 영상, 음악 및 하이퀄리티 애니메이션 작품을 기획부터 제작까지 모두 맡아 전세계 시장에 제공하고 있는 컨텐츠 프로바이더입니다. 공식 사이트 URL: http://www.production-ig.co.jp/ 「취성의 가르간티아～キミと届けるメッセージ～」  작품 사이트 URL: http://www.production-ig.co.jp/gargantia-ie/\n\n【취성의 가르간티아에 대해】 2013년 4월부터 6월까지 TV에서 방영되어 호평을 받은 오리지널 SF 모험 활극 애니메이션입니다. 은하 끝자락에서 괴생물체 「히디어즈」와의 내일을 알 수 없는 싸움에 그 몸을 던져온 소년병 레드와, 바다로 덮인 지구에서 소박하면서도 생기있게 살아가는 선단도시 「가르간티아」의 사람들의 만남을 그린다. 현재 속편으로 OVA 시리즈 「취성의 가르간티아～めぐる航路、遥か～」가 제작 중. 공식 사이트 URL: http://gargantia.jp/";
  execute();
})
window.addEventListener("resize", execute)

/* Styles go here */

.textbox {
  border: 2px solid #999999;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
  font: 16px NanumGothicCoding, monospace;
  background-color: #efefef;
}
.wrap {
  word-wrap: break-word;
}

Text wrapper sample using HTML5 `measureText` method.