search

JirkaDellOro / FUDGE_Story

A FUDGE module for the easy development of interactive stories, visual novels and simple adventure games
https://jirkadelloro.github.io/FUDGE_Story/
7 stars 9 forks source link

CSS Textgröße an Canvas binden #26

Closed OrianeJoublin closed 1 year ago

OrianeJoublin commented 2 years ago

Ich hab jetzt einiges ausprobiert, aber ich schaffe es nicht, dass sich die Schriftgröße an die Größe des Hintergrundbildes anpasst und sich damit auch die Position des Texts nicht ändert. Also quasi, dass der Text (Position und Größe) immer proportional zur Canvasgröße bleibt, egal wie groß das Fenster/ Viewport ist. Soweit ich weiß, müsste das mit CSS machbar sein, wenn Speech hierarchisch unter Canvas angeordnet wäre, aber das kann ich selbst, soweit ich weiß, nicht ändern, weil das mit Fudge Story zusammenhängt? Ich hoffe, das ergibt Sinn.

Code: https://github.com/OrianeJoublin/VisualNovel/tree/main/Template Laufende Novel: https://orianejoublin.github.io/VisualNovel/Template/index.html

JirkaDellOro commented 2 years ago

Hast Du mal z.B. bei solchen Posts geschaut? https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container

OrianeJoublin commented 2 years ago

Ich habe mir den Artikel mal angeschaut, aber das hatte ich schon probiert. Ich verstehe, wie man die Schriftgröße proportional zur Viewport Width oder proportional zur Height gestaltet. Das Problem ist, dass die width und height des Canvas von Fudge Story angepasst wird, sodass das Aspect-Ratio des Canvas konstant bleibt (so habe ich das an der Stelle des Screenshots verstanden). Das heißt ich müsste die Font Size je nach Aspect-Ratio des Viewports propotional zur Width oder zur Height definieren. Ich weiß nicht, wie ich das mit CSS machen kann. image

Rina14 commented 2 years ago 
p {
 font-size: 2vw;
}

Hiermit sollte es klappen. Probier' das mal bitte aus und schließ den Issue, falls es geklappt hat.

OrianeJoublin commented 2 years ago

Hab es probiert uns es löst das Problem nicht.

JirkaDellOro commented 2 years ago

öh... ist das nicht in Examples/Test schon drin? Da steht

font-size: 2.3vmin;

Rina14 commented 2 years ago

Ja, das auch sogar. Also bei mir hat es geklappt, wenn du möchtest können wir sonst noch einmal gemeinsam drüber schauen.

JirkaDellOro commented 2 years ago

Habt ihr das geklärt? In dem Fall bitte Issue schließen. Oder nochmal posten, was genau klemmt...

Rina14 commented 1 year ago

da keine Rückmeldung und es bei mir so klappte wird der Issue geschlossen.