GTK TextView Widget CSS properties

[StarBootics]

Hello everyone,

I'm trying to change the font properties for a GTK TextView Widget by using a CSS Description like that :

Code: Select all

    TextViewCssStyle.s = "" + #LF$
    TextViewCssStyle + "textview text {" + #LF$
    TextViewCssStyle + "background-color: black;" + #LF$
    TextViewCssStyle + "color: white;" + #LF$
    TextViewCssStyle + "caret-color: white;" + #LF$
    TextViewCssStyle + "font: 12pt " + Chr(34) + "JetBrains Mono" + Chr(34) + ";" + #LF$
    TextViewCssStyle + "}" + #LF$
    TextViewCssStyle + ".view text selection {" + #LF$
    TextViewCssStyle + "background-color: blue;" + #LF$
    TextViewCssStyle + "color: yellow;" + #LF$
    TextViewCssStyle + "}"

According to this web (https://docs.gtk.org/gtk3/css-properties.html) it should work but it's not the case. What I'm doing wrong ?

Thanks in advance
StarBootics

[mk-soft]

I think you need this to set css provider for gadgets ...

Link: GTK3 Gadget CSS-Provider

[StarBootics]

Hello mk-soft,

This what I'm doing, because the colors are being changed but not the font it's self and I can't figure out why.

Best regards
StarBootics

[StarBootics]

Hello everyone,

There is a code snippet for testing.

Code: Select all

; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
; Project name : Gtk TextView Demo
; File Name : Gtk TextView Demo.pb
; File version: 1.0.0
; Programming : Partially working
; Programmed by : StarBootics
; Date : March 25th,2022
; Last Update : March 25th,2022
; PureBasic code : V6.00 Beta 5
; Platform : Windows, Linux, MacOS X
; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
; Programming Notes
;
; What is working 
; - Background color 
; - Text Color
; - Caret Color
; - Selection Background color
; - Selection color
;
; What is not working
; - Font size
; - Font name
;
; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

#GTK_STYLE_PROVIDER_PRIORITY_FALLBACK = 1
#GTK_STYLE_PROVIDER_PRIORITY_THEME = 200
#GTK_STYLE_PROVIDER_PRIORITY_SETTINGS = 400
#GTK_STYLE_PROVIDER_PRIORITY_APPLICATION = 600
#GTK_STYLE_PROVIDER_PRIORITY_USER = 800

ImportC ""
  
  gtk_text_view_new()
  gtk_widget_get_style_context(*TextView)
  gtk_style_context_add_class(*TextView, ClassName.p-utf8)
  gtk_css_provider_new()
  gtk_css_provider_load_from_data(*CssProvider, CssStyle.p-utf8, Length.i, *Error.GError)
  gtk_style_context_add_provider(*StyleContext, *CssProvider, Priority.i)
  
EndImport

TextViewCssStyle.s = "" + #LF$
TextViewCssStyle + "textview text {" + #LF$
TextViewCssStyle + "background-color: black;" + #LF$
TextViewCssStyle + "color: white;" + #LF$
TextViewCssStyle + "caret-color: white;" + #LF$
TextViewCssStyle + "font: 12px " + Chr(34) + "JetBrains Mono" + Chr(34) + ";" + #LF$
TextViewCssStyle + "}" + #LF$
TextViewCssStyle + ".view text selection {" + #LF$
TextViewCssStyle + "background-color: blue;" + #LF$
TextViewCssStyle + "color: #FF8800;" + #LF$
TextViewCssStyle + "}"

ProcedureC WindowCloseHandler(*Widget.GtkWidget, *Event.GdkEventAny, UserData.I)
  gtk_main_quit_()
EndProcedure

gtk_init_(0, 0)

Window = gtk_window_new_(#GTK_WINDOW_TOPLEVEL)

If Window
  
  gtk_window_set_default_size_(Window, 800, 600)
  gtk_window_set_title_(Window, "Gtk TextView Demo")
  gtk_window_set_position_(Window, #GTK_WIN_POS_NONE)
  gtk_window_move_(Window, 270, 100)
  
  ; So the ScrolledWindow will not go to the edge of the window
  ; but 5 pixels from it.
  
  gtk_container_set_border_width_(Window, 5) 
  
  ScrolledWindow = gtk_scrolled_window_new_(#Null, #Null)
  gtk_scrolled_window_set_shadow_type_(ScrolledWindow, #GTK_SHADOW_IN)
    
  TextView = gtk_text_view_new()
  gtk_container_add_(ScrolledWindow, TextView)
  gtk_container_add_(Window, ScrolledWindow)
  
  ; Setting up the new TextView Css Style
  
  StyleContext = gtk_widget_get_style_context(TextView)
  gtk_style_context_add_class(StyleContext, "view")
  CssProvider = gtk_css_provider_new()
  
  *Error.GError = #Null
  
  gtk_css_provider_load_from_data(CssProvider, TextViewCssStyle, -1, @*Error)
  
  If *Error <> #Null
    
    CompilerIf #PB_Compiler_Debugger = 1
      DebuggerError("GtkTextView\SetCssStyle() error : " + PeekS(*Error\Message, -1, #PB_UTF8))
    CompilerEndIf
    
    g_error_free_(*Error)
    
  Else
    gtk_style_context_add_provider(StyleContext, CssProvider, #GTK_STYLE_PROVIDER_PRIORITY_APPLICATION)
  EndIf
  
  
  g_signal_connect_(Window, "delete-event", @WindowCloseHandler(), 0)
  g_signal_connect_(Window, "destroy", @WindowCloseHandler(), 0)
  
  gtk_widget_show_all_(Window)
  gtk_main_()
  
EndIf

; <<<<<<<<<<<<<<<<<<<<<<<
; <<<<< END OF FILE <<<<<
; <<<<<<<<<<<<<<<<<<<<<<<

Best regards
StarBootics

[mk-soft]

One level higher works ...

Code: Select all

TextViewCssStyle.s = "" + #LF$
TextViewCssStyle + "textview {font-family: Noto Sans Mono CJK TC; font-size: 24px}" + #LF$
TextViewCssStyle + "textview text {"
TextViewCssStyle + "background-color: black;color: white;" + #LF$
TextViewCssStyle + "caret-color: white;" + #LF$
TextViewCssStyle + "}" + #LF$
TextViewCssStyle + ".view text selection {" + #LF$
TextViewCssStyle + "background-color: blue;" + #LF$
TextViewCssStyle + "color: #FF0000;" + #LF$
TextViewCssStyle + "}"

[StarBootics]

Nice one, it didn't came to my mind to try that.

Many thanks.
StarBootics