Tour (WASM): No text rendered

[jalil-salame]

Is there an existing issue for this?

• I have searched the existing issues.

Is this issue related to iced?

• My hardware is compatible and my graphics drivers are up-to-date.

What happened?

I wanted to do monospace fonts for a text input, seeing that master had iced::Font::MONOSPACE I wanted to try it out. So I switched my project from 0.9.0 to master.

Immediately all text was missing when using the wasm build.

I switched to the tour example on master and there all text is also missing.

The text width seems to be calculated properly (buttons have different widths).

I tried it with trunk serve. Trying the same thing but targeting windows showed no visual issues in the tour.

What is the expected behavior?

Fonts should be visible

Version

master

Operating System

Linux

Do you have any log output?

No response

[stappersg]

I think that "Tour (WASM)" is a reference to https://github.com/iced-rs/iced/blob/master/examples/README.md#tour

Now let's see what will be here first:

• original poster confirming "Yes, that is the tour I mean"
• Some one stating "Tour (WASM)" works for me

[jalil-salame]

It is the tour example: https://github.com/iced-rs/iced/tree/master/examples/tour

[stappersg]

I can reproduce the issue with an unmodified version (in master branch).

As said in #1975, it works in the 0.9 branch.

@jalil-salame please verify if your experiment with monospace font works in the 0.9 branch.

[jalil-salame]

I can reproduce the issue with an unmodified version (in master branch).

As said in #1975, it works in the 0.9 branch.

@jalil-salame please verify if your experiment with monospace font works in the 0.9 branch.

WASM (tour example)

• master: no text
• tag 0.9: yes text

Downloading a monospace font and using it to style elements works in 0.9. The default font works too.

I did not modify the tour example.

I had a label which I wanted to be monospace so I tried switching to the master branch.

When I saw that no text was being rendered. I tested the tour example unmodified.

[stappersg]

Below "screenshot" of my git bisect attempt. The

failed to read `/home/stappers/src/githubforks/glyphon/Cargo.toml`

is odd. ( Sorry for not explaining why I think it is odd.)

$ git bisect bad
Bisecting: 7 revisions left to test after this (roughly 3 steps)
[032e860f13a562719faf128238abe7ffb7f2a610] Fix `PickList` line height
stappers@paddy:~/src/githubforks/iced/examples/tour
$ trunk serve
2023-07-29T15:39:23.858704Z  INFO 📦 starting build
2023-07-29T15:39:23.859366Z  INFO spawning asset pipelines
2023-07-29T15:39:24.044505Z ERROR ❌ error
error from HTML pipeline

Caused by:
    0: error getting cargo metadata
    1: `cargo metadata` exited with an error: error: failed to load manifest for
          workspace member `/home/stappers/src/githubforks/iced/wgpu`
       
       Caused by:
         failed to load manifest for dependency `glyphon`
       
       Caused by:
         failed to read `/home/stappers/src/githubforks/glyphon/Cargo.toml`
       
       Caused by:
         No such file or directory (os error 2)
2023-07-29T15:39:24.046715Z  INFO 📡 serving static assets at -> /
2023-07-29T15:39:24.046781Z  INFO 📡 server listening at http://127.0.0.1:8080
^Cstappers@paddy:~/src/githubforks/iced/examples/tour
$ cargo clean
error: failed to load manifest for workspace member `/home/stappers/src/githubforks/iced/wgpu`

Caused by:
  failed to load manifest for dependency `glyphon`

Caused by:
  failed to read `/home/stappers/src/githubforks/glyphon/Cargo.toml`

Caused by:
  No such file or directory (os error 2)
stappers@paddy:~/src/githubforks/iced/examples/tour
$ cd ../..
stappers@paddy:~/src/githubforks/iced
$ git grep glypon
stappers@paddy:~/src/githubforks/iced
$ cd -
/home/stappers/src/githubforks/iced/examples/tour
stappers@paddy:~/src/githubforks/iced/examples/tour
$ cargo clean
error: failed to load manifest for workspace member `/home/stappers/src/githubforks/iced/wgpu`

Caused by:
  failed to load manifest for dependency `glyphon`

Caused by:
  failed to read `/home/stappers/src/githubforks/glyphon/Cargo.toml`

Caused by:
  No such file or directory (os error 2)
stappers@paddy:~/src/githubforks/iced/examples/tour
$ history | tail -n 25
 2143  git bisect bad
 2144  git bisect good 18584a925a0293e7d
 2145  trunk serve
 2146  git bisect good
 2147  trunk serve
 2148  git bisect bad
 2149  trunk serve
 2150  git bisect bad
 2151  trunk serve
 2152  git bisect bad
 2153  trunk serve
 2154  git bisect bad
 2155  trunk serve
 2156  df
 2157  trunk serve
 2158  less Cargo.toml 
 2159  less ../../Cargo.toml
 2160  git bisect bad
 2161  trunk serve
 2162  cargo clean
 2163  cd ../..
 2164  git grep glypon
 2165  cd -
 2166  cargo clean
 2167  history | tail -n 25
stappers@paddy:~/src/githubforks/iced/examples/tour
$ 

[jalil-salame]

It might be related to pop-os/cosmic-text#148, looking at the trace of another application, cosmic-text is not finding the fonts.

[stappersg]

git bisect result

stappers@messer:~/src/github/iced
$ git status
HEAD detached at b9a95762
You are currently bisecting, started from branch '0.10'.
  (use "git bisect reset" to get back to the original branch)

Untracked files:
  (use "git add <file>..." to include in what will be committed)
	examples/tour/Trunk.toml

nothing added to commit but untracked files present (use "git add" to track)
stappers@messer:~/src/github/iced
$ git bisect log
git bisect start 'bad'
# status: waiting for both good and bad commits
# bad: [529d5110cb2d55dc826960087183dce51295d6a1] Merge branch 'master' into 0.10
git bisect bad 529d5110cb2d55dc826960087183dce51295d6a1
# status: waiting for good commit(s), bad commit known
# good: [18584a925a0293e7d58cbd5e0d1be8f764efa286] Merge branch 'master' into 0.9
git bisect good 18584a925a0293e7d58cbd5e0d1be8f764efa286
# bad: [8ca7b884c0695e4e7a031ea1359ee733bdcaa8a4] Make `Packed` fully opaque
git bisect bad 8ca7b884c0695e4e7a031ea1359ee733bdcaa8a4
# bad: [1bba9a080f796276d5da87bf8decd2ed89ef218a] Fix `Svg` and `Image` primitives in `iced_tiny_skia`
git bisect bad 1bba9a080f796276d5da87bf8decd2ed89ef218a
# bad: [3386402f5a3e75cdacd230f5e76cd54f4868d87d] Implement text alignment support in `iced_tiny_skia`
git bisect bad 3386402f5a3e75cdacd230f5e76cd54f4868d87d
# bad: [c8befa8d95890eb22972f487e08974e962028eda] Fix useless `f32` conversions and please `clippy`
git bisect bad c8befa8d95890eb22972f487e08974e962028eda
# skip: [238154af4ac8dda7f12dd90aa7be106e933bcb30] Implement `font::load` command in `iced_native`
git bisect skip 238154af4ac8dda7f12dd90aa7be106e933bcb30
# skip: [baf51a8fcffc78e4ca20f7dcbba18ca3655f2840] Draft `glyphon` implementation of text pipeline for `iced_wgpu`
git bisect skip baf51a8fcffc78e4ca20f7dcbba18ca3655f2840
# skip: [c8e8b1a7ba47ab13cef2dc7f300fbfcefe1e8a48] Use `bounds` directly for `measure` in text pipeline
git bisect skip c8e8b1a7ba47ab13cef2dc7f300fbfcefe1e8a48
# skip: [15d257a52a994f0110d775eb49ca7e6100b0e1a8] Stop truncating the `renderers` in `text::Pipeline`
git bisect skip 15d257a52a994f0110d775eb49ca7e6100b0e1a8
# bad: [17470bf7d36ee164311020b9d8c79662ac49c166] Fix `clippy` lints :tada:
git bisect bad 17470bf7d36ee164311020b9d8c79662ac49c166
# skip: [02fc7e6e89e0a098a2a8cae8490f36d3bdf8126c] Trim text `render_cache` after rendering in `iced_wgpu`
git bisect skip 02fc7e6e89e0a098a2a8cae8490f36d3bdf8126c
# skip: [1d0c44fb255f5fbf5a03e7c737e40ab66d39de9e] Implement basic text caching in `iced_wgpu`
git bisect skip 1d0c44fb255f5fbf5a03e7c737e40ab66d39de9e
# skip: [98a16fd670d501a0072fee13b023be686ff30cf8] Implement proper text alignment support in `iced_wgpu`
git bisect skip 98a16fd670d501a0072fee13b023be686ff30cf8
# skip: [6b707711469c7298bb363029a0c3d12a7834278c] Avoid unnecessary `Vec` allocation in text pipeline
git bisect skip 6b707711469c7298bb363029a0c3d12a7834278c
# skip: [b29de28d1f0f608f8029c93d154cfd1b0f8b8cbb] Overhaul `Font` type to allow font family selection
git bisect skip b29de28d1f0f608f8029c93d154cfd1b0f8b8cbb
# skip: [032e860f13a562719faf128238abe7ffb7f2a610] Fix `PickList` line height
git bisect skip 032e860f13a562719faf128238abe7ffb7f2a610
# skip: [c68edb3278fdfa3c5ea6b29b9e2213fed56d4e66] Fix `TextInput` line height
git bisect skip c68edb3278fdfa3c5ea6b29b9e2213fed56d4e66
# skip: [0a324f0aebdee06c9cce8ef107b44b847dace05b] Implement `hit_test` for `text::Pipeline` in `iced_wgpu`
git bisect skip 0a324f0aebdee06c9cce8ef107b44b847dace05b
# bad: [5a82fc654e2933c4c93dac5393685861feb07b1f] Use floating coordinates directly in `text::Pipeline`
git bisect bad 5a82fc654e2933c4c93dac5393685861feb07b1f
# skip: [a7580e0696a1a0ba76a89db3f78bc99ba3fbb361] Count `layout_runs` instead of using `visible_lines` in `text::Pipeline::prepare`
git bisect skip a7580e0696a1a0ba76a89db3f78bc99ba3fbb361
# skip: [bb27982009d89a1cf4874697f7c17ff0af71d93d] Convert sRGB to linear RGB for text in `iced_wgpu`
git bisect skip bb27982009d89a1cf4874697f7c17ff0af71d93d
# skip: [ba258f8fbcf72eaabefe193b6fbee6484b44e569] Implement support for multiple text layers in `iced_wgpu`
git bisect skip ba258f8fbcf72eaabefe193b6fbee6484b44e569
# bad: [b9a9576207ddfc7afd89da30b7cfc7ca0d7e335c] Remove `iced_glow`, `glyph-brush`, and `wgpu_glyph` dependencies
git bisect bad b9a9576207ddfc7afd89da30b7cfc7ca0d7e335c
# first bad commit: [b9a9576207ddfc7afd89da30b7cfc7ca0d7e335c] Remove `iced_glow`, `glyph-brush`, and `wgpu_glyph` dependencies
stappers@messer:~/src/github/iced
$ 

First bad commit: b9a9576 (yes, that was a large commit)

[k26pl]

In b9a9576#diff-c981d265dedee6ce4893e68123eeb73e3e5c07aa65dfde6e8f3e2966da0e63dc a lot of font-related things get deleted

[genusistimelord]

its because WASM doesn't load fonts as the browser doesn't allow access to them through the font systems. So you must load them manually if you use WASM. the old font system would Preload these itself as there were only a few fonts. now we auto load all the fonts in the system font folder. just we can not do this for WASM.

WASM is 3rd class support here.

[k26pl]

why aren't we just using native canvas text rendering functions? it will fix some issues, reduce size a lot and increase performance

[genusistimelord]

you would need to be able to implement it in such a way that would allow both to exist as WASM is not the only way this is compiled. Having 2 separate instances also makes maintainability harder. Also the Canvas 2d you still need to tell it what Font to set or it will use a Default Font that the browser will always support off the bat. Also this would be a completely different rendering system then as well.

Hector Could include some preloaded WASM Fonts to use as Defaults. this would help some.

[k26pl]

Possible way to get it working: add function to load font from file. On desktop app it reads the file from fs or include it in binary, and on web it adds <style> loading that font. Then on native use apis used currently and on web native canvas functions.

[ThePerfectComputer]

I'd say that Iced-Web is basically unusable at this point. Last time I saw Iced Web working was in 2022.

[ThePerfectComputer]

Is there a way to add render test for Iced-Web to CICD?