Skip to content
This repository has been archived by the owner on Jun 28, 2021. It is now read-only.

Commit

Permalink
Feat: Add more valign options and a debug mode (#51)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: The default text style changed from `bottom` to `baseline`.

Closes #41
Closes #48
  • Loading branch information
@bluepichu @tleunen
bluepichu authored and tleunen committed Jul 17, 2017
1 parent 630031f commit 49c9326
Show file tree
Hide file tree
Showing 2 changed files with 263 additions and 38 deletions.
100 changes: 84 additions & 16 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,7 @@ <h2>Nesting Tags</h2>
&quot;default&quot;: {
fontFamily: &quot;Arial&quot;,
fontSize: &quot;24px&quot;,
fill: &quot;#cccccc&quot;,
valign: &quot;bottom&quot;
fill: &quot;#cccccc&quot;
},
&quot;outline&quot;: { stroke: &quot;black&quot;, strokeThickness: 2 },
&quot;b&quot;: { fontWeight: 700 },
Expand All @@ -57,17 +56,25 @@ <h2>Nesting Tags</h2>
});</code></pre>

<h2>Vertical Alignment</h2>
<pre><code class="js">let valign = new MultiStyleText(&quot;You can use &lt;code&gt;valign&lt;/code&gt; to control the &lt;top&gt;vertical&lt;/top&gt; &lt;middle&gt;alignment&lt;/middle&gt; of &lt;bottom&gt;text&lt;/bottom&gt;.&quot;,
<pre><code class="js">let valign = new MultiStyleText(&quot;You can use &lt;code&gt;valign&lt;/code&gt; &lt;top&gt;to&lt;/top&gt; &lt;middle&gt;control&lt;/middle&gt; &lt;baseline&gt;the&lt;/baseline&gt; &lt;bottom&gt;vertical&lt;/bottom&gt; &lt;custom1&gt;alignment&lt;/custom1&gt; &lt;custom2&gt;of&lt;/custom2&gt; &lt;custom3&gt;text&lt;/custom3&gt;.&quot;,
{
&quot;default&quot;: {
fontFamily: &quot;Arial&quot;,
fontSize: &quot;24px&quot;,
fill: &quot;#cccccc&quot;
},
&quot;code&quot;: { fontFamily: &quot;Inconsolata&quot;, fill: &quot;#ff8888&quot;, valign: &quot;bottom&quot; },
&quot;code&quot;: {
fontFamily: &quot;Inconsolata&quot;,
fontSize: &quot;36px&quot;,
fill: &quot;#ff8888&quot;
},
&quot;top&quot;: { fontSize: &quot;14px&quot;, valign: &quot;top&quot; },
&quot;middle&quot;: { fontSize: &quot;14px&quot;, valign: &quot;middle&quot; },
&quot;bottom&quot;: { fontSize: &quot;14px&quot;, valign: &quot;bottom&quot; }
&quot;bottom&quot;: { fontSize: &quot;14px&quot;, valign: &quot;bottom&quot; },
&quot;baseline&quot;: { fontSize: &quot;14px&quot;, valign: &quot;baseline&quot; },
&quot;custom1&quot;: { fontSize: &quot;14px&quot;, valign: 5 },
&quot;custom2&quot;: { fontSize: &quot;14px&quot;, valign: -70 },
&quot;custom3&quot;: { fontSize: &quot;14px&quot;, valign: 25 }
});</code></pre>

<h2>Wrapping and Alignment</h2>
Expand All @@ -84,7 +91,10 @@ <h2>Wrapping and Alignment</h2>
});</code></pre>

<h2>Wrapping and Alignment II</h2>
<pre><code class="js">let wrapping2 = new MultiStyleText(&quot;全局设置的&lt;blue&gt;对齐&lt;/blue&gt;属性由「默认」来&lt;big&gt;控制&lt;/big&gt;。而且不能被&lt;blue&gt;别的样式&lt;/blue&gt;所&lt;red&gt;覆盖&lt;/red&gt;。&quot;,
<pre><code class="js">// breakWords allows newlines to be inserted anywhere - not just at whitespaces.
// This is useful for some languages like Chinese.

let wrapping2 = new MultiStyleText(&quot;全局设置的&lt;blue&gt;对齐&lt;/blue&gt;属性由「默认」来&lt;big&gt;控制&lt;/big&gt;。而且不能被&lt;blue&gt;别的样式&lt;/blue&gt;所&lt;red&gt;覆盖&lt;/red&gt;。&quot;,
{
&quot;default&quot;: {
fontFamily: &quot;Arial&quot;,
Expand All @@ -99,6 +109,29 @@ <h2>Wrapping and Alignment II</h2>
&quot;big&quot;: { fill: 0x88ff88, stroke: 0x44cc44, fontSize: &quot;36px&quot; }
});</code></pre>

<h2>Debug Mode</h2>
<pre><code class="js">MultiStyleText.debugOptions.spans.enabled = true;
MultiStyleText.debugOptions.objects.enabled = true;

let debug = new MultiStyleText(&quot;You can use &lt;code&gt;debug mode&lt;/code&gt; to help you figure out what your text is doing. You can use &lt;blue&gt;global, &lt;/blue&gt;&lt;red&gt;static&lt;/red&gt; settings or &lt;no-debug&gt;override those with the &lt;code&gt;debug&lt;/code&gt; style option.&lt;/no-debug&gt;&quot;,
{
&quot;default&quot;: {
fontFamily: &quot;Arial&quot;,
fontSize: &quot;24px&quot;,
fill: &quot;#cccccc&quot;,
wordWrap: true,
wordWrapWidth: 500,
},
&quot;code&quot;: {
fontFamily: &quot;Inconsolata&quot;,
fontSize: &quot;36px&quot;,
fill: &quot;#ff8888&quot;
},
&quot;blue&quot;: { fill: 0x4488ff, stroke: 0x2244cc },
&quot;red&quot;: { fill: 0xff8888, stroke: 0xcc4444 },
&quot;no-debug&quot;: { debug: false }
});</code></pre>

<h2>Have Fun</h2>
<pre><code class="js">let funStyles = {
&quot;default&quot;: {
Expand Down Expand Up @@ -132,7 +165,7 @@ <h2>Have Fun</h2>
<div id="pixi-container">
<script>
PIXI.settings.RESOLUTION = 2;
let renderer = PIXI.autoDetectRenderer(600, 2400);
let renderer = PIXI.autoDetectRenderer(600, 2680);
renderer.backgroundColor = 0x333333;
document.getElementById("pixi-container").appendChild(renderer.view);
let stage = new PIXI.Container();
Expand Down Expand Up @@ -170,8 +203,7 @@ <h2>Have Fun</h2>
"default": {
fontFamily: "Arial",
fontSize: "24px",
fill: "#cccccc",
valign: "bottom"
fill: "#cccccc"
},
"outline": { stroke: "black", strokeThickness: 2 },
"b": { fontWeight: 700 },
Expand All @@ -187,17 +219,25 @@ <h2>Have Fun</h2>
stage.addChild(nested);

// Vertical Alignment
let valign = new MultiStyleText("You can use <code>valign</code> to control the <top>vertical</top> <middle>alignment</middle> of <bottom>text</bottom>.",
let valign = new MultiStyleText("You can use <code>valign</code> <top>to</top> <middle>control</middle> <baseline>the</baseline> <bottom>vertical</bottom> <custom1>alignment</custom1> <custom2>of</custom2> <custom3>text</custom3>.",
{
"default": {
fontFamily: "Arial",
fontSize: "24px",
fill: "#cccccc"
},
"code": { fontFamily: "Inconsolata", fill: "#ff8888", valign: "bottom" },
"code": {
fontFamily: "Inconsolata",
fontSize: "36px",
fill: "#ff8888"
},
"top": { fontSize: "14px", valign: "top" },
"middle": { fontSize: "14px", valign: "middle" },
"bottom": { fontSize: "14px", valign: "bottom" }
"bottom": { fontSize: "14px", valign: "bottom" },
"baseline": { fontSize: "14px", valign: "baseline" },
"custom1": { fontSize: "14px", valign: 5 },
"custom2": { fontSize: "14px", valign: -70 },
"custom3": { fontSize: "14px", valign: 25 }
});

valign.x = 300 - valign.width / 2;
Expand All @@ -221,9 +261,7 @@ <h2>Have Fun</h2>
wrapping.y = 1220;
stage.addChild(wrapping);

// Wrapping and Alignment with "breakWords" set
// Once breakWords is set, line breaks may happen at any position(not just whitespaces) of the text when the width is full.
// This is useful for some languages like Chinese.
// Wrapping and Alignment II
let wrapping2 = new MultiStyleText("全局设置的<blue>对齐</blue>属性由「默认」来<big>控制</big>。而且不能被<blue>别的样式</blue>所<red>覆盖</red>。",
{
"default": {
Expand All @@ -243,6 +281,36 @@ <h2>Have Fun</h2>
wrapping2.y = 1700;
stage.addChild(wrapping2);

// Debug Mode
let debug = new MultiStyleText("You can use <code>debug mode</code> to help you figure out what your text is doing. You can use <blue>global, </blue><red>static</red> settings or <no-debug>override those with the <code>debug</code> style option.</no-debug>",
{
"default": {
fontFamily: "Arial",
fontSize: "24px",
fill: "#cccccc",
wordWrap: true,
wordWrapWidth: 500,
},
"code": {
fontFamily: "Inconsolata",
fontSize: "36px",
fill: "#ff8888"
},
"blue": { fill: 0x4488ff, stroke: 0x2244cc },
"red": { fill: 0xff8888, stroke: 0xcc4444 },
"no-debug": { debug: false }
});

MultiStyleText.debugOptions.spans.enabled = true;
MultiStyleText.debugOptions.objects.enabled = true;

debug.x = 300 - debug.width / 2;
debug.y = 2050;
stage.addChild(debug);

MultiStyleText.debugOptions.spans.enabled = false;
MultiStyleText.debugOptions.objects.enabled = false;

// Have Fun
let funStyles = {
"default": {
Expand All @@ -263,7 +331,7 @@ <h2>Have Fun</h2>
let fun = new MultiStyleText("Now have fun making some <blue>beautiful</blue> <red>multistyle</red> text!", funStyles);

fun.x = 300 - fun.width / 2;
fun.y = 2180;
fun.y = 2480;
stage.addChild(fun);

// Animate
Expand Down
Loading

0 comments on commit 49c9326

Please sign in to comment.