shimizu/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    SVGテキストをレスポンシブに折り返す処理のテスト。
元テキストの改行や半角英字などに対応できていないので、まだ未完成。
Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<style>
html, body {
    width: 100%;
    height: 100%;
}
.stage {
   width: 49.5%;
   height: 100%;
   margin: 0px;
   float: left;
}
.left {
    border-right: 1px solid black;
}
</style>
</head>

<body>
<svg class="stage left">
<text transform="translate(0, 16)">
それは九月初旬のある蒸し暑い晩のことであった。私は、Ｄ坂の大通りの中程にある、白梅軒はくばいけんという、行きつけのカフェで、冷しコーヒーを啜すすっていた。当時私は、学校を出たばかりで、まだこれという職業もなく、下宿屋にゴロゴロして本でも読んでいるか、それに飽ると、当てどもなく散歩に出て、あまり費用のかからぬカフェ廻りをやる位が、毎日の日課だった。この白梅軒というのは、下宿屋から近くもあり、どこへ散歩するにも、必ずその前を通る様な位置にあったので、随したがって一番よく出入した訳であったが、私という男は悪い癖で、カフェに入るとどうも長尻ながっちりになる。それも、元来食慾の少い方なので、一つは嚢中のうちゅうの乏しいせいもあってだが、洋食一皿注文するでなく、安いコーヒーを二杯も三杯もお代りして、一時間も二時間もじっとしているのだ。そうかといって、別段、ウエトレスに思召おぼしめしがあったり、からかったりする訳ではない。まあ、下宿より何となく派手で、居心地がいいのだろう。私はその晩も、例によって、一杯の冷しコーヒーを十分もかかって飲みながら、いつもの往来に面したテーブルに陣取って、ボンヤリ窓の外を眺めていた。
</text>
</svg>
<svg class="stage right">
<text transform="translate(0, 16)">
These tutorials evolved out of my own process of learning how to use D3. You already know that D3 is an extraordinary tool for mapping data within web pages, written by Mike Bostock. Many people, including myself, come to D3 with backgrounds in design, mapping, and data visualization, but not programming and computer science.

Yet D3 employs advanced JavaScript techniques, so learning to use D3 often means learning a lot about JavaScript. For many datavis folks, D3 is their introduction to JavaScript. It’s hard enough to learn a new programming language, let alone a new tool built on that language. D3 is amazing and will enable you to do great things with JavaScript that you never would have even attempted. The time you spend learning both the language and the tool will provide an incredible payoff.

My goal is to reduce that learning time, so you can start creating awesome stuff sooner.</svg>


<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>
<script>
!(function(){
    "use strict"

    var svg = d3.selectAll("svg")
    renderText()
    attachResizeEvent()

    function renderText() {
        svg.call(function(section){
            section.each(function(){
                var s = d3.select(this)
                var width = s.node().clientWidth
                var text = s.select("text")
                var string = text.text()
                if (!string) return
                var textLength = string.match(/./ug).length
                var fontSize = getTextWidth(string) / textLength
                var splitLength = (width/fontSize) * 0.6
                var splitText = []


                string.split('').forEach(function(d,i){
                    if (!splitText[~~(i/splitLength)]) splitText[~~(i/splitLength)] = ""
                    splitText[~~(i/splitLength)] += d
                })

                text.text("")

                var tspan = text.selectAll("tspan").data(splitText)
                var newTspan = tspan.enter().append("tspan")

                tspan.exit().remove()

                tspan.merge(newTspan)
                .attr("x", "0em")
                .attr("y", function(d,i){ return i + "em"})
                .text(function(d){ return d })
            })


        })
    }

    function attachResizeEvent() {
        var resizeTimer;
        var interval = Math.floor(1000 / 60 * 10);

        window.addEventListener('resize', function (event) {
            if (resizeTimer !== false) {
                clearTimeout(resizeTimer);
            }
            resizeTimer = setTimeout(function () {
                renderText()
            }, interval);
        });
    }

    function getTextWidth(text, font) {
        var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
        var context = canvas.getContext("2d");
        context.font = font;
        var metrics = context.measureText(text);
        return metrics.width;
    }

}());


</script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<style>
	html, body {
	width: 100%;
	height: 100%;
	}
	.stage {
	width: 49.5%;
	height: 100%;
	margin: 0px;
	float: left;
	}
	.left {
	border-right: 1px solid black;
	}
	</style>
	</head>

	<body>
	<svg class="stage left">
	<text transform="translate(0, 16)">
	それは九月初旬のある蒸し暑い晩のことであった。私は、Ｄ坂の大通りの中程にある、白梅軒はくばいけんという、行きつけのカフェで、冷しコーヒーを啜すすっていた。当時私は、学校を出たばかりで、まだこれという職業もなく、下宿屋にゴロゴロして本でも読んでいるか、それに飽ると、当てどもなく散歩に出て、あまり費用のかからぬカフェ廻りをやる位が、毎日の日課だった。この白梅軒というのは、下宿屋から近くもあり、どこへ散歩するにも、必ずその前を通る様な位置にあったので、随したがって一番よく出入した訳であったが、私という男は悪い癖で、カフェに入るとどうも長尻ながっちりになる。それも、元来食慾の少い方なので、一つは嚢中のうちゅうの乏しいせいもあってだが、洋食一皿注文するでなく、安いコーヒーを二杯も三杯もお代りして、一時間も二時間もじっとしているのだ。そうかといって、別段、ウエトレスに思召おぼしめしがあったり、からかったりする訳ではない。まあ、下宿より何となく派手で、居心地がいいのだろう。私はその晩も、例によって、一杯の冷しコーヒーを十分もかかって飲みながら、いつもの往来に面したテーブルに陣取って、ボンヤリ窓の外を眺めていた。
	</text>
	</svg>
	<svg class="stage right">
	<text transform="translate(0, 16)">
	These tutorials evolved out of my own process of learning how to use D3. You already know that D3 is an extraordinary tool for mapping data within web pages, written by Mike Bostock. Many people, including myself, come to D3 with backgrounds in design, mapping, and data visualization, but not programming and computer science.

	Yet D3 employs advanced JavaScript techniques, so learning to use D3 often means learning a lot about JavaScript. For many datavis folks, D3 is their introduction to JavaScript. It’s hard enough to learn a new programming language, let alone a new tool built on that language. D3 is amazing and will enable you to do great things with JavaScript that you never would have even attempted. The time you spend learning both the language and the tool will provide an incredible payoff.

	My goal is to reduce that learning time, so you can start creating awesome stuff sooner.</svg>


	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>
	<script>
	!(function(){
	"use strict"

	var svg = d3.selectAll("svg")
	renderText()
	attachResizeEvent()

	function renderText() {
	svg.call(function(section){
	section.each(function(){
	var s = d3.select(this)
	var width = s.node().clientWidth
	var text = s.select("text")
	var string = text.text()
	if (!string) return
	var textLength = string.match(/./ug).length
	var fontSize = getTextWidth(string) / textLength
	var splitLength = (width/fontSize) * 0.6
	var splitText = []


	string.split('').forEach(function(d,i){
	if (!splitText[~~(i/splitLength)]) splitText[~~(i/splitLength)] = ""
	splitText[~~(i/splitLength)] += d
	})

	text.text("")

	var tspan = text.selectAll("tspan").data(splitText)
	var newTspan = tspan.enter().append("tspan")

	tspan.exit().remove()

	tspan.merge(newTspan)
	.attr("x", "0em")
	.attr("y", function(d,i){ return i + "em"})
	.text(function(d){ return d })
	})


	})
	}

	function attachResizeEvent() {
	var resizeTimer;
	var interval = Math.floor(1000 / 60 * 10);

	window.addEventListener('resize', function (event) {
	if (resizeTimer !== false) {
	clearTimeout(resizeTimer);
	}
	resizeTimer = setTimeout(function () {
	renderText()
	}, interval);
	});
	}

	function getTextWidth(text, font) {
	var canvas = getTextWidth.canvas \|\| (getTextWidth.canvas = document.createElement("canvas"));
	var context = canvas.getContext("2d");
	context.font = font;
	var metrics = context.measureText(text);
	return metrics.width;
	}

	}());


	</script>
	</body>
	</html>