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

[Fixes #41, #46] Add more valign options and a debug mode #51

Merged
merged 6 commits into from
Jul 17, 2017
Merged

[Fixes #41, #46] Add more valign options and a debug mode #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
79bfa68
[Partial #41] Add baseline option to valign
bluepichu Feb 9, 2017
cd4dac4
Vertical alignment in-progress
bluepichu Jun 12, 2017
b5109b3
More in-progress vertical alignment
bluepichu Jun 29, 2017
4d2ded6
[Partial #41, Partial #48] Add some debug mode and fix some valign
bluepichu Jun 30, 2017
1778749
[Fixes #41, Fixes #48] Add debug as a style option; fix debug text; f…
bluepichu Jul 16, 2017
2090188
[#41, #46] Update demo page
bluepichu Jul 16, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 84 additions & 16 deletions demo/index.html
View file
Open in desktop
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