info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-30 11:40:27 +02:00
Code Issues Releases Wiki Activity

above-the-fold + sticky section titles

Browse Source
This commit is contained in:
Pomax
2020-09-27 10:05:49 -07:00
parent 5fe5878eaa
commit 4c264b2c0f
12 changed files with 221 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/chapters/preface/content.en-GB.md
View File

@@ -10,18 +10,6 @@ Anyway, that's mostly trivia, what you are more likely to care about is that the
But what if you need to program them yourself? What are the pitfalls? How do you draw them? What are the bounding boxes, how do you determine intersections, how can you extrude a curve, in short: how do you do everything that you might want to do with these curves? That's what this page is for. Prepare to be mathed! But what if you need to program them yourself? What are the pitfalls? How do you draw them? What are the bounding boxes, how do you determine intersections, how can you extrude a curve, in short: how do you do everything that you might want to do with these curves? That's what this page is for. Prepare to be mathed!
<div class="print">
## PS: buy me a coffee?
If you enjoyed this book enough to print it out, you might be wondering if there is some way to give something back. To answer that question: you can always buy me a coffee, however-much a coffee is where you live. Or, if you want to pay a fair price for this book, you can buy me a really expensive coffee =)
This book has grown over the years from a short primer to a 100+ print-page-equivalent ebook on the subject of Bézier curves, and a lot of coffee went into the making of it. I don't regret a minute I spent on writing it, but I can always do with some more coffee to keep on writing! Please visit https://pomax.github.io/bezierinfo/ and click on the link in the "Help support the book" preface section to donate some coffee money.
</div>
—Pomax (or in the tweetworld, [@TheRealPomax](https://twitter.com/TheRealPomax))
<div class="note"> <div class="note">
## Virtually all Bézier graphics are interactive. ## Virtually all Bézier graphics are interactive.
@@ -36,6 +24,10 @@ This book is an open source software project, and lives on two github repositori
Most of the mathematics in this Primer are early high school maths. If you understand basic arithmetic, and you know how to read English, you should be able to get by just fine. There will at times be *far* more complicated maths, but if you don't feel like digesting them, you can safely skip over them by either skipping over the "detail boxes" in section or by just jumping to the end of a section with maths that looks too involving. The end of sections typically simply list the conclusions so you can just work with those values directly. Most of the mathematics in this Primer are early high school maths. If you understand basic arithmetic, and you know how to read English, you should be able to get by just fine. There will at times be *far* more complicated maths, but if you don't feel like digesting them, you can safely skip over them by either skipping over the "detail boxes" in section or by just jumping to the end of a section with maths that looks too involving. The end of sections typically simply list the conclusions so you can just work with those values directly.
## What language is all this example code in?
There are way too many programming languages to favour one of all others, soo all the example code in this Primer uses a form of pseudo-code that uses a syntax that's close enough to, but not actually, modern scripting languages like JS, Python, etc. That means you won't be able to copy-paste any of it without giving it any thought, but that's intentional: if you're reading this primer, presumably you want to _learn_, and you don't learn by copy-pasting. You learn by doing things yourself, _making mistakes_, and then fixing those mistakes. Now, of course, I didn't intentionally add errors in the example code just to trick you into making mistakes (that would be horrible!) but I _did_ intentionally keep the code from favouring one programming language over another. Don't worry though, if you know even a single procedural programming language, you should be able to read the examples without any difficulties.
## Questions, comments: ## Questions, comments:
If you have suggestions for new sections, hit up the [Github issue tracker](https://github.com/pomax/BezierInfo-2/issues) (also reachable from the repo linked to in the upper right). If you have questions about the material, there's currently no comment section while I'm doing the rewrite, but you can use the issue tracker for that as well. Once the rewrite is done, I'll add a general comment section back in, and maybe a more topical "select this section of text and hit the 'question' button to ask a question about it" system. We'll see. If you have suggestions for new sections, hit up the [Github issue tracker](https://github.com/pomax/BezierInfo-2/issues) (also reachable from the repo linked to in the upper right). If you have questions about the material, there's currently no comment section while I'm doing the rewrite, but you can use the issue tracker for that as well. Once the rewrite is done, I'll add a general comment section back in, and maybe a more topical "select this section of text and hit the 'question' button to ask a question about it" system. We'll see.

2
docs/chapters/preface/content.ja-JP.md
View File

@@ -18,8 +18,6 @@
</div> </div>
—Pomax (Twitter上では[@TheRealPomax](https://twitter.com/TheRealPomax))
<div class="note"> <div class="note">
## 注：ベジエの図はすべてインタラクティブになっています。 ## 注：ベジエの図はすべてインタラクティブになっています。

2
docs/chapters/preface/content.zh-CN.md
View File

@@ -9,8 +9,6 @@
那么，要是你自己想编程实现它们呢？有哪些陷阱？你怎么画它们？包围盒是怎么样的，怎么确定交点，怎么拉伸曲线，简单来说：你怎么对曲线做一切你想做的事？这就是这篇文章想说的。准备好学习一些数学吧! 那么，要是你自己想编程实现它们呢？有哪些陷阱？你怎么画它们？包围盒是怎么样的，怎么确定交点，怎么拉伸曲线，简单来说：你怎么对曲线做一切你想做的事？这就是这篇文章想说的。准备好学习一些数学吧!
—Pomax (推特账号, [@TheRealPomax](https://twitter.com/TheRealPomax))
<div class="note"> <div class="note">
## 注意：几乎所有的贝塞尔图形都是可交互的。 ## 注意：几乎所有的贝塞尔图形都是可交互的。

64
docs/index.html
View File

@@ -31,7 +31,7 @@
<meta property="og:locale" content="en-GB" /> <meta property="og:locale" content="en-GB" />
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" /> <meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
<meta property="og:updated_time" content="2020-09-26T22:53:06+00:00" /> <meta property="og:updated_time" content="2020-09-27T17:04:48+00:00" />
<meta property="og:author" content="Mike 'Pomax' Kamermans" /> <meta property="og:author" content="Mike 'Pomax' Kamermans" />
<meta property="og:section" content="Bézier Curves" /> <meta property="og:section" content="Bézier Curves" />
<meta property="og:tag" content="Bézier Curves" /> <meta property="og:tag" content="Bézier Curves" />
@@ -121,13 +121,35 @@
A Primer on Bézier Curves<a class="rss-link" href="news/rss.xml"><img src="images/rss.png" /></a> A Primer on Bézier Curves<a class="rss-link" href="news/rss.xml"><img src="images/rss.png" /></a>
</h1> </h1>
<h2>A free, online book for when you really need to know how to do Bézier things.</h2> <h2>A free, online book for when you really need to know how to do Bézier things.</h2>
<span>Read this in your own language:</span> <div>
<ul class="lang-switcher"> <span>Read this in your own language:</span>
<li><a href="./index.html">English</a></li> <ul class="lang-switcher">
<li><a href="./ja-JP/index.html">日本語</a></li> <li><a href="./index.html">English</a></li>
<li><a href="./zh-CN/index.html">中文</a></li> <li><a href="./ja-JP/index.html">日本語</a></li>
</ul> <li><a href="./zh-CN/index.html">中文</a></li>
<p>Don't see your language listed? <a href="https://github.com/Pomax/BezierInfo-2/wiki/localize">Help translate this content!</a></p> </ul>
<p>(Don't see your language listed? <a href="https://github.com/Pomax/BezierInfo-2/wiki/localize">Help translate this content!</a>)</p>
</div>
<p>
Welcome to the Primer on Bezier Curves. This is a free website/ebook dealing with both the maths and programming aspects of Bezier Curves,
covering a wide range of topics relating to drawing and working with that curve that seems to pop up everywhere, from Photoshop paths to CSS
easing functions to Font outline descriptions.
</p>
<p>
If this is your first time here: welcome! Let me know if you were looking for anything in particular that the primer doesn't cover over on the
<a href="https://github.com/Pomax/BezierInfo-2/issues">issue tracker</a>!
</p>
<p>
If this is a resource that you're using for research, or writing your own software, please consider
<a href="https://www.paypal.com/donate/?cmd=_s-xclick&hosted_button_id=3BNHGHZAS3DP6&locale.x=en_CA">donating</a> (any amount helps) or
signing up as <a href="https://www.patreon.com/bezierinfo">a patron on Patreon</a>. I don't get paid to work on this, so if you find this site
valuable, and you'd like it to stick around for a long time to come, a lot of coffee went into writing this over the years, and a lot more
coffee will need to go into it yet: if you can spare a coffee, you'd be helping keep a resource alive and well!
</p>
<p>— <a href="https://twitter.com/TheRealPomax">Pomax</a></p>
<noscript> <noscript>
<div class="note"> <div class="note">
<header> <header>
@@ -243,22 +265,6 @@
determine intersections, how can you extrude a curve, in short: how do you do everything that you might want to do with these curves? That's determine intersections, how can you extrude a curve, in short: how do you do everything that you might want to do with these curves? That's
what this page is for. Prepare to be mathed! what this page is for. Prepare to be mathed!
</p> </p>
<div class="print">
<h2>PS: buy me a coffee?</h2>
<p>
If you enjoyed this book enough to print it out, you might be wondering if there is some way to give something back. To answer that
question: you can always buy me a coffee, however-much a coffee is where you live. Or, if you want to pay a fair price for this book, you
can buy me a really expensive coffee =)
</p>
<p>
This book has grown over the years from a short primer to a 100+ print-page-equivalent ebook on the subject of Bézier curves, and a lot of
coffee went into the making of it. I don't regret a minute I spent on writing it, but I can always do with some more coffee to keep on
writing! Please visit <a href="https://pomax.github.io/bezierinfo/">https://pomax.github.io/bezierinfo/</a> and click on the link in the
"Help support the book" preface section to donate some coffee money.
</p>
</div>
<p>—Pomax (or in the tweetworld, <a href="https://twitter.com/TheRealPomax">@TheRealPomax</a>)</p>
<div class="note"> <div class="note">
<h2>Virtually all Bézier graphics are interactive.</h2> <h2>Virtually all Bézier graphics are interactive.</h2>
<p> <p>
@@ -281,6 +287,16 @@
them, you can safely skip over them by either skipping over the "detail boxes" in section or by just jumping to the end of a section with them, you can safely skip over them by either skipping over the "detail boxes" in section or by just jumping to the end of a section with
maths that looks too involving. The end of sections typically simply list the conclusions so you can just work with those values directly. maths that looks too involving. The end of sections typically simply list the conclusions so you can just work with those values directly.
</p> </p>
<h2>What language is all this example code in?</h2>
<p>
There are way too many programming languages to favour one of all others, soo all the example code in this Primer uses a form of
pseudo-code that uses a syntax that's close enough to, but not actually, modern scripting languages like JS, Python, etc. That means you
won't be able to copy-paste any of it without giving it any thought, but that's intentional: if you're reading this primer, presumably you
want to <em>learn</em>, and you don't learn by copy-pasting. You learn by doing things yourself, <em>making mistakes</em>, and then fixing
those mistakes. Now, of course, I didn't intentionally add errors in the example code just to trick you into making mistakes (that would
be horrible!) but I <em>did</em> intentionally keep the code from favouring one programming language over another. Don't worry though, if
you know even a single procedural programming language, you should be able to read the examples without any difficulties.
</p>
<h2>Questions, comments:</h2> <h2>Questions, comments:</h2>
<p> <p>
If you have suggestions for new sections, hit up the <a href="https://github.com/pomax/BezierInfo-2/issues">Github issue tracker</a> (also If you have suggestions for new sections, hit up the <a href="https://github.com/pomax/BezierInfo-2/issues">Github issue tracker</a> (also

39
docs/ja-JP/index.html
View File

@@ -33,7 +33,7 @@
<meta property="og:locale" content="ja-JP" /> <meta property="og:locale" content="ja-JP" />
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" /> <meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
<meta property="og:updated_time" content="2020-09-26T22:53:06+00:00" /> <meta property="og:updated_time" content="2020-09-27T17:04:48+00:00" />
<meta property="og:author" content="Mike 'Pomax' Kamermans" /> <meta property="og:author" content="Mike 'Pomax' Kamermans" />
<meta property="og:section" content="Bézier Curves" /> <meta property="og:section" content="Bézier Curves" />
<meta property="og:tag" content="Bézier Curves" /> <meta property="og:tag" content="Bézier Curves" />
@@ -123,13 +123,35 @@
ベジェ曲線入門<a class="rss-link" href="news/rss.xml"><img src="images/rss.png" /></a> ベジェ曲線入門<a class="rss-link" href="news/rss.xml"><img src="images/rss.png" /></a>
</h1> </h1>
<h2>A free, online book for when you really need to know how to do Bézier things.</h2> <h2>A free, online book for when you really need to know how to do Bézier things.</h2>
<span>Read this in your own language:</span> <div>
<ul class="lang-switcher"> <span>Read this in your own language:</span>
<li><a href="./index.html">English</a></li> <ul class="lang-switcher">
<li><a href="./ja-JP/index.html">日本語</a></li> <li><a href="./index.html">English</a></li>
<li><a href="./zh-CN/index.html">中文</a></li> <li><a href="./ja-JP/index.html">日本語</a></li>
</ul> <li><a href="./zh-CN/index.html">中文</a></li>
<p>Don't see your language listed? <a href="https://github.com/Pomax/BezierInfo-2/wiki/localize">Help translate this content!</a></p> </ul>
<p>(Don't see your language listed? <a href="https://github.com/Pomax/BezierInfo-2/wiki/localize">Help translate this content!</a>)</p>
</div>
<p>
Welcome to the Primer on Bezier Curves. This is a free website/ebook dealing with both the maths and programming aspects of Bezier Curves,
covering a wide range of topics relating to drawing and working with that curve that seems to pop up everywhere, from Photoshop paths to CSS
easing functions to Font outline descriptions.
</p>
<p>
If this is your first time here: welcome! Let me know if you were looking for anything in particular that the primer doesn't cover over on the
<a href="https://github.com/Pomax/BezierInfo-2/issues">issue tracker</a>!
</p>
<p>
If this is a resource that you're using for research, or writing your own software, please consider
<a href="https://www.paypal.com/donate/?cmd=_s-xclick&hosted_button_id=3BNHGHZAS3DP6&locale.x=en_CA">donating</a> (any amount helps) or
signing up as <a href="https://www.patreon.com/bezierinfo">a patron on Patreon</a>. I don't get paid to work on this, so if you find this site
valuable, and you'd like it to stick around for a long time to come, a lot of coffee went into writing this over the years, and a lot more
coffee will need to go into it yet: if you can spare a coffee, you'd be helping keep a resource alive and well!
</p>
<p>— <a href="https://twitter.com/TheRealPomax">Pomax</a></p>
<noscript> <noscript>
<div class="note"> <div class="note">
<header> <header>
@@ -246,7 +268,6 @@
</p> </p>
</div> </div>
<p>—Pomax (Twitter上では<a href="https://twitter.com/TheRealPomax">@TheRealPomax</a>)</p>
<div class="note"> <div class="note">
<h2>注：ベジエの図はすべてインタラクティブになっています。</h2> <h2>注：ベジエの図はすべてインタラクティブになっています。</h2>
<p>このページでは<a href="https://pomax.github.io/bezierjs/">Bezier.js</a>を活用し、インタラクティブな例示を行っています。</p> <p>このページでは<a href="https://pomax.github.io/bezierjs/">Bezier.js</a>を活用し、インタラクティブな例示を行っています。</p>

2
docs/news/2020-09-18.html
View File

@@ -27,7 +27,7 @@
<meta property="og:locale" content="en-GB" /> <meta property="og:locale" content="en-GB" />
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
<meta property="og:published_time" content="Thu Sep 17 2020 17:00:00 +00:00" /> <meta property="og:published_time" content="Thu Sep 17 2020 17:00:00 +00:00" />
<meta property="og:updated_time" content="Sat Sep 26 2020 15:53:06 +00:00" /> <meta property="og:updated_time" content="Sun Sep 27 2020 10:04:48 +00:00" />
<meta property="og:author" content="Mike 'Pomax' Kamermans" /> <meta property="og:author" content="Mike 'Pomax' Kamermans" />
<meta property="og:section" content="Bézier Curves" /> <meta property="og:section" content="Bézier Curves" />
<meta property="og:tag" content="Bézier Curves" /> <meta property="og:tag" content="Bézier Curves" />

2
docs/news/index.html
View File

@@ -26,7 +26,7 @@
<meta property="og:description" content="" /> <meta property="og:description" content="" />
<meta property="og:locale" content="en-GB" /> <meta property="og:locale" content="en-GB" />
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
<meta property="og:published_time" content="Sat Sep 26 2020 15:53:06 GMT-0700 (Pacific Daylight Time)" /> <meta property="og:published_time" content="Sun Sep 27 2020 10:04:48 GMT-0700 (Pacific Daylight Time)" />
<meta property="og:updated_time" content="" /> <meta property="og:updated_time" content="" />
<meta property="og:author" content="Mike 'Pomax' Kamermans" /> <meta property="og:author" content="Mike 'Pomax' Kamermans" />
<meta property="og:section" content="Bézier Curves" /> <meta property="og:section" content="Bézier Curves" />

2
docs/news/rss.xml
View File

@@ -6,7 +6,7 @@
<atom:link href="https://pomax.github.io/bezierinfo" rel="self"></atom:link> <atom:link href="https://pomax.github.io/bezierinfo" rel="self"></atom:link>
<description>News updates for the <a href="https://pomax.github.io/bezierinfo">primer on Bézier Curves</a> by Pomax</description> <description>News updates for the <a href="https://pomax.github.io/bezierinfo">primer on Bézier Curves</a> by Pomax</description>
<language>en-GB</language> <language>en-GB</language>
<lastBuildDate>Sat Sep 26 2020 15:53:06 +00:00</lastBuildDate> <lastBuildDate>Sun Sep 27 2020 10:04:48 +00:00</lastBuildDate>
<image> <image>
<url>https://pomax.github.io/bezierinfo/images/og-image.png</url> <url>https://pomax.github.io/bezierinfo/images/og-image.png</url>
<title>A Primer on Bézier Curves</title> <title>A Primer on Bézier Curves</title>

113
docs/style.css
View File

@@ -65,9 +65,12 @@ body {
} }
} }
/* a,
TODO: add in prefers-color-scheme? This would definitely make graphics weird. a:visited {
*/ color: rgb(0, 0, 238);
}
/* --------------------- */
h1 { h1 {
background: var(--heading-color); background: var(--heading-color);
@@ -89,6 +92,10 @@ h1 div.nav a + a {
margin-left: 1em; margin-left: 1em;
} }
header h2 + div {
text-align: center;
}
ul.lang-switcher { ul.lang-switcher {
display: inline; display: inline;
text-indent: 0; text-indent: 0;
@@ -102,6 +109,20 @@ ul.lang-switcher li {
padding: 0 0.2em; padding: 0 0.2em;
margin: 0; margin: 0;
} }
ul.lang-switcher + p {
font-size: 85%;
margin: 0;
}
@media screen and (min-width: 992px) {
ul.lang-switcher + p {
display: inline;
margin-left: 0.25em;
font-size: 75%;
}
}
/* --------------------- */
label[for="changelogtoggle"] { label[for="changelogtoggle"] {
display: inline-block; display: inline-block;
@@ -130,6 +151,8 @@ main {
display: none; display: none;
} }
/* --------------------- */
#chapters { #chapters {
counter-reset: section; counter-reset: section;
} }
@@ -140,14 +163,19 @@ main {
margin-right: 1em; margin-right: 1em;
} }
#chapters section h1 {
position: sticky;
top: 0;
z-index: 2;
border-bottom: 1px solid black;
}
#chapters section > h1 > a { #chapters section > h1 > a {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
graphics-element { /* --------------------- */
background: #e8e8e8;
}
div.print { div.print {
display: none; display: none;
@@ -180,6 +208,7 @@ div.note {
border: 1px solid black; border: 1px solid black;
background: var(--note-block-color); background: var(--note-block-color);
margin: 1em; margin: 1em;
margin-top: 2em;
padding: 1em 1em 0 1em; padding: 1em 1em 0 1em;
} }
@@ -195,6 +224,8 @@ div.note:before {
left: -1em; left: -1em;
} }
/* --------------------- */
img.LaTeX.SVG { img.LaTeX.SVG {
margin: 0; margin: 0;
background: white; background: white;
@@ -226,33 +257,10 @@ pre img.LaTeX.SVG {
} }
} }
pre { /* --------------------- */
display: inline-block;
margin-left: 0;
background-color: var(--code-block-color);
padding: 0.5em;
border: 1px dotted gray;
}
@media screen and (min-width: 768px) { graphics-element {
pre { background: #e8e8e8;
margin-left: 1em;
}
}
code {
font-family: Courier;
}
li code,
p code {
display: inline-block;
border: 1px solid #ddd;
border-radius: 5px;
padding: 0 5px;
background: #eee;
font-weight: bold;
vertical-align: 1px;
} }
table.slider-wrapper { table.slider-wrapper {
@@ -298,6 +306,8 @@ table.slider-wrapper {
flex-wrap: wrap; flex-wrap: wrap;
} }
/* --------------------- */
hr { hr {
width: calc(100% + 2 * var(--body-padding)); width: calc(100% + 2 * var(--body-padding));
position: relative; position: relative;
@@ -337,6 +347,8 @@ div.scl {
display: none; display: none;
} }
/* --------------------- */
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
div.scl { div.scl {
display: block; display: block;
@@ -381,10 +393,43 @@ div.github img area {
cursor: pointer; cursor: pointer;
} }
/* --------------------- */
h5.post-date { h5.post-date {
text-align: right; text-align: right;
} }
/* --------------------- */
li code,
p code {
display: inline-block;
border: 1px solid #ddd;
border-radius: 5px;
padding: 0 5px;
background: #eee;
font-weight: bold;
vertical-align: 1px;
}
pre {
display: inline-block;
margin-left: 0;
background-color: var(--code-block-color);
padding: 0.5em;
border: 1px dotted gray;
}
@media screen and (min-width: 768px) {
pre {
margin-left: 1em;
}
}
code {
font-family: Courier;
}
table.code { table.code {
border-collapse: collapse; border-collapse: collapse;
margin: 0; margin: 0;
@@ -437,8 +482,12 @@ table.code tr td:first-child {
border-right: 1px solid red; border-right: 1px solid red;
} }
/* --------------------- */
a.rss-link { a.rss-link {
position: relative; position: relative;
z-index: 10; z-index: 10;
float: right; float: right;
} }
/* --------------------- */

39
docs/zh-CN/index.html
View File

@@ -33,7 +33,7 @@
<meta property="og:locale" content="zh-CN" /> <meta property="og:locale" content="zh-CN" />
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" /> <meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
<meta property="og:updated_time" content="2020-09-26T22:53:06+00:00" /> <meta property="og:updated_time" content="2020-09-27T17:04:48+00:00" />
<meta property="og:author" content="Mike 'Pomax' Kamermans" /> <meta property="og:author" content="Mike 'Pomax' Kamermans" />
<meta property="og:section" content="Bézier Curves" /> <meta property="og:section" content="Bézier Curves" />
<meta property="og:tag" content="Bézier Curves" /> <meta property="og:tag" content="Bézier Curves" />
@@ -123,13 +123,35 @@
贝塞尔曲线底漆<a class="rss-link" href="news/rss.xml"><img src="images/rss.png" /></a> 贝塞尔曲线底漆<a class="rss-link" href="news/rss.xml"><img src="images/rss.png" /></a>
</h1> </h1>
<h2>A free, online book for when you really need to know how to do Bézier things.</h2> <h2>A free, online book for when you really need to know how to do Bézier things.</h2>
<span>Read this in your own language:</span> <div>
<ul class="lang-switcher"> <span>Read this in your own language:</span>
<li><a href="./index.html">English</a></li> <ul class="lang-switcher">
<li><a href="./ja-JP/index.html">日本語</a></li> <li><a href="./index.html">English</a></li>
<li><a href="./zh-CN/index.html">中文</a></li> <li><a href="./ja-JP/index.html">日本語</a></li>
</ul> <li><a href="./zh-CN/index.html">中文</a></li>
<p>Don't see your language listed? <a href="https://github.com/Pomax/BezierInfo-2/wiki/localize">Help translate this content!</a></p> </ul>
<p>(Don't see your language listed? <a href="https://github.com/Pomax/BezierInfo-2/wiki/localize">Help translate this content!</a>)</p>
</div>
<p>
Welcome to the Primer on Bezier Curves. This is a free website/ebook dealing with both the maths and programming aspects of Bezier Curves,
covering a wide range of topics relating to drawing and working with that curve that seems to pop up everywhere, from Photoshop paths to CSS
easing functions to Font outline descriptions.
</p>
<p>
If this is your first time here: welcome! Let me know if you were looking for anything in particular that the primer doesn't cover over on the
<a href="https://github.com/Pomax/BezierInfo-2/issues">issue tracker</a>!
</p>
<p>
If this is a resource that you're using for research, or writing your own software, please consider
<a href="https://www.paypal.com/donate/?cmd=_s-xclick&hosted_button_id=3BNHGHZAS3DP6&locale.x=en_CA">donating</a> (any amount helps) or
signing up as <a href="https://www.patreon.com/bezierinfo">a patron on Patreon</a>. I don't get paid to work on this, so if you find this site
valuable, and you'd like it to stick around for a long time to come, a lot of coffee went into writing this over the years, and a lot more
coffee will need to go into it yet: if you can spare a coffee, you'd be helping keep a resource alive and well!
</p>
<p>— <a href="https://twitter.com/TheRealPomax">Pomax</a></p>
<noscript> <noscript>
<div class="note"> <div class="note">
<header> <header>
@@ -231,7 +253,6 @@
<p> <p>
那么，要是你自己想编程实现它们呢？有哪些陷阱？你怎么画它们？包围盒是怎么样的，怎么确定交点，怎么拉伸曲线，简单来说：你怎么对曲线做一切你想做的事？这就是这篇文章想说的。准备好学习一些数学吧! 那么，要是你自己想编程实现它们呢？有哪些陷阱？你怎么画它们？包围盒是怎么样的，怎么确定交点，怎么拉伸曲线，简单来说：你怎么对曲线做一切你想做的事？这就是这篇文章想说的。准备好学习一些数学吧!
</p> </p>
<p>—Pomax (推特账号, <a href="https://twitter.com/TheRealPomax">@TheRealPomax</a>)</p>
<div class="note"> <div class="note">
<h2>注意：几乎所有的贝塞尔图形都是可交互的。</h2> <h2>注意：几乎所有的贝塞尔图形都是可交互的。</h2>
<p>这个页面使用了基于<a href="https://pomax.github.io/bezierjs/">Bezier.js</a> 的可交互例子。</p> <p>这个页面使用了基于<a href="https://pomax.github.io/bezierjs/">Bezier.js</a> 的可交互例子。</p>

12
src/html/index.template.html
View File

@@ -46,9 +46,15 @@
{% block header %} {% block header %}
<h1>{{ title }}<a class="rss-link" href="news/rss.xml"><img src="images/rss.png"></a></h1> <h1>{{ title }}<a class="rss-link" href="news/rss.xml"><img src="images/rss.png"></a></h1>
<h2>{{ subtitle }}</h2> <h2>{{ subtitle }}</h2>
<span>{{ langSwitchLabel }}</span> <div>
<ul class="lang-switcher">{{ langSwitcher }}</ul> <span>{{ langSwitchLabel }}</span>
<p>{{ langHelpLabel }}</p> <ul class="lang-switcher">{{ langSwitcher }}</ul>
<p>({{ langHelpLabel }})</p>
</div>
{{ longDescription }}
<p>
— <a href="https://twitter.com/TheRealPomax">Pomax</a>
</p>
{% include "./fragments/noscript.html" %} {% include "./fragments/noscript.html" %}
{% include "./fragments/toc.html" %} {% include "./fragments/toc.html" %}
{% endblock %} {% endblock %}

24
src/locale-strings.js
View File

@@ -16,6 +16,30 @@ const localeStringData = {
description: { description: {
"en-GB": `A detailed explanation of Bézier curves, and how to do the many things that we commonly want to do with them.`, "en-GB": `A detailed explanation of Bézier curves, and how to do the many things that we commonly want to do with them.`,
}, },
longDescription: {
"en-GB": `
<p>
Welcome to the Primer on Bezier Curves. This is a free website/ebook dealing with both
the maths and programming aspects of Bezier Curves, covering a wide range of topics
relating to drawing and working with that curve that seems to pop up everywhere, from
Photoshop paths to CSS easing functions to Font outline descriptions.
</p>
<p>
If this is your first time here: welcome! Let me know if you were looking for anything
in particular that the primer doesn't cover over on the <a href="https://github.com/Pomax/BezierInfo-2/issues">issue tracker</a>!
</p>
<p>
If this is a resource that you're using for research, or writing your own software,
please consider <a href="https://www.paypal.com/donate/?cmd=_s-xclick&hosted_button_id=3BNHGHZAS3DP6&locale.x=en_CA">donating</a>
(any amount helps) or signing up as <a href="https://www.patreon.com/bezierinfo">a patron on Patreon</a>.
I don't get paid to work on this, so if you find this site valuable, and you'd like it
to stick around for a long time to come, a lot of coffee went into writing this over the
years, and a lot more coffee will need to go into it yet: if you can spare a coffee, you'd
be helping keep a resource alive and well!
</p>
`,
},
tocLabel: { tocLabel: {
"en-GB": `Table of Contents`, "en-GB": `Table of Contents`,
"ja-JP": `目次`, "ja-JP": `目次`,