Web Apps

Client sources and changelog is available at
- https://bitbucket.org/ryzom/ryzomcore/commits/branch/compatibilit y-develop

Possible user-agent strings:

Ryzom/2.1.0.6418-unix-x86
Ryzom/2.1.0.6475-windows-x64
Ryzom/2.1.0.6477-mac-x64
Ryzom/2.1.0.6510-unix-x64

Changes to ingame browser:

2018-08-10
new "text-shadow" , "-webkit-text-stroke" styles.
Offset should be kept for 1px/2px for best effect. With larger offsets shadow may get cliped. blur/depth not supported.
- <span style="text-shadow: 1px 1px red;">red shadow</span>
Only first rule from text-shadow is used. If text outline is needed, then "-webkit-text-stroke: 1px black;" can be used.
- <span style="-webkit-text-stroke: 1px red;">red outline</span>

2018-08-10
style is read from most tags. inheritance may not work as it should with some tags

2019-05-10
Changes to style/css handling.

2014-09-27
added maxlength attribute to <input> and <textarea> elements

2014-10-12
fixed table cellpadding and cellspacing
implemented table and cell borders

2014-10-14
added table bordercolor attribute
implement table rowspan and colspan attributes
changed table default style to valign=middle, cellpadding=1, cellspacing=2

2015-01-09
fixed submit button for correctly returning 'name=value' instead 'name_x=0', 'name_y=0'
implemented image submit button to return 'name_x=x', 'name_y=y' as click coordinates

2015-03-29
added <span> tag
read common css-style from style attribute for <a> and <span> elements
- font-size [px], percent or em not supported
- font-style [italic, oblique]
- font-weight [normal, bold, lighter, bolder, 100-900]
- color [name, #rrggbb, #rrggbbaa]
- text-decoration, text-decoration-line [underline, line-through]

2015-04-17
display direct linked <img> (<a..><img..></a>)

2015-04-19
fix relative url in <img> src

2015-03-31
implement <input type="radio">
fix <input type="checkbox"> not returning defined value attribute

2015-11-26
implement url #fragment (anchor) navigation.
Anchor is registed for
- id and name attributes for element <a>
- id attribute for elements <div>, <h1>..<h6>, <table>

2015-12-03
add new elements <del>, <u>, <em>, <strong>, <small>
implement <DL> list

2015-12-08
size attributes to <img> (width, height, max-width, max-height). only px values.

2015-12-18
added <th> element
added <hr> element. style attribute is parsed for color, width, height. only px values.
added <ol> element.

2016-03-01
added http-equiv refresh
- 0 sec refresh acts once
- window must be visible

<select> element multiple, size, and style attributes
- only width/height px is used from style

added 'disabled' attribute to <select> box <option> element

2016-06-12
text style attributes to <textarea> and <input[type=text]> (font-size, font-weight, font-style, color).
- set them to 'inherit' to get parent element style.
<textarea> 'rows' attribute is functional now
<textarea> does not have to be inside <pre> anymore to get line breaks.

2016-06-25
color can be set using 3 digit #RGB, 4 digit #RGBA
inline css style also has support for rgb(), rgba(), hsl(), hsla() color.

2016-07-24
Added font-family to inline style
- allowed values are 'inherit' or 'monospace'. Unknown value uses UI default font
Added inline style to <pre> element
- default for font-family is 'monospace'

2017-06-01
Link, image can have inline style "-ryzom-modulate-color: true;" to tint color based user UI day/night color.
- <a href="/" style="=ryzom-modulate-color: #ffffff;">Home</a>

2017-06-08
Show <img> title attribute as tooltip,
- <img src="normal.png" title="tooltip">
Use <img> data-over-src attribute as :hover effect. images should be same size.
- <img src="normal.png" data-over-src="mouseover.png">

2015-12-18
added <th> element
added <hr> element. style attribute is parsed for color, width, height. only px values.
added <ol> element.

2016-03-01
added http-equiv refresh
- 0 sec refresh acts once
- window must be visible

<select> element multiple, size, and style attributes
- only width/height px is used from style

added 'disabled' attribute to <select> box <option> element

2016-06-12
text style attributes to <textarea> and <input[type=text]> (font-size, font-weight, font-style, color).
- set them to 'inherit' to get parent element style.
<textarea> 'rows' attribute is functional now
<textarea> does not have to be inside <pre> anymore to get line breaks.

2016-06-25
color can be set using 3 digit #RGB, 4 digit #RGBA
inline css style also has support for rgb(), rgba(), hsl(), hsla() color.

2016-07-24
Added font-family to inline style
- allowed values are 'inherit' or 'monospace'. Unknown value uses UI default font
Added inline style to <pre> element
- default for font-family is 'monospace'

gj Lot of work here.

I was told an app that was made for our app store couldn't have css. Is this something you have been correcting? Surely a program as big as Ryzom uses cascading style sheets.

I'm afraid I'm showing my ignorance.

Ingame browser does not read <style> element, but does read limited rules from inline 'style' attribute from some elements.

Ingame browser is html->gui translator, so it will always missing features.
What I'm trying to improve is html for ingame and outgame browsers to look the same(ish).

2017-06-01
Link, image can have inline style "-ryzom-modulate-color: true;" to tint color based user UI day/night color.
- <a href="/" style="=ryzom-modulate-color: #ffffff;">Home</a>

2017-06-08
Show <img> title attribute as tooltip,
- <img src="normal.png" title="tooltip">
Use <img> data-over-src attribute as :hover effect. images should be same size.
- <img src="normal.png" data-over-src="mouseover.png">

This will be very useful, thank you karu!

arc

2018-08-10
new "text-shadow" , "-webkit-text-stroke" styles.
Offset should be kept for 1px/2px for best effect. With larger offsets shadow may get cliped. blur/depth not supported.
- <span style="text-shadow: 1px 1px red;">red shadow</span>
Only first rule from text-shadow is used. If text outline is needed, then "-webkit-text-stroke: 1px black;" can be used.
- <span style="-webkit-text-stroke: 1px red;">red outline</span>

2018-08-10
style is read from most tags. inheritance may not work as it should with some tags

Currently there is issues with text-decoration and color values.

text-decoration is forced on <a> tags and cant be changed.

color can be worked around by not leaving whitespace around color value, ie "color:red;" works, but "color: red;" does not.

Both issues should be fixed in next client patch.

2019-05-10

• added css processing from <style> and <link rel="stylesheet">
  <link> will block rendering of the page until all files are downloaded
  css files are cached locally same as images
  • element tag, id, class, attr selectors
  • combinators (p+p, p~p, ul>li, ul li)
  • :only-child, :first-child, :last-child, :nth-child(An+B) pseudo classes
  • ::before, ::after pseudo elements. attaching these on block level element (ie table) may not work as intended.
• <button> can be used outside <form> element for submit action.
  <button form="formid" name="submit" value="submit value">text goes here</button>
  <button form="formid" name="submit" value="submit value"><img src=".."></button>
  Avoid changing text style inside button as it does not render correctly (splits button into multiple parts)
  <button form="formid" name="submit" value="submit value">text <span>goes</span> here</button>.
• <meter> - webkit prefix pseudo elements can be used to change the background-color
  :-webkit-meter-bar, :-webkit-meter-optimum-value, :-webkit-meter-suboptimum-value, :-webkit-meter-even-less-good-value,
  <style>meter::-webkit-meter-optimum-value { background-color: blue; }</style>
• <progress> - webkit prefixed pseudo elements can be used to change the background-color
  <style>
  progress::-webkit-progress-bar { background-color: red; }
  progress::-webkit-progress-value { background-color: yellow; }
  </style>
• "font:inherit" to inherit all font attributes from parent element
  <style> input, textarea { font: inherit; }</style>
• pt, em, rem size units. These can be used in font-size, width/height values.
  1pt = 0.75px, rem uses font-size from <html> element.
• a.ryzom-ui-button, input, textarea width/height can be changed using css
  <style>textarea { width: 20em; height: 5em; }</style>
• background-color for buttons/links/textarea
  <style>input[type=submit], a.ryzom-ui-button { background-color: blue; }</style>
• -ryzom-background-color-over css property for mouse over effect for buttons/links
  <style>
  input[type=submit], a.ryzom-ui-button { -ryzom-background-color-over: yellow; }
  input[value="Delete"] { -ryzom-background-color-over: red; }
  </style>
• css background shorthand parsing for those elements that make use of it

Ingame "browser.css" is something like
Some elements (like form) is now display: block; as default (previously inline)