svg-paper - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

docs/workflows/README.md

package.json

		{
		"name": "svg-paper",
		"version": "0.0.2",
		"version": "0.0.3",
		"description": "The world's most maintainable way to create paper-printable documents 🖨💘",
		@@ -5,0 +5,0 @@ "homepage": "https://github.com/ttskch/svg-paper",

README.md

		@@ -12,3 +12,3 @@ # svg-paper

		## Concepts
		## Workflows

		@@ -22,2 +22,4 @@ You can print beautiful and maintainable paper documents by following steps:

		To learn more please see [this doc](docs/workflows/README.md) 📝

		## Installation
		@@ -27,5 +29,8 @@

		You can get built assets from [jsDelivr](https://www.jsdelivr.com/package/npm/svg-paper).

		```html
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/svg-paper@0.0.0/dist/svg-paper.min.css">
		<script src="https://cdn.jsdelivr.net/npm/svg-paper@0.0.0/dist/svg-paper.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/svg-paper@x.x.x/dist/svg-paper.min.css">

		<script src="https://cdn.jsdelivr.net/npm/svg-paper@x.x.x/dist/svg-paper.min.js"></script>
		```
		@@ -35,2 +40,4 @@

		Of course you can install via [npm](https://www.npmjs.com/package/svg-paper).

		```bash
		@@ -40,29 +47,6 @@ $ npm install svg-paper

		## Preparing SVG template
		## Basic usage

		### Using Adobe XD is strongly recommended
		You can replace or adjust SVG contents in HTML easily with svg-paper like following.

		If you use Adobe XD, you are lucky because if you put some placeholders in the artboard like `%placeholder1%` or `%serialPlaceholder[0]%`, Adobe XD assigns id to `<text>` elements like `_placeholder1_` or `_serialPlaceholder_0_` automatically.

		From this, you can embed the exported SVG into your HTML without any modification even if you use characters that cannot be used for id, and as a result, you can replace only placeholder as a value without replacing id 🙌

		### Figma is not very good...

		Figma doesn't do these things like Adobe XD. So if you use Figma, you have to replace id for example like as following.

		```bash
		$ sed -E 's/id="%([^%]+)%"/id="_\1_"/' /path/to/exported-from-figma.svg \
		\| sed -E 's/id="_(.+)\[(.+)\]_"/id="_\1_\2_"/' > /path/to/exported-from-figma.tweaked.svg
		```

		This command converts ids to safe format.

		And one more thing. With Figma, not using multi-byte characters in your placeholder labels is strongly recommended.

		If you use multi-byte characters, Figma converts them into [XML character reference](https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references#Character_reference_overview) when exporting. This is very inconvenient to replace or specify as id.

		## Basic usage of svg-paper

		Anyway, once SVG template is ready, rest is so easy 👍 You can replace or adjust contents easily with svg-paper like following.

		```js
		@@ -107,3 +91,3 @@ import SvgPaper from 'svg-paper'

		To beautify preview screen, you only have to add 3 lines to your html 👍
		To beautify preview screen, you should add only 3 lines to your HTML 👍

		@@ -122,3 +106,3 @@ ```html

		First load `svg-paper.min.css` (or `svg-paper.css`). After that in `<head>` set [@page size](https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size) and set the class of `<body>` to specify page size.
		Just load `svg-paper.min.css` (or `svg-paper.css`), in `<head>` set [@page size](https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size), and set the class of `<body>` to specify page size.

		@@ -133,18 +117,11 @@ Available page sizes are:

		### Learn more
		To learn more about usage please see [this doc](docs/workflows/README.md) or [some test codes](js/tests/real-world.test.js).

		Please see [test code](js/tests/functional.test.js) to learn more 👌
		## Tips

		You also can see the live demo on your local by following steps:
		### Hiding content before placeholders are replaced

		1. `git clone` this repo
		1. `npm install`
		1. `npm run test js/tests/functional.test.js`
		1. open `js/tests/output/real-world-paper-xd.html` or `js/tests/output/real-world-paper-figma.html` in your browser

		### Tips: Hiding content before placeholders are replaced

		svg-paper replaces placeholders and adjust text/textarea after DOM loaded, so the content before replaced and adjusted will be shown on the screen for a moment 🤔

		This problem is very easy to solve just by adding some "blinder" layer on the content and hide it after `.apply()` 👍
		This problem is very easy to solve just by adding some "blinder" layer on the content and disappear it after `.apply()` 👍

		@@ -164,7 +141,8 @@ ```html


		## With non Node.js back-end

		If your back-end isn't Node.js, you can use svg-paper by passing replacements and text/textarea adjustment parameters to front-end as JSON string.
		Even if your back-end isn't Node.js, of course you can use svg-paper 👍

		The most easy ways is just passing replacements and text/textarea adjustment parameters to front-end as JSON string.

		### e.g. PHP and Twig
		@@ -228,6 +206,2 @@
		<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
		<title>Paper</title>
		<link rel="stylesheet" href="svg-paper.min.css">
		@@ -273,3 +247,3 @@ <style>@page { size: A4 }</style>

		You can easily print to PDF by using [electron-pdf](https://github.com/fraserxu/electron-pdf).
		You can easily print to PDF directly by using [electron-pdf](https://github.com/fraserxu/electron-pdf).

		@@ -280,1 +254,3 @@ ```bash
		```

		Enjoy! ✨

dist/svg-paper.css