Skip to content

[docs] Add a section about non-ascii characters to text component. #3643

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ngokevin merged 1 commit into from
Jun 22, 2018
Merged

[docs] Add a section about non-ascii characters to text component. #3643

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
23 changes: 23 additions & 0 deletions docs/components/text.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,29 @@ the SDF font, DejaVu:
[fontexampleimage]: http://i.imgur.com/iWtXHm5.png
![Arial Black vs. Deja Vu][fontexampleimage]

### Non-ASCII Characters

To use non-ascii characters, you need to create your own custom font. The easiest way is to use [a web-based MSDF tool][msdf-bmfont-web]. Select your required character set and generate your own custom msdf font zip file.

Once you download your custom msdf font zip file, extract it and rename `*.png` to `*-msdf.png`, then put both png and json files to your A-Frame directory.
Copy link
Member

@donmccurdy donmccurdy Jun 14, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm do we know why the PNG needs to be renamed? The filename is listed inside the JSON file; I'm surprised by this. 🤔

Copy link
Contributor Author

@yuseitahara yuseitahara Jun 14, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is because text component loads an image named fontName-msdf.png by default. It does not use image filename in json.

See

aframe/src/components/text.js

Line 253 in dcdc123

return this.data.fontImage || fontSrc.replace(/(\.fnt)|(\.json)/, '.png');

Copy link
Contributor Author

@yuseitahara yuseitahara Jun 16, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we fix text component?


Lastly, you should specify the character set used in your HTML by using `<meta>` tag to avoid text to be garbled. If your text is garbled, it is not rendered.

```html
<html>
<head>
<meta charset="UTF-8">
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
Copy link
Member

@dmarcos dmarcos Jun 14, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we use https://aframe.io/releases/latest/aframe.min.js ?

Copy link
Contributor Author

@yuseitahara yuseitahara Jun 14, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems that https://aframe.io/releases/latest/aframe.min.js is deprecated and is permanently pinned to v0.1.3...

Copy link
Member

@ngokevin ngokevin Jun 18, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correct, we do not use latest. People would use latest, then A-Frame upgrades, then hundreds of sites would break instantly.

</head>
<body>
<a-scene>
<a-sky color="lightblue"></a-sky>
<a-text value="ABCあいうえお日本語" font="custom-msdf.json" negate="false" scale="2 2 1" position="-2 2 -4"></a-text>
</a-scene>
</body>
</html>
```

## Sizing

[position]: ./position.md
Expand Down