Font rendering (on OS-X)

[Tom Schindl]

Hi,

I worked around my problem for now by positioning the text myself
instead of use TextFlow.

The work around works only for monospaced fonts and if all fonts are the
same (family & size) in a line but for source-code editors one most of
the time uses a monospaced font.

Tom

On 09.01.15 19:19, Tom Schindl wrote:
> Hi,
> 
> I uploaded it to youtube let's hope you can see it there.
> 
> http://youtu.be/jcrWRup6sxI
> 
> First of all I can "accept" that the "DEF" are slightly shifted when I
> split the string but what I really don't fully grasp is why DE don't
> shift with a font-size of 25 but only F does so.
> 
> Anyways the application is reproducing a real world problem of my
> StyledText control where I make up each line of a TextFlow element.
> 
> So suppose we have the following text
> 
> public String
> 
> is made up of (in pseudo syntax)
> 
> <TextFlow>
>  <Text text="public" styleclass="keyword">
>  <Text text="String" styleclass="default">
> </TextFlow>
> 
> Now my problem is that when I have to implement selection of text parts
> e.g. "Stri" I need to split up the text element and end up with
> 
> <TextFlow>
>  <Text text="public" styleclass="keyword">
>  <TextFlow styleclass="selected">
>   <Text text="Stri" styleclass="default"/>
>  </TextFlow>
>  <Text text="ng" styleclass="default"/>
> </TextFlow>
> 
> which leads to a visual shifting for the user which makes the editor
> experience not as good as it could be. If TextFlow is unable to cope
> with this problem I need to see how to solve this thing in a much more
> complex way by position a appropiately sized Region behind the text.
> 
> 
> Tom
> 
> On 09.01.15 18:49, Phil Race wrote:
>> I tried on firefox and Safari and then downloaded to my Mac and tried
>> directly from disk
>> using quicktime but it still failed ..
>>
>> -phil.
>>
>> On 1/9/15 9:47 AM, Kevin Rushforth wrote:
>>> I tried the video on Firefox, which said "Video can't be played
>>> because the file is corrupt."
>>>
>>> So I tried it on Chrome and it plays fine for me (as an aside, I find
>>> Chrome to be the most robust browser these days even though I haven't
>>> quite made the switch from Firefox as my default browser).
>>>
>>> -- Kevin
>>>
>>>
>>> Phil Race wrote:
>>>> PS .. your video came up all black for me ..
>>>>
>>>> -phil.
>>>>
>>>> On 1/9/15 9:37 AM, Phil Race wrote:
>>>>> Glyphs advances are accumulated in floating point and the rendering
>>>>> of the glyph sub-pixel positioned.
>>>>> The nodes however are I expect, positioned at an integer position
>>>>> and in
>>>>> any case I am pretty sure that the fractional advance at the end of
>>>>> "ABC" is not passed
>>>>> on to the start of drawing "DEF".
>>>>> So I think you are just seeing a subtle consequence of rounding
>>>>> because the
>>>>> starting position of the first glyph in the 2nd text node/string is
>>>>> not the same as you will get if
>>>>> you draw it as one string. Where exactly it happens (at which glyph)
>>>>> will depend on
>>>>> the way the numbers work out. Whether it happens elsewhere will depend
>>>>> on the advances the platform returns, but its possible.
>>>>>
>>>>> Its possible that with some amount of work that TextFlow could pass
>>>>> on this
>>>>> information so that its less apparent but I don't know off-hand what
>>>>> would
>>>>> be involved or how complete a fix it would be. Nor whether its
>>>>> actually worth
>>>>> the effort for this case.
>>>>>
>>>>> -phil.
>>>>>
>>>>> On 1/9/15 8:27 AM, Tom Schindl wrote:
>>>>>> Hi,
>>>>>>
>>>>>> I know font rendering has been discussed a lot already on this
>>>>>> forum but
>>>>>> I don't want to talk about sharpness of text but very strange
>>>>>> effects of
>>>>>> glyph positioning.
>>>>>>
>>>>>> The program below switches between 1 and 2 text-nodes which results in
>>>>>> strange effects at least on my OS-X box.
>>>>>>
>>>>>> With a font size 15 you see the 2nd text shifting a bit to the
>>>>>> right now
>>>>>> you could explain this with rounding but it gets even more interesting
>>>>>> if you make the font size 25 suddenly the F is changing its position!
>>>>>>
>>>>>> I recorded a video showing the behavior on my system at
>>>>>> http://efxclipse.bestsolution.at/ScreenFlow.mp4
>>>>>>
>>>>>> My questions are:
>>>>>> a) does that happen on other OSes as well
>>>>>> b) does anyone have an idea where I could start searching
>>>>>> c) do you think this can be fixed?
>>>>>>
>>>>>>
>>>>>>> package application;
>>>>>>>
>>>>>>>
>>>>>>> import javafx.application.Application;
>>>>>>> import javafx.scene.Node;
>>>>>>> import javafx.scene.Scene;
>>>>>>> import javafx.scene.control.Button;
>>>>>>> import javafx.scene.control.TextField;
>>>>>>> import javafx.scene.layout.VBox;
>>>>>>> import javafx.scene.text.Font;
>>>>>>> import javafx.scene.text.Text;
>>>>>>> import javafx.scene.text.TextFlow;
>>>>>>> import javafx.stage.Stage;
>>>>>>>
>>>>>>> public class TestMe extends Application {
>>>>>>>
>>>>>>>     private TextField fontSize;
>>>>>>>     private TextField text;
>>>>>>>
>>>>>>>     @Override
>>>>>>>     public void start(Stage primaryStage) throws Exception {
>>>>>>>         VBox b = new VBox();
>>>>>>>
>>>>>>>         text = new TextField("ABCDEF");
>>>>>>>         b.getChildren().add(text);
>>>>>>>
>>>>>>>         fontSize = new TextField("15");
>>>>>>>         b.getChildren().add(fontSize);
>>>>>>>
>>>>>>>         TextFlow f = new TextFlow(createText(text.getText()));
>>>>>>>
>>>>>>>         b.getChildren().add(f);
>>>>>>>         Button bu = new Button("Split text");
>>>>>>>         bu.setOnAction((e) -> {
>>>>>>>             if( f.getChildren().size() == 1 ) {
>>>>>>>                 int l = text.getText().length() / 2;
>>>>>>>
>>>>>>> f.getChildren().setAll(createText(text.getText().substring(0,
>>>>>>> l)),createText(text.getText().substring(l)));
>>>>>>>                 bu.setText("One Text");
>>>>>>>             } else {
>>>>>>> f.getChildren().setAll(createText(text.getText()));
>>>>>>>                 bu.setText("Split text");
>>>>>>>             }
>>>>>>>         });
>>>>>>>         b.getChildren().add(bu);
>>>>>>>
>>>>>>>         Scene s = new Scene(b);
>>>>>>> s.getStylesheets().add(TestMe.class.getResource("application.css").toExternalForm());
>>>>>>>
>>>>>>>         primaryStage.setScene(s);
>>>>>>>         primaryStage.show();
>>>>>>>     }
>>>>>>>
>>>>>>>     private Node createText(String text) {
>>>>>>>         Text t = new Text(text);
>>>>>>> //        t.setSmooth(false);
>>>>>>> t.setFont(Font.font(Integer.parseInt(fontSize.getText())));
>>>>>>>         return t;
>>>>>>>     }
>>>>>>>
>>>>>>>     public static void main(String[] args) {
>>>>>>>         Application.launch(args);
>>>>>>>     }
>>>>>>> }
>>>>>>
>>>>>> Tom
>>>>>>
>>>>>
>>>>
>>
> 
> 


-- 
Thomas Schindl, CTO
BestSolution.at EDV Systemhaus GmbH
Eduard-Bodem-Gasse 5-7, A-6020 Innsbruck
http://www.bestsolution.at/
Reg. Nr. FN 222302s am Firmenbuchgericht Innsbruck