Web Apps


uiWebPrevious12uiWebNext

#1 [en] 

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.

Edited 10 times | Last edited by Karu (5 years ago)

---

Hello!

#2 [en] 

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">

Last edited by Karu (5 years ago)

---

Hello!

#3 [en] 

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

---

Hello!

#4 [en] 

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

---

Hello!

#5 [en] 

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.

---

Hello!

#6 [en] 

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.

---

Hello!

#7 [en] 

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'

---

Hello!

#8 [en] 

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.

---


The Clan


#9 [en] 

Nehrie
I was told an app that was made for our app store couldn't have css.

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).

---

Hello!

#10 [en] 

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">

---

Hello!

#11 [en] 

This will be very useful, thank you karu!

arc

---

#12 [en] 

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

---

Hello!

#13 [en] 

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.

---

Hello!

#14 [en] 

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

---

Hello!

#15 [en] 

Ingame "browser.css" is something like
html { background-color: rgba(0, 0, 0, 1.0); color: rgba(210, 210, 210, 1.0); font-size: 10px; }
a { color: rgba(240, 155, 100, 1.0); text-decoration: underline; -ryzom-modulate-color: 0;}
h1 { color: rgba(255, 255, 255, 1.0); font-size: 20px; -ryzom-modulate-color: 0;}
h2 { color: rgba(255, 255, 255, 1.0); font-size: 18px; -ryzom-modulate-color: 0;}
h3 { color: rgba(255, 255, 255, 1.0); font-size: 16px; -ryzom-modulate-color: 0;}
h4 { color: rgba(255, 255, 255, 1.0); font-size: 14px; -ryzom-modulate-color: 0;}
h5 { color: rgba(255, 255, 255, 1.0); font-size: 12px; -ryzom-modulate-color: 0;}
h6 { color: rgba(255, 255, 255, 1.0); font-size: 12px; -ryzom-modulate-color: 0;}
input[type="text"] { color: rgba(210, 210, 210, 1.0); font-size: 10px; font-weight: normal; text-shadow: 1px 1px #000;}
pre { font-family: monospace;}
th { font-weight: bold; }
textarea { color: rgba(210, 210, 210, 1.0); font-weight: normal; font-size: 10px; text-shadow: 1px 1px #000;}
del { text-decoration: line-through;}
u { text-decoration: underline;}
em { font-style: italic; }
strong { font-weight: bold; }
small { font-size: smaller;}
dt { font-weight: bold; }
hr { color: rgb(120, 120, 120);}
address, article, aside, blockquote, details, dialog, dd, div, dl, dt,
fieldset, figcaption, figure,footer, form, h1, h2, h3, h4, h5, h6,
header, hgroup, hr, li, main, nav, ol, p, pre, section, table, ul { display: block; }
table { display: table; }
table { border-collapse: separate;}
meter::-webkit-meter-bar,
meter::-webkit-optimum-value,
meter::-webkit-suboptimum-value,
meter::-webkit-even-less-good-value { background: none; }
meter::-webkit-meter-bar { background-color: rgb(100, 100, 100); width: 5em; height: 1em;}
meter::-webkit-meter-optimum-value { background-color: rgb(80, 220, 80); }
meter::-webkit-meter-suboptimum-value { background-color: rgb(220, 220, 80); }
meter::-webkit-meter-even-less-good-value { background-color: rgb(220, 80, 80); }
progress::-webkit-progress-bar,
progress::-webkit-progress-value { background: none; }
progress::-webkit-progress-bar { background-color: rgb(230, 230, 230); width: 10em; height: 1em; }
progress::-webkit-progress-value { background-color: rgb(0, 100, 180);}

Some elements (like form) is now display: block; as default (previously inline)

---

Hello!
uiWebPrevious12uiWebNext
 
Last visit Tuesday, 8 October 18:27:50 UTC
P_:G_:PLAYER

powered by ryzom-api