VSinerva/freesewing
1
0
Fork 0
Code Activity

feat: Flat import of markdown repo

Browse source 
This is a flat (without history) import of (some of) the content
from our markdown module.

We've imported this without history because the repo contains our
blog posts and showcases posts content prior to porting them to strapi.

Since this contains many images, it would balloon the size of this repo
to import the full history.

Instead, please refer to the history of the (archived) markdown repo
at: https://github.com/freesewing/markdown
This commit is contained in:
Joost De Cock 2021-08-25 16:09:31 +02:00
parent 1671a896b5
commit b34a2ee2ed
6132 changed files with 244167 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

54
markdown/dev/howtos/code/adding-text/en.md Normal file
View file

@ -0,0 +1,54 @@
---
title: Adding text
for: developers
about: Shows you how to add text to your pattern
---
SVG is pretty great, but its text handling leaves much to be desired.
To abstract away the intricacies of adding text to an SVG document,
FreeSewing lets you add text to patterns by adding it to the attributes
of points and paths.
All you have to do is set the `data-text` attribute to the text you want to add to the pattern:
```js
points.anchor = new Point(100, 25)
.attr("data-text", "freesewingIsMadeByJoostDeCockAndContributors")
.attr("data-text-class", "center");
```
<Example
part="point_attr"
caption="Text inserted in a FreeSewing pattern"
/>
<Note>
You may have noticed that the text we inserted isn't the text that's shown.
That is because, in line with our [best practices](/guides/best-practices) we allow translation of
our pattern by inserting a key that is used to lookup the string in the language
of the pattern, using [the i18n plugin](/reference/plugins/i18n).
</Note>
You can use the same approach to add text to a path:
```js
points.B = new Point(10, 50);
points.BCp2 = new Point(40, 10);
points.C = new Point(90, 30);
points.CCp1 = new Point(50, 90);
paths.example = new Path()
.move(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.attr("class", "canvas")
.attr("data-text", "freesewingIsMadeByJoostDeCockAndContributors")
.attr("data-text-class", "text-xs center");
```
<Example
part="path_attr"
caption="Text on a path"
/>