Skip to content
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

Jump to bottom

Inline Text #65

Open
MaxTwentythree opened this issue Jun 24, 2020 · 4 comments
Open

Inline Text #65

MaxTwentythree opened this issue Jun 24, 2020 · 4 comments

Comments

@MaxTwentythree
Copy link

Hi,
first of all many thanks for this great package!

I have a question regarding the troika-3d-text component:

Is there currently a possibility to add two or more TextMeshes such, that they are combined inline:
image
How would I accomplish something like that?
@lojjic
Copy link
Collaborator

lojjic commented Jun 24, 2020

Thanks for the question, it's a good one. The answer is currently: Yes, but it's not documented, and you can only change colors. So you can't mix different fonts, font weights, or sizes. I definitely want to expand that capability in the future, so I'll leave this issue open as a feature request for tracking.

See here for how you'd use the current color support, noting that its API isn't frozen yet:

troika/packages/troika-3d-text/src/three/TextMesh.js

Line 192 in 978ef53

* @member {object|null} colorRanges

So something like colorRanges: {0: 0x000000, 29: 0xff0000}

@MaxTwentythree
Copy link
Author

Awesome! I already saw the colorRange prop .. good to know that this will be the way to go for other inline styles, too .. thank you!

@lojjic lojjic mentioned this issue Aug 17, 2021
Closed
lojjic added a commit that referenced this issue Mar 1, 2022
@lojjic
feat(troika-three-text): initial support for multiple font files spli…
c8b118d 
…t by unicode range - #13

Mimics how CSS @font-face resolves across multiple fonts by unicode-range, only loading
those font files needed for the characters actually used. This allows for more complete
language coverage without having to include everything in one font file, and Latin text
can now load a smaller font file by default. The support is currently limited to an
internal set of fallback fonts, but it will be opened up to the public API soon.

Internally this required supporting varying font metrics between characters, which also
sets us up for inline styling e.g. varying font-size, font-style, etc. - see #65
lojjic added a commit that referenced this issue Mar 16, 2022
@lojjic
feat(troika-three-text): initial support for multiple font files spli…
6a12fa4 
…t by unicode range - #13

Mimics how CSS @font-face resolves across multiple fonts by unicode-range, only loading
those font files needed for the characters actually used. This allows for more complete
language coverage without having to include everything in one font file, and Latin text
can now load a smaller font file by default. The support is currently limited to an
internal set of fallback fonts, but it will be opened up to the public API soon.

Internally this required supporting varying font metrics between characters, which also
sets us up for inline styling e.g. varying font-size, font-style, etc. - see #65
lojjic added a commit that referenced this issue Dec 15, 2022
@lojjic
feat(troika-three-text): initial support for multiple font files spli…
726fa46 
…t by unicode range - #13

Mimics how CSS @font-face resolves across multiple fonts by unicode-range, only loading
those font files needed for the characters actually used. This allows for more complete
language coverage without having to include everything in one font file, and Latin text
can now load a smaller font file by default. The support is currently limited to an
internal set of fallback fonts, but it will be opened up to the public API soon.

Internally this required supporting varying font metrics between characters, which also
sets us up for inline styling e.g. varying font-size, font-style, etc. - see #65
@ghost
Copy link

ghost commented Dec 21, 2022 •
edited by ghost
Loading

@lojjic thanks for that information! Would it be possible to change the background color in certain ranges within the text as well?

Right now I'm thinking it's possible to do that by using getSelectionRects(textRenderInfo, start, end), and rendering rectangles behind the positions I find, or is there an easier way to do that?

@lojjic
Copy link
Collaborator

lojjic commented Dec 21, 2022

@william-mimura-thisdot I think getSelectionRects is the way to go for that.

lojjic added a commit that referenced this issue Jun 29, 2023
@lojjic
feat(troika-three-text): initial support for multiple font files spli…
aae9bee 
…t by unicode range - #13

Mimics how CSS @font-face resolves across multiple fonts by unicode-range, only loading
those font files needed for the characters actually used. This allows for more complete
language coverage without having to include everything in one font file, and Latin text
can now load a smaller font file by default. The support is currently limited to an
internal set of fallback fonts, but it will be opened up to the public API soon.

Internally this required supporting varying font metrics between characters, which also
sets us up for inline styling e.g. varying font-size, font-style, etc. - see #65
@lojjic lojjic mentioned this issue Aug 30, 2023
Closed
lojjic added a commit that referenced this issue Sep 8, 2023
@lojjic
feat(troika-three-text): add fallback font loading for full Unicode s…
6fb8061 
…upport (#279)

* feat(troika-three-text): initial support for multiple font files split by unicode range - #13

Mimics how CSS @font-face resolves across multiple fonts by unicode-range, only loading
those font files needed for the characters actually used. This allows for more complete
language coverage without having to include everything in one font file, and Latin text
can now load a smaller font file by default. The support is currently limited to an
internal set of fallback fonts, but it will be opened up to the public API soon.

Internally this required supporting varying font metrics between characters, which also
sets us up for inline styling e.g. varying font-size, font-style, etc. - see #65

* feat(troika-three-text): add fallback fonts for CJK and support 'lang' prop

* feat(troika-three-text): add Noto Emoji font to fallback list

* fix(troika-three-text): add CJK punctuation to unicode ranges

* feat(troika-three-text): add Arabic and Chinese texts to example

* feat(troika-three-text): integrate unicode-font-resolver for full unicode fallback font coverage

* chore: allow unicode-ranges branch to publish prerelease versions

* v0.48.0-unicode.0

* fix: fontResolverWorkerModule wasn't exported

* v0.48.0-unicode.1

* fix: fix hang on zero-length text

* v0.48.0-unicode.2

* feat: add fontWeight and fontStyle params for fallback font resolution

* v0.48.0-unicode.3

* fix: pre-transpile the unicode-font-resolver lib

* feat: allow configuring unicode-font-resolver data URL

* docs for unicode font loading

* v0.48.0-unicode.4

* chore: update unicode-font-resolver to 1.0.0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@lojjic @MaxTwentythree