High DPI support for the basic samples

Samples/assets/demo.rml

@@ -5,8 +5,8 @@
 		<style>
 			body
 			{
-				width: 300px;
-				height: 225px;
+				width: 300dp;
+				height: 225dp;
 				
 				margin: auto;
 			}

Samples/assets/invader.rcss

@@ -138,20 +138,20 @@ body
 	font-family: LatoLatin;
 	font-weight: normal;
 	font-style: normal;
-	font-size: 15px;
+	font-size: 15dp;
 	color: white;
 }
 
 body.window
 {
-	padding-top: 43px;
-	padding-bottom: 20px;
+	padding-top: 43dp;
+	padding-bottom: 20dp;
 	
-	min-width: 250px;
-	max-width: 800px;
+	min-width: 250dp;
+	max-width: 800dp;
 	
-	min-height: 135px;
-	max-height: 700px;
+	min-height: 135dp;
+	max-height: 700dp;
 }
 
 div#title_bar
@@ -159,8 +159,8 @@ div#title_bar
 	z-index: 1;
 
 	position: absolute;
-	top: 3px;
-	left: 0px;
+	top: 3dp;
+	left: 0;
 	
 	text-align: left;
 }
@@ -168,25 +168,25 @@ div#title_bar
 div#title_bar div#icon
 {
 	position: absolute;
-	left: 20px;
-	top: 2px;
+	left: 20dp;
+	top: 2dp;
 	
-	width: 51px;
-	height: 39px;
+	width: 51dp;
+	height: 39dp;
 }
 
 
 div#title_bar span
 {
-	padding-left: 85px;
-	padding-right: 25px;
-	padding-top: 17px;
-	padding-bottom: 51px;
+	padding-left: 85dp;
+	padding-right: 25dp;
+	padding-top: 17dp;
+	padding-bottom: 51dp;
 
-	font-size: 20px;
+	font-size: 20dp;
 	font-weight: bold;
 	
-	font-effect: glow(2px 2px 0px 1px #1117);
+	font-effect: glow(1dp black);
 
 	decorator: tiled-horizontal( title-bar-l, title-bar-c, title-bar-r );
 }
@@ -194,7 +194,7 @@ div#title_bar span
 div#window
 {
 	width: auto;
-	padding: 10px 15px;
+	padding: 10dp 15dp;
 	
 	decorator: tiled-box(
 		window-tl, window-t, window-tr, 
@@ -229,10 +229,10 @@ h1
 	margin-bottom: 0.4em;
 
 	text-align: left;
-	font-size: 16px;
+	font-size: 16dp;
 	font-weight: bold;
 
-	font-effect: glow(1px 1px 1px 1px #1117);
+	font-effect: glow(1dp 1dp 1dp 1dp #1117);
 }
 
 
@@ -241,12 +241,12 @@ input,
 select,
 dataselect
 {
-	margin-left: 20px;
+	margin-left: 20dp;
 }
 
 input.submit
 {
-	margin-left: 0px;
+	margin-left: 0;
 }
 
 
@@ -256,13 +256,13 @@ input.submit
 {
 	display: inline-block;
 
-	width: 159px;
-	height: 35px;
+	width: 159dp;
+	height: 35dp;
 
-	padding-top: 10px;
-	vertical-align: -18px;
+	padding-top: 10dp;
+	vertical-align: -18dp;
 
-	font-size: 16px;
+	font-size: 16dp;
 	text-align: center;
 	tab-index: auto;
 
@@ -272,7 +272,7 @@ input.submit
 button:focus,
 input.submit:focus
 {
-	font-effect: blur(3px #fff);
+	font-effect: blur(3dp #fff);
 }
 
 button:hover,
@@ -297,16 +297,16 @@ input.submit:disabled
 input.text, input.password
 {
 	box-sizing: border-box;
-	height: 31px;
-	padding: 10px 10px 0px;
+	height: 31dp;
+	padding: 10dp 10dp 0;
 	decorator: tiled-horizontal( text-l, text-c, auto ); /* Right becomes mirrored left */
 	cursor: text;
 }
 
 textarea
 {
-	padding: 14px 12px 10px;
-	decorator: ninepatch( textarea, textarea-inner );
+	padding: 14dp 12dp 10dp;
+	decorator: ninepatch( textarea, textarea-inner, 1.0 );
 	cursor: text;
 }
 
@@ -317,22 +317,22 @@ dataselect,
 textarea
 {
 	color: #333;
-	font-size: 13px;
+	font-size: 13dp;
 }
 
 datagrid input.text, table input.text
 {
 	box-sizing: border-box;
 	width: 100%;
-	height: 18px;
+	height: 18dp;
 	margin: 0;
-	padding: 0 5px;
+	padding: 0 5dp;
 
-	border-width: 1px;
+	border-width: 1dp;
 	border-color: black;
 	background-color: white;
 
-	font-size: 15px;
+	font-size: 15dp;
 	
 	decorator: none;
 }
@@ -342,18 +342,18 @@ datagrid input.text, table input.text
 select,
 dataselect
 {
-	width: 175px;
-	height: 37px;
+	width: 175dp;
+	height: 37dp;
 }
 
 select selectvalue,
 dataselect selectvalue
 {
 	width: auto;
-	margin-right: 30px;
+	margin-right: 30dp;
 	
-	height: 26px;
-	padding: 11px 10px 0px 10px;
+	height: 26dp;
+	padding: 11dp 10dp 0dp 10dp;
 
 	decorator: image( selectvalue  );
 }
@@ -361,8 +361,8 @@ dataselect selectvalue
 select selectarrow,
 dataselect selectarrow
 {
-	width: 30px;
-	height: 37px;
+	width: 30dp;
+	height: 37dp;
 	
 	decorator: image( selectarrow );
 }
@@ -384,11 +384,11 @@ dataselect selectarrow:checked
 select selectbox,
 dataselect selectbox
 {
-	margin-left: 1px;
-	margin-top: -7px;
-	margin-bottom: -10px;
-	width: 162px;
-	padding: 1px 4px 4px 4px;
+	margin-left: 1dp;
+	margin-top: -7dp;
+	margin-bottom: -10dp;
+	width: 162dp;
+	padding: 1dp 4dp 4dp 4dp;
 }
 
 select selectbox,
@@ -407,7 +407,7 @@ select selectbox option,
 dataselect selectbox option
 {
 	width: auto;
-	padding: 3px 0 3px 6px;
+	padding: 3dp 0 3dp 6dp;
 	background: #DDDD;
 }
 
@@ -434,10 +434,10 @@ dataselect selectbox option:hover
 input.radio,
 input.checkbox
 {
-	width: 30px;
-	height: 30px;
+	width: 30dp;
+	height: 30dp;
 
-	vertical-align: -11px;
+	vertical-align: -11dp;
 }
 
 input.radio
@@ -501,22 +501,22 @@ input.checkbox:checked:active
 }
 
 input.range {
-	width: 200px;
-	height: 32px;
-	vertical-align: -12px;
+	width: 200dp;
+	height: 32dp;
+	vertical-align: -12dp;
 }
 input.range slidertrack {
-	margin-top: 3px;
-	height: 22px;
+	margin-top: 3dp;
+	height: 22dp;
 	image-color: #ecc;
-	decorator: ninepatch( range-track, range-track-inner );
+	decorator: ninepatch( range-track, range-track-inner, 1.0 );
 }
 input.range sliderbar {
-	margin-left: -8px;
-	margin-right: -7px;
-	margin-top: -3px;
-	width: 34px;
-	height: 23px;
+	margin-left: -8dp;
+	margin-right: -7dp;
+	margin-top: -3dp;
+	width: 34dp;
+	height: 23dp;
 	decorator: image( range-bar );
 }
 input.range:hover sliderbar {
@@ -526,9 +526,9 @@ input.range sliderbar:active {
 	image-color: #c80;
 }
 input.range sliderarrowdec, input.range sliderarrowinc {
-	width: 17px;
-	height: 17px;
-	margin-top: 6px;
+	width: 17dp;
+	height: 17dp;
+	margin-top: 6dp;
 }
 input.range sliderarrowdec        { decorator: image( range-dec        ); }
 input.range sliderarrowinc        { decorator: image( range-inc        ); }
@@ -538,32 +538,32 @@ input.range sliderarrowdec:active { decorator: image( range-dec-active ); }
 input.range sliderarrowinc:active { decorator: image( range-inc-active ); }
 
 thead tr {
-	height: 35px;
+	height: 35dp;
 	decorator: tiled-horizontal( datagridheader-l, datagridheader-c, datagridheader-r );
 }
 thead td {
-	padding-top: 11px;
+	padding-top: 11dp;
 }
 
 tbody {
 	/* Margin left/right only affects the background positioning for the decorator, not the cell placement */
-	margin-left: 5px;
-	margin-right: 4px;
+	margin-left: 5dp;
+	margin-right: 4dp;
 	/* Padding top/bottom adds extra spacing between the header row and the body, and between the body and table bottom */
-	padding-top: 4px;
-	padding-bottom: 4px;
+	padding-top: 4dp;
+	padding-bottom: 4dp;
 }
 tbody tr {
-	margin-left: 9px;
-	margin-right: 8px;
+	margin-left: 9dp;
+	margin-right: 8dp;
 	color: black;
 }
 
 datagrid datagridheader
 {
 	width: auto;
-	height: 25px;
-	padding: 5px 10px 0px 10px;
+	height: 25dp;
+	padding: 5dp 10dp 0 10dp;
 
 	decorator: tiled-horizontal( datagridheader-l, datagridheader-c, datagridheader-r );
 }
@@ -572,9 +572,9 @@ datagrid datagridbody
 {
 	color: black;
 
-	margin-left: 4px;
-	margin-right: 3px;
-	padding: 0px 4px 4px 4px;
+	margin-left: 4dp;
+	margin-right: 3dp;
+	padding: 0 4dp 4dp 4dp;
 }
 
 
@@ -583,9 +583,9 @@ datagridexpand, expand
 {
 	display: block;
 	
-	margin: 1px 0px 1px 5px;
-	height: 17px;
-	width: 17px;
+	margin: 1dp 0 1dp 5dp;
+	height: 17dp;
+	width: 17dp;
 	
 	decorator: image( datagridexpand );
 }
@@ -618,10 +618,10 @@ datagridexpand.collapsed:active, expand.collapsed:active
 
 scrollbarvertical
 {
-	margin-top: -6px;
-	margin-bottom: -6px;
-	margin-right: -11px;
-	width: 27px;
+	margin-top: -6dp;
+	margin-bottom: -6dp;
+	margin-right: -11dp;
+	width: 27dp;
 }
 
 scrollbarvertical slidertrack
@@ -635,9 +635,9 @@ scrollbarvertical slidertrack:active
 
 scrollbarvertical sliderbar
 {
-	margin-left: 4px;
-	width: 23px;
-	min-height: 46px;
+	margin-left: 4dp;
+	width: 23dp;
+	min-height: 46dp;
 
 	decorator: tiled-vertical( sliderbar-t, sliderbar-c, sliderbar-b );
 }
@@ -653,8 +653,8 @@ scrollbarvertical sliderbar:active
 scrollbarvertical sliderarrowdec,
 scrollbarvertical sliderarrowinc
 {
-	width: 27px;
-	height: 24px;
+	width: 27dp;
+	height: 24dp;
 }
 scrollbarvertical sliderarrowdec
 {
@@ -684,15 +684,15 @@ scrollbarvertical sliderarrowinc:active
 
 scrollbarhorizontal
 {
-	width: 0px;
-	height: 0px;
+	width: 0;
+	height: 0;
 }
 
 textarea scrollbarvertical
 {
 	cursor: arrow;
-	margin: 10px 0px 4px 0;
-	width: 12px;
+	margin: 10dp 0 4dp 0;
+	width: 12dp;
 }
 textarea scrollbarvertical slidertrack 
 { 
@@ -700,28 +700,28 @@ textarea scrollbarvertical slidertrack
 }
 textarea scrollbarvertical sliderbar
 {
-	margin-left: 2px;
-	width: 10px;
-	min-height: 16px;
+	margin-left: 2dp;
+	width: 10dp;
+	min-height: 16dp;
 }
 textarea scrollbarvertical sliderarrowdec,
 textarea scrollbarvertical sliderarrowinc
 {
-	width: 0px;
-	height: 0px;
+	width: 0;
+	height: 0;
 }
 
 textarea scrollbarhorizontal
 {
 	cursor: arrow;
-	margin-left: 7px;
-	height: 12px;
+	margin-left: 7dp;
+	height: 12dp;
 }
 textarea scrollbarhorizontal sliderbar
 {
 	background-color: #BC0000CC;
-	height: 8px;
-	min-width: 10px;
+	height: 8dp;
+	min-width: 10dp;
 }
 textarea scrollbarhorizontal sliderbar:hover
 {

Samples/assets/window.rml

@@ -14,6 +14,6 @@
 		<div id="content">
 		</div>
 	</div>
-	<handle size_target="#document" style="position: absolute; width: 16px; height: 16px; bottom: 0px; right: 0px; cursor: resize;"></handle>
+	<handle size_target="#document" style="position: absolute; width: 16dp; height: 16dp; bottom: 0px; right: 0px; cursor: resize;"></handle>
 </body>
 </template>

Samples/basic/animation/data/animation.rml

@@ -5,11 +5,13 @@
 	<style>
 		body.window
 		{
-			max-width: 2000px;
-			max-height: 2000px;
-			width: 1600px;
-			height: 750px;
-			perspective: 3000px;
+			max-width: 2000dp;
+			max-height: 2000dp;
+			left: 80dp;
+			right: 80dp;
+			top: 50dp;
+			bottom: 50dp;
+			perspective: 3000dp;
 			/*opacity: 0;*/
 		}
 		section
@@ -25,7 +27,7 @@
 			text-align: left;
 		}
 		button {
-			margin-top: 50px;
+			margin-top: 50dp;
 		}
 		div#title_bar div#icon
 		{
@@ -35,13 +37,13 @@
 		spacer
 		{
 			display: inline-block;
-			width: 25px;
+			width: 25dp;
 		}
 		
 		#start_game 
 		{
 			opacity: 0.8;
-			transform: rotate(370deg) translateX(100px) scale(1.2);
+			transform: rotate(370deg) translateX(100dp) scale(1.2);
 			transform-origin: 30% 80% 0;
 		}
 		#options {
@@ -58,7 +60,7 @@
 			to { transform: scale(1.0) rotate(360deg); }
 		}
 		#high_scores {
-			margin-left: -100px;
+			margin-left: -100dp;
 		}
 		
 		@keyframes fadeout {
@@ -104,18 +106,18 @@
 		
 		div.container
 		{
-			margin-top: 15px;
+			margin-top: 15dp;
 			width: 100%;
-			height: 200px;
+			height: 200dp;
 			background-color: #ae8484aa;
 		}
 		div.plain
 		{
 			font-size: 1.2em;
-			padding: 10px;
+			padding: 10dp;
 			margin: auto;
-			width: 130px;
-			height: 70px;
+			width: 130dp;
+			height: 70dp;
 			background-color: #c66;
 		}
 		div.plain:hover { background-color: #ddb700; }
@@ -126,7 +128,7 @@
 			/* Note the translateX vs translateY in animation target, and rotateZ vs rotate3d, scaleX vs scaleY.
 			   In order to match, they are converted to their generic forms, translate3d, rotate3d, and scale3d.
 			   For rotate3d to match another rotation, their rotation axes must align. */
-			transform: translateX(100px) rotateZ(70deg) scaleX(1.3);
+			transform: translateX(100dp) rotateZ(70deg) scaleX(1.3);
 		}
 		#combine {
 			transform: rotate(45deg);
@@ -134,13 +136,13 @@
 		#decomposition {
 			/* To interpolate the rotate3d transforms, we need to decompose the matrix, 
 			   see the element info in the debugger for the resulting matrix. */
-			transform: translateX(100px) rotate3d(1.0, 0, 1.0, 0deg);
+			transform: translateX(100dp) rotate3d(1.0, 0, 1.0, 0deg);
 		}
 		
 		/* -- MIXED UNITS TESTS */
 		#abs_rel {
 			margin: 0;
-			margin-left: 50px;
+			margin-left: 50dp;
 		}
 		#abs_rel_transform {
 			margin: 0;
@@ -149,7 +151,7 @@
 		#animation_event {
 			position: relative;
 			margin: 0;
-			top: 50px; left: 50px;
+			top: 50dp; left: 50dp;
 		}
 		/* -- TRANSITION TESTS */
 		#transition_test {
@@ -157,16 +159,16 @@
 		}
 		#transition_test:hover {
 			/*transition: padding-left background-color transform 0.8s quadratic-out 1.0;*/
-			padding-left: 60px;
+			padding-left: 60dp;
 			transform: scale(1.5);
 		} 
 		#transition_class {
-			margin-left: 50px;
+			margin-left: 50dp;
 			transition: all 0.5s cubic-out;
 			cursor: pointer;
 		}
 		#transition_class.move_me {
-			margin-left: -50px;
+			margin-left: -50dp;
 			background-color: #dd3;
 		}
 		
@@ -177,10 +179,10 @@
 				transform: rotate(180deg);
 			}
 			40% {
-				transform: rotate(180deg) translateX(200px);
+				transform: rotate(180deg) translateX(200dp);
 			}
 			60% {
-				transform: rotate(180deg) translateX(-200px);
+				transform: rotate(180deg) translateX(-200dp);
 			}
 			75% {
 				transform: rotate(180deg);
@@ -213,15 +215,15 @@
 			position: relative;
 			margin: 0; padding: 0;
 			top: 0; left: 0;
-			width: 25px; height: 25px;
+			width: 25dp; height: 25dp;
 			animation: 2s cubic-in-out infinite alternate some-missing-keys;
 		}
 		#keyevent_response
 		{
 			position: relative;
 			margin: 0; padding: 0;
-			top: 110px; left: 0;
-			width: 100px; height: 55px;
+			top: 110dp; left: 0;
+			height: 55dp;
 		}
 		#performance 
 		{
@@ -229,7 +231,7 @@
 			bottom: 0; 
 			height: 30%; 
 			width: 20%;
-			left: -100px;
+			left: -100dp;
 			transform: scale(0.5) rotate(-90deg);
 		}
 	</style>
@@ -258,7 +260,7 @@
 	<h1>Mixed units tests</h1>
 	<div class="container"><div class="plain" id="abs_rel">Pixel vs percentage.</div></div>
 	<div class="container"><div class="plain" id="abs_rel_transform">Pixel vs percentage transform.</div></div>
-	<div class="container"><div class="plain" id="animation_event">Animation event</div><div class="plain" id="keyevent_response">Events (press arrow keys)</div></div>
+	<div class="container"><div class="plain" id="animation_event">Animation event</div><div class="plain" id="keyevent_response">Events<br/><span style="font-size: 0.8em">(press arrow keys)</span></div></div>
 </section>
 
 <section style="left: 75%;" id="transition_tests">

Samples/basic/animation/src/main.cpp

@@ -39,18 +39,13 @@
 class DemoWindow
 {
 public:
-	DemoWindow(const Rml::String &title, const Rml::Vector2f &position, Rml::Context *context)
+	DemoWindow(const Rml::String &title, Rml::Context *context)
 	{
 		using namespace Rml;
 		document = context->LoadDocument("basic/animation/data/animation.rml");
 		if (document != nullptr)
 		{
-			{
-				document->GetElementById("title")->SetInnerRML(title);
-				document->SetProperty(PropertyId::Left, Property(position.x, Property::PX));
-				document->SetProperty(PropertyId::Top, Property(position.y, Property::PX));
-				//document->Animate("opacity", Property(0.0f, Property::NUMBER), 2.0f, Tween{ Tween::Quadratic, Tween::InOut }, -1, true, 1.0f);
-			}
+			document->GetElementById("title")->SetInnerRML(title);
 
 			// Button fun
 			{
@@ -260,17 +255,17 @@ public:
 			else if (key_identifier == Rml::Input::KI_LEFT)
 			{
 				auto el = context->GetRootElement()->GetElementById("keyevent_response");
-				if (el) el->Animate("left", Property{ -200.f, Property::PX }, 0.5, Tween{ Tween::Cubic });
+				if (el) el->Animate("left", Property{ -200.f, Property::DP }, 0.5, Tween{ Tween::Cubic });
 			}
 			else if (key_identifier == Rml::Input::KI_RIGHT)
 			{
 				auto el = context->GetRootElement()->GetElementById("keyevent_response");
-				if (el) el->Animate("left", Property{ 200.f, Property::PX }, 0.5, Tween{ Tween::Cubic });
+				if (el) el->Animate("left", Property{ 200.f, Property::DP }, 0.5, Tween{ Tween::Cubic });
 			}
 			else if (key_identifier == Rml::Input::KI_UP)
 			{
 				auto el = context->GetRootElement()->GetElementById("keyevent_response");
-				auto offset_right = Property{ 200.f, Property::PX };
+				auto offset_right = Property{ 200.f, Property::DP };
 				if (el) el->Animate("left", Property{ 0.f, Property::PX }, 0.5, Tween{ Tween::Cubic }, 1, true, 0, &offset_right);
 			}
 			else if (key_identifier == Rml::Input::KI_DOWN)
@@ -343,8 +338,8 @@ int main(int RMLUI_UNUSED_PARAMETER(argc), char** RMLUI_UNUSED_PARAMETER(argv))
 	RMLUI_UNUSED(argv);
 #endif
 
-	const int width = 1800;
-	const int height = 1000;
+	const int width = 1700;
+	const int height = 900;
 
 
 	ShellRenderInterfaceOpenGL opengl_renderer;
@@ -385,7 +380,7 @@ int main(int RMLUI_UNUSED_PARAMETER(argc), char** RMLUI_UNUSED_PARAMETER(argv))
 
 	Shell::LoadFonts("assets/");
 
-	window = new DemoWindow("Animation sample", Rml::Vector2f(81, 100), context);
+	window = new DemoWindow("Animation sample", context);
 	window->GetDocument()->AddEventListener(Rml::EventId::Keydown, new Event("hello"));
 	window->GetDocument()->AddEventListener(Rml::EventId::Keyup, new Event("hello"));
 	window->GetDocument()->AddEventListener(Rml::EventId::Animationend, new Event("hello"));

Samples/basic/benchmark/data/benchmark.rml

@@ -5,24 +5,25 @@
 	<style>
 		body.window
 		{
-			max-width: 2000px;
-			max-height: 2000px;
-			width: 1600px;
-			height: 750px;
+			left: 80dp;
+			right: 80dp;
+			top: 50dp;
+			bottom: 50dp;
+			max-width: 2000dp;
+			max-height: 2000dp;
 		}
 		#fps 
 		{
 			position: absolute;
-			top: 55px;
-			left: 20px;
+			top: 55dp;
+			left: 20dp;
 			font-size: 0.85em;
 			text-align: left;
 		}
 		#performance 
 		{
-			width: 800px;
-			height: 300px;
-			/*transform: scale(0.6) rotate(-60deg);*/
+			width: 800dp;
+			height: 300dp;
 		}
 	</style>
 </head>

Samples/basic/benchmark/src/main.cpp

@@ -36,7 +36,7 @@
 class DemoWindow
 {
 public:
-	DemoWindow(const Rml::String &title, const Rml::Vector2f &position, Rml::Context *context)
+	DemoWindow(const Rml::String &title, Rml::Context *context)
 	{
 		using namespace Rml;
 		document = context->LoadDocument("basic/benchmark/data/benchmark.rml");
@@ -44,8 +44,6 @@ public:
 		{
 			{
 				document->GetElementById("title")->SetInnerRML(title);
-				document->SetProperty(PropertyId::Left, Property(position.x, Property::PX));
-				document->SetProperty(PropertyId::Top, Property(position.y, Property::PX));
 			}
 
 			document->Show();
@@ -296,7 +294,7 @@ int main(int RMLUI_UNUSED_PARAMETER(argc), char** RMLUI_UNUSED_PARAMETER(argv))
 
 	Shell::LoadFonts("assets/");
 
-	window = new DemoWindow("Benchmark sample", Rml::Vector2f(81, 100), context);
+	window = new DemoWindow("Benchmark sample", context);
 	window->GetDocument()->AddEventListener(Rml::EventId::Keydown, new Event("hello"));
 	window->GetDocument()->AddEventListener(Rml::EventId::Keyup, new Event("hello"));
 	window->GetDocument()->AddEventListener(Rml::EventId::Animationend, new Event("hello"));

Samples/basic/databinding/data/databinding.rml

@@ -5,10 +5,12 @@
 <style>
 body.window
 {
-	width: 1300px;
-	height: 750px;
-	min-width: 1090px;
-	min-height: 300px;
+	left: 80dp;
+	right: 80dp;
+	top: 50dp;
+	bottom: 50dp;
+	min-width: 1040dp;
+	min-height: 300dp;
 	max-width: -1px;
 	max-height: -1px;
 }
@@ -30,18 +32,18 @@ tabs
 	position: fixed;
 	clip: none;
 	text-align: right;
-	top: -47px;
-	left: 205px;
-	right: 10px;
+	top: -47dp;
+	left: 205dp;
+	right: 10dp;
 }
 tab
 {
 	display: inline-block;
-	width: 100px;
-	padding: 0px 20px;
-	line-height: 40px;
+	width: 100dp;
+	padding: 0 20dp;
+	line-height: 40dp;
 	
-	font-size: 16px;
+	font-size: 16dp;
 	color: #ddd;
 	text-align: center;
 	
@@ -65,21 +67,21 @@ panels
 panel
 {
 	display: block;
-	padding: 30px;
+	padding: 30dp;
 	margin-left: auto;
 	margin-right: auto;
-	max-width: 500px;
+	max-width: 500dp;
 }
 h1
 {
 	margin: 1.4em 0 0.7em;
-	font-size: 18px;
+	font-size: 18dp;
 }
 p.title
 {
-	font-size: 35px;
+	font-size: 35dp;
 	color: #b33;
-	font-effect: glow(2px #ed5);
+	font-effect: glow(2dp #ed5);
 }
 .center {
 	text-align: center;
@@ -95,11 +97,11 @@ p.title
 	font-size: 1.8em;
 }
 .mouse_detector {
-	width: 300px;
+	width: 300dp;
 	min-height: 2em;
-	line-height: 30px;
+	line-height: 30dp;
 	background-color: #909090;
-	border: 1px #666;
+	border: 1dp #666;
 	margin: 2em auto;
 	cursor: pointer;
 }
@@ -122,14 +124,14 @@ input.text.two-wide {
 }
 form h2 {
 	display: block;
-	font-size: 16px;
+	font-size: 16dp;
 	font-weight: bold;
 	margin-top: 1em;
 	margin-bottom: 0.3em;
 }
 #rating {
 	display: inline-block;
-	width: 40px;
+	width: 40dp;
 	padding-left: 1em;
 }
 #rating_emoji { 
@@ -138,8 +140,8 @@ form h2 {
 }
 #controls textarea 
 {
-	font-size: 18px;
-	font-effect: outline(2px #060);
+	font-size: 18dp;
+	font-effect: outline(2dp #060);
 	color: #ddd;
 	caret-color: #060;
 }
@@ -178,7 +180,7 @@ li {
 	<p>Data binding demo. We rate this a good old {{rating}}!</p>
 	<input type="range" name="rating" min="0" max="100" step="1" value="50" data-value="rating"/>
 	<div data-visible="rating > 50">Thanks for the <span data-if="rating < 80">good</span><span data-if="rating >= 80">awesome</span> rating!</div>
-	<div class="mouse_detector" style="height: 70px;"
+	<div class="mouse_detector" style="height: 70dp;"
 		data-event-mousemove="mouse_detector = 'x: ' + ev.mouse_x + '<br/>y: ' + ev.mouse_y"
 		data-event-click="add_mouse_pos(); hello_world = 'Hello click!'"
 		data-rml="mouse_detector">
@@ -268,7 +270,7 @@ li {
 		<div>
 			<textarea cols="25" rows="4" wrap="nowrap" name="message">😍 Hello 🌐 World! 😎</textarea>
 		</div>
-		<div style="margin-bottom: 15px;">
+		<div style="margin-bottom: 15dp;">
 			<input type="submit">Submit</input>
 		</div>
 	</form>

Samples/basic/databinding/src/main.cpp

@@ -312,16 +312,13 @@ namespace FormsExample {
 class DemoWindow : public Rml::EventListener
 {
 public:
-	DemoWindow(const Rml::String &title, const Rml::Vector2f &position, Rml::Context *context)
+	DemoWindow(const Rml::String &title, Rml::Context *context)
 	{
 		using namespace Rml;
 		document = context->LoadDocument("basic/databinding/data/databinding.rml");
 		if (document)
 		{
 			document->GetElementById("title")->SetInnerRML(title);
-			document->SetProperty(PropertyId::Left, Property(position.x, Property::PX));
-			document->SetProperty(PropertyId::Top, Property(position.y, Property::PX));
-
 			document->Show();
 		}
 	}
@@ -347,10 +344,6 @@ public:
 			{
 				Shell::RequestExit();
 			}
-			else if (key_identifier == Rml::Input::KI_F8)
-			{
-				Rml::Debugger::SetVisible(!Rml::Debugger::IsVisible());
-			}
 		}
 		break;
 
@@ -450,7 +443,7 @@ int main(int RMLUI_UNUSED_PARAMETER(argc), char** RMLUI_UNUSED_PARAMETER(argv))
 	
 	Shell::LoadFonts("assets/");
 
-	auto demo_window = Rml::MakeUnique<DemoWindow>("Data binding", Rml::Vector2f(150, 50), context);
+	auto demo_window = Rml::MakeUnique<DemoWindow>("Data binding", context);
 	demo_window->GetDocument()->AddEventListener(Rml::EventId::Keydown, demo_window.get());
 	demo_window->GetDocument()->AddEventListener(Rml::EventId::Keyup, demo_window.get());
 

Samples/basic/demo/data/demo.rml

@@ -38,10 +38,12 @@
 
 body.window
 {
-	width: 1300px;
-	height: 750px;
-	min-width: 1040px;
-	min-height: 300px;
+	left: 80dp;
+	right: 80dp;
+	top: 50dp;
+	bottom: 50dp;
+	min-width: 1040dp;
+	min-height: 300dp;
 	max-width: -1px;
 	max-height: -1px;
 }
@@ -64,18 +66,18 @@ tabs
 	position: fixed;
 	clip: none;
 	text-align: right;
-	top: -47px;
-	left: 205px;
-	right: 10px;
+	top: -47dp;
+	left: 205dp;
+	right: 10dp;
 }
 tab
 {
-    width: 90px;
-	padding: 0px 20px;
-	line-height: 40px;
+	width: 90dp;
+	padding: 0 20dp;
+	line-height: 40dp;
 	display: inline-block;
 	
-	font-size: 15px;
+	font-size: 15dp;
 	color: #ddd;
 	text-align: center;
 	
@@ -99,10 +101,10 @@ panels
 panel
 {
     display: block;
-	padding: 30px;
+	padding: 30dp;
 	margin-left: auto;
 	margin-right: auto;
-	max-width: 500px;
+	max-width: 500dp;
 }
 panel#welcome
 {
@@ -111,13 +113,13 @@ panel#welcome
 h1
 {
 	margin: 1.4em 0 0.7em;
-	font-size: 18px;
+	font-size: 18dp;
 }
 p.title
 {
-	font-size: 35px;
+	font-size: 35dp;
 	color: #b33;
-	font-effect: glow(2px #ed5);
+	font-effect: glow(2dp #ed5);
 }
 .center {
 	text-align: center;
@@ -139,9 +141,9 @@ p.title
 #decorators button.gradient
 {
 	decorator: gradient( vertical #415857 #5990A3 );
-	border: 3px #415857;
-	border-radius: 8px;
-	margin-right: 12px;
+	border: 3dp #415857;
+	border-radius: 8dp;
+	margin-right: 12dp;
 }
 #decorators button.gradient.horizontal
 {
@@ -155,26 +157,26 @@ p.title
 
 #decorators .image-alien
 {
-	width: 64px;
-	height: 64px;
+	width: 64dp;
+	height: 64dp;
 	decorator: image( /assets/high_scores_alien_1.tga );
 }
 #decorators .image-invader
 {
-	width: 51px;
-	height: 39px;
+	width: 51dp;
+	height: 39dp;
 	decorator: image( icon-invader );
 }
 .side-by-side
 {
 	display: inline-block;
-	width: 120px;
+	width: 120dp;
 	vertical-align: middle;
 	text-align: center;
 }
 .tiled-box
 {
-	height: 200px;
+	height: 200dp;
 	decorator: tiled-box(
 		window-tl, window-t, window-tr, 
 		window-l, window-c, window-r,
@@ -184,32 +186,32 @@ p.title
 .image-mode
 {
 	text-align: center;
-	margin-top: 30px;
+	margin-top: 30dp;
 }
 .image-mode > div
 {
 	display: inline-block;
-	width: 120px;
-	height: 50px;
-	padding: 5px 10px;
-	margin: 10px 10px;
+	width: 120dp;
+	height: 50dp;
+	padding: 5dp 10dp;
+	margin: 10dp 10dp;
 	background-color: #c662;
-	border: 1px #777;
-	font-effect: shadow( 1px 1px #333 );
+	border: 1dp #777;
+	font-effect: shadow( 1dp 1dp #333 );
 }
 #decorators .image-mode > div > p
 {
 	margin: -2em 0 0 0;
 	text-align: center;
 }
-.image-mode.small { margin-top: -20px; }
+.image-mode.small { margin-top: -20dp; }
 .image-mode.small > div
 {
-	width: 40px;
-	height: 20px;
+	width: 40dp;
+	height: 20dp;
 	padding: 0;
-	margin-left: 60px;
-	margin-right: 60px;
+	margin-left: 60dp;
+	margin-right: 60dp;
 }
 .align-default     { decorator: image( icon-invader scale-none             ); }
 .align-right       { decorator: image( icon-invader scale-none right       ); }
@@ -231,60 +233,60 @@ p.title
 #font_effects div 
 {
 	display: inline-block;
-	width: 150px;
-	margin: 0px 30px 30px;
+	width: 150dp;
+	margin: 0 30dp 30dp;
 	text-align: center;
-	font-size: 35px;
+	font-size: 35dp;
 	color: #b33;
 }
 #font_effects h1 
 {
-	margin: 15px 0 10px 0;
+	margin: 15dp 0 10dp 0;
 }
 #font_effects .glow
 {
-	font-effect: glow(3px #ed5);
+	font-effect: glow(3dp #ed5);
 }
 #font_effects .glow_sharper
 {
-	font-effect: glow(3px 1px #ed5);
+	font-effect: glow(3dp 1dp #ed5);
 }
 #font_effects .glow_blurry
 {
-	font-effect: glow(2px 7px #ed5);
+	font-effect: glow(2dp 7dp #ed5);
 }
 #font_effects .glow_shadow
 {
 	color: #ed5;
-	font-effect: glow(2px 4px 2px 3px #644);
+	font-effect: glow(2dp 4dp 2dp 3dp #644);
 }
 #font_effects .outline_small
 {
-	font-effect: outline(2px #ed5);
+	font-effect: outline(2dp #ed5);
 }
 #font_effects .outline_big
 {
-	font-effect: outline(4px #ed5);
+	font-effect: outline(4dp #ed5);
 }
 #font_effects .blur_small
 {
 	color: transparent;
-	font-effect: blur(3px #ed5);
+	font-effect: blur(3dp #ed5);
 }
 #font_effects .blur_big
 {
 	color: transparent;
-	font-effect: blur(10px #ed5);
+	font-effect: blur(10dp #ed5);
 }
 #font_effects .shadow_up
 {
 	font-weight: bold;
-	font-effect: shadow(3px -3px #ed5);
+	font-effect: shadow(3dp -3dp #ed5);
 }
 #font_effects .shadow_down
 {
 	font-weight: bold;
-	font-effect: shadow(0px 2px #333);
+	font-effect: shadow(0px 2dp #333);
 }
 
 
@@ -293,10 +295,10 @@ p.title
 #tweening_area
 {
 	position: relative;
-	margin: 30px auto;
-	width: 400px;
-	height: 250px;
-	border: 1px #777;
+	margin: 30dp auto;
+	width: 400dp;
+	height: 250dp;
+	border: 1dp #777;
 	background-color: #ccc2;
 	cursor: cross;
 }
@@ -304,15 +306,15 @@ p.title
 {
 	position: absolute;
 	cursor: pointer;
-	transform: translate(190px, 100px);
+	transform: translate(190dp, 100dp);
 }
 
 #transition
 {
-	margin: 20px auto 30px;
-	width: 400px;
-	height: 250px;
-	border: 1px #777;
+	margin: 20dp auto 30dp;
+	width: 400dp;
+	height: 250dp;
+	border: 1dp #777;
 	background-color: #ccc2;
 	position: relative;
 	overflow: hidden;
@@ -320,38 +322,38 @@ p.title
 #transition > img
 {
 	position: absolute;
-	top: -50px;
+	top: -50dp;
 	left: 50%;
-	margin-left: -32px;
+	margin-left: -32dp;
 	transition: top left 0.6s back-out, opacity 0.4s, image-color 0.4s 0.3s quadratic-out;
 	opacity: 0;
 	image-color: #fff;
 }
 #transition:hover > img
 {
-	top: 50px;
+	top: 50dp;
 	opacity: 1;
 	image-color: #f61;
 }
-#transition:hover .alien1 { left: 30%; top: 75px; }
-#transition:hover .alien3 { left: 70%; top: 75px; }
+#transition:hover .alien1 { left: 30%; top: 75dp; }
+#transition:hover .alien3 { left: 70%; top: 75dp; }
 #transition .defender
 { 
 	transition: image-color 0.3s 0.0s quadratic-out;
 	position: absolute;
-	left: -44px;
-	top: 150px; opacity: 1; 
+	left: -44dp;
+	top: 150dp; opacity: 1; 
 }
 #transition:hover .defender { image-color: #acf;  }
 #transition .ray { 
 	transition: top 0.4s back-out, opacity 0.4s cubic-in;
 	position: absolute;
-	top: -130px;
+	top: -130dp;
 	left: 50%;
 	opacity: 0;
-	margin-left: -20px;
-	width: 40px;
-	height: 200px;
+	margin-left: -20dp;
+	width: 40dp;
+	height: 200dp;
 	decorator: gradient( vertical #daf0 #fef6 );
 }
 #transition:hover .ray
@@ -366,10 +368,10 @@ p.title
 }
 
 .cube_container {
-	width: 200px;
-	height: 200px;
-	margin: 20px auto;
-	perspective: 500px;
+	width: 200dp;
+	height: 200dp;
+	margin: 20dp auto;
+	perspective: 500dp;
 }
 .cube {
 	width: 100%;
@@ -378,20 +380,20 @@ p.title
 	animation: 3s cube-rotate infinite back-in-out;
 }
 .face {
-	left: 50px; top: 50px;
+	left: 50dp; top: 50dp;
 	display: block;
 	position: absolute;
-	width: 100px;
-	height: 100px;
-	line-height: 100px;
-	font-size: 60px;
+	width: 100dp;
+	height: 100dp;
+	line-height: 100dp;
+	font-size: 60dp;
 	color: white;
 	text-align: center;
 }
 /* Define each face based on direction */
 .face.front {
 	background: rgba(0, 0, 0, 160);
-	transform: translateZ(50px);
+	transform: translateZ(50dp);
 }
 .face.front:hover {
 	background: rgba(255, 255, 0, 120);
@@ -399,23 +401,23 @@ p.title
 .face.back {
 	background: rgba(0, 255, 0, 255);
 	color: black;
-	transform: rotateY(180deg) translateZ(50px);
+	transform: rotateY(180deg) translateZ(50dp);
 }
 .face.right {
 	background: rgba(196, 0, 0, 200);
-	transform: rotateY(90deg) translateZ(50px);
+	transform: rotateY(90deg) translateZ(50dp);
 }
 .face.left {
 	background: rgba(0, 0, 196, 200);
-	transform: rotateY(-90deg) translateZ(50px);
+	transform: rotateY(-90deg) translateZ(50dp);
 }
 .face.top {
 	background: rgba(196, 196, 0, 200);
-	transform: rotateX(90deg) translateZ(50px);
+	transform: rotateX(90deg) translateZ(50dp);
 }
 .face.bottom {
 	background: rgba(196, 0, 196, 200);
-	transform: rotateX(-90deg) translateZ(50px);
+	transform: rotateX(-90deg) translateZ(50dp);
 }
 
 
@@ -436,14 +438,14 @@ input.text.two-wide {
 }
 form h2 {
 	display: block;
-	font-size: 16px;
+	font-size: 16dp;
 	font-weight: bold;
 	margin-top: 0.6em;
 	margin-bottom: 0.4em;
 }
 #rating {
 	display: inline-block;
-	width: 40px;
+	width: 40dp;
 	padding-left: 1em;
 }
 #rating_emoji { 
@@ -451,56 +453,56 @@ form h2 {
 	font-size: 1.7em;
 }
 progressbar {
-	margin: 10px 20px;
+	margin: 10dp 20dp;
 	display: inline-block;
 	vertical-align: middle;
 }
 #gauge { 
 	decorator: image( gauge );
-	width: 100px;
-	height: 86px;
+	width: 100dp;
+	height: 86dp;
 	fill-image: gauge-fill;
 }
 #progress_horizontal { 
 	decorator: tiled-horizontal( progress-l, progress-c, progress-r );
-	width: 150px;
-	height: 34px;
+	width: 150dp;
+	height: 34dp;
 }
 #progress_horizontal fill {
 	decorator: tiled-horizontal( progress-fill-l, progress-fill-c, progress-fill-r );
-	margin: 0 7px;
-	padding-left: 14px;
+	margin: 0 7dp;
+	padding-left: 14dp;
 }
 #progress_label {
-	font-size: 18px;
+	font-size: 18dp;
 	color: #ceb;
 	margin-left: 1em;
 	margin-bottom: 0;
 }
 #gauge_value, #progress_value {
-	font-size: 16px;
+	font-size: 16dp;
 	color: #4ADB2D;
 	text-align: right;
-	width: 53px;
-	font-effect: outline( 2px #555 );
+	width: 53dp;
+	font-effect: outline( 2dp #555 );
 }
 #gauge_value {
-	margin: 34px 0 0 18px;
+	margin: 34dp 0 0 18dp;
 }
 #progress_value { 
-	margin-left: -20px;
+	margin-left: -20dp;
 	display: inline-block;
 }
 
 
 #form_output 
 {
-	border: 1px #666;
+	border: 1dp #666;
 	font-size: 0.9em;
 	background-color: #ddd;
-	min-height: 180px;
-	margin-top: 10px;
-	padding: 5px 8px;
+	min-height: 180dp;
+	margin-top: 10dp;
+	padding: 5dp 8dp;
 	color: #222;
 	white-space: pre-wrap;
 	overflow: hidden auto;
@@ -508,8 +510,8 @@ progressbar {
 
 #controls textarea 
 {
-	font-size: 18px;
-	font-effect: outline(2px #060);
+	font-size: 18dp;
+	font-effect: outline(2dp #060);
 	color: #ddd;
 	caret-color: #060;
 }
@@ -525,15 +527,15 @@ progressbar {
 #sandbox
 {
 	position: absolute;
-	top: 20px;
-	right: 30px;
-	bottom: 20px;
-	left: 30px;
+	top: 20dp;
+	right: 30dp;
+	bottom: 20dp;
+	left: 30dp;
 	padding: 0;
 }
 #sandbox textarea
 {
-	font-size: 13px;
+	font-size: 13dp;
 	color: #222;
 	font-family: rmlui-debugger-font;
 	box-sizing: border-box;
@@ -546,13 +548,13 @@ progressbar {
 	background-color: #fff;
 	border: 1px #000;
 	height: 55%;
-	margin-top: 15px;
+	margin-top: 15dp;
 	color: #000;
 	text-align: left;
 	position: relative;
 }
-#sandbox_rml_source { margin-left: -5px; }
-#sandbox_rcss_source { margin-left: 5px; }
+#sandbox_rml_source { margin-left: -5dp; }
+#sandbox_rcss_source { margin-left: 5dp; }
 </style>
 </head>
 
@@ -592,16 +594,16 @@ progressbar {
 	<h1>Tiled-horizontal decorator</h1>
 	<p>The 'tiled-horizontal' decorator separates an image into three parts, with the edges displayed at their native size while the middle part is stretched to cover the remaining width of the element. In each of the following examples an image is displayed at its native size first, and then the decorator is applied to it with its element stretched horizontally.</p>
 	<div class="side-by-side">
-		<div style="width: 30px; height: 30px; decorator: image( radio );"/>
-		<div style="width: 120px; height: 30px; decorator: tiled-horizontal( demo-radio-l, demo-radio-m, demo-radio-r );"/>
+		<div style="width: 30dp; height: 30dp; decorator: image( radio );"/>
+		<div style="width: 120dp; height: 30dp; decorator: tiled-horizontal( demo-radio-l, demo-radio-m, demo-radio-r );"/>
 	</div>
 	<div class="side-by-side">
-		<div style="width: 30px; height: 30px; decorator: image( checkbox );"/>
-		<div style="width: 120px; height: 30px; decorator: tiled-horizontal( demo-checkbox-l, demo-checkbox-m, demo-checkbox-r );"/>
+		<div style="width: 30dp; height: 30dp; decorator: image( checkbox );"/>
+		<div style="width: 120dp; height: 30dp; decorator: tiled-horizontal( demo-checkbox-l, demo-checkbox-m, demo-checkbox-r );"/>
 	</div>
-	<div class="side-by-side" width="250px;">
-		<div style="width: 96px; height: 85px; decorator: image( demo-title-bar );"/>
-		<div style="width: 250px; height: 85px; decorator: tiled-horizontal( title-bar-l, title-bar-c, title-bar-r );"/>
+	<div class="side-by-side" width="250dp;">
+		<div style="width: 96dp; height: 85dp; decorator: image( demo-title-bar );"/>
+		<div style="width: 250dp; height: 85dp; decorator: tiled-horizontal( title-bar-l, title-bar-c, title-bar-r );"/>
 	</div>
 	<p>In the third example we show the same title bar that is used to style the sample windows.</p>
 	
@@ -609,20 +611,20 @@ progressbar {
 	<h1>Tiled-vertical decorator</h1>
 	<p>The 'tiled-vertical' decorator behaves like tiled-horizontal, but this time it is stretched vertically.</p>
 	<div class="side-by-side">
-		<div style="width: 30px; height: 30px; decorator: image( radio );"/>
-		<div style="width: 30px; height: 80px; decorator: tiled-vertical( demo-radio-t, demo-radio-c, demo-radio-b );"/>
+		<div style="width: 30dp; height: 30dp; decorator: image( radio );"/>
+		<div style="width: 30dp; height: 80dp; decorator: tiled-vertical( demo-radio-t, demo-radio-c, demo-radio-b );"/>
 	</div>
 	<div class="side-by-side">
-		<div style="width: 30px; height: 30px; decorator: image( checkbox );"/>
-		<div style="width: 30px; height: 80px; decorator: tiled-vertical( demo-checkbox-t, demo-checkbox-c, demo-checkbox-b );"/>
+		<div style="width: 30dp; height: 30dp; decorator: image( checkbox );"/>
+		<div style="width: 30dp; height: 80dp; decorator: tiled-vertical( demo-checkbox-t, demo-checkbox-c, demo-checkbox-b );"/>
 	</div>
 	<div class="side-by-side">
-		<div style="width: 30px; height: 30px; decorator: image( checkbox-checked );"/>
-		<div style="width: 30px; height: 80px; decorator: tiled-vertical( demo-checked-t, demo-checked-c, demo-checked-b );"/>
+		<div style="width: 30dp; height: 30dp; decorator: image( checkbox-checked );"/>
+		<div style="width: 30dp; height: 80dp; decorator: tiled-vertical( demo-checked-t, demo-checked-c, demo-checked-b );"/>
 	</div>
 	<div class="side-by-side">
-		<div style="width: 51px; height: 39px; decorator: image( icon-help );"/>
-		<div style="width: 51px; height: 80px; decorator: tiled-vertical( demo-help-t, demo-help-c, demo-help-b );"/>
+		<div style="width: 51dp; height: 39dp; decorator: image( icon-help );"/>
+		<div style="width: 51dp; height: 80dp; decorator: tiled-vertical( demo-help-t, demo-help-c, demo-help-b );"/>
 	</div>
 	<p>Clearly, not all images are designed to stretch like this. However, one can certainly envision a usage for the first two examples.</p>
 	
@@ -637,20 +639,20 @@ progressbar {
 	<p>The 'ninepatch' decorator is similar to the tiled-box decorator in that it splits the image into nine parts. However, only two sprites are used to define all nine tiles, an outer sprite and an inner sprite.</p>
 	
 	<p>Let us define the outer sprite by the following image, and the inner sprite as the part within the displayed border.</p>
-	<div style="position: relative; text-align: left; width: 145px;">
-		<img sprite="textarea"/><img sprite="textarea-inner" style="position: absolute; left: 10px; top: 13px; border: 1px #f0f;"/>
+	<div style="position: relative; text-align: left; width: 145dp;">
+		<img sprite="textarea"/><img sprite="textarea-inner" style="position: absolute; left: 10dp; top: 13dp; border: 1dp #f0f;"/>
 	</div>
 	
 	<p>When the ninepatch decorator is applied and the element is stretched, the following is rendered.</p>
-	<div style="width: 240px; height: 50px; decorator: ninepatch(textarea, textarea-inner);"/>
+	<div style="width: 240dp; height: 50dp; decorator: ninepatch(textarea, textarea-inner, 1.0);"/>
 	<p>Notice that the corners stay fixed, and the inner sprite is stretched. We can also control the rendered size of the edges, here the left edge is displayed at its native size and the others at half their size.</p>
-	<div style="width: 240px; height: 50px; decorator: ninepatch(textarea, textarea-inner, .5 .5 .5 1);"/>
+	<div style="width: 240dp; height: 50dp; decorator: ninepatch(textarea, textarea-inner, .5 .5 .5 1);"/>
 	
 	<p>If we instead compare this to the image decorator, we see the following.</p>
-	<div style="width: 240px; height: 50px; decorator: image(textarea);"/>
+	<div style="width: 240dp; height: 50dp; decorator: image(textarea);"/>
 	<p>With the image decorator it looks blurry and its borders are stretched.</p>
 	
-	<div style="width: 850px; margin-left: -175px;">
+	<div style="width: 850dp; margin-left: -175dp;">
 		<h1>Image decorator fit modes</h1>
 		<div class="image-mode">
 			<div class="fit-fill"><p>fill</p></div>
@@ -687,7 +689,7 @@ progressbar {
 	<h1>Image elements</h1>
 	<div class="center">
 		<img src="../../../assets/high_scores_defender.tga" class="clickable" onclick="change_color"/>
-		<img sprite="icon-game" style="vertical-align: 10px;"/>
+		<img sprite="icon-game" style="vertical-align: 10dp;"/>
 		<img src="../../../assets/high_scores_defender.tga" style="image-color: #fc5;" rect="0 0 64 64"/>
 		<img src="../../../assets/high_scores_defender.tga" style="image-color: #9c5;" rect="64 0 64 64"/>
 	</div>
@@ -695,7 +697,7 @@ progressbar {
 	
 	<h1>Sprite sheets</h1>
 	<p>Sprite sheets are defined by an image source and a collection of sprites, and can be declared in RCSS. Sprites are essentially rectangles into the given image. For example, the following image</p>
-	<img src="../../../assets/invader.tga" rect="0 0 500 435" style="margin-top: 10px; margin-bottom: 10px;"/>
+	<img src="../../../assets/invader.tga" rect="0 0 500 435" style="margin-top: 10dp; margin-bottom: 10dp;"/>
 	<p>is used to render most sprites in this demo. Sprites can be used in decorators and image elements as if they were separate images.</p>
 </panel>
 <tab>Font effects</tab>
@@ -756,7 +758,7 @@ progressbar {
 		<option value="in-out">In-Out</option>
 	</select>
 	<div>
-		<input type="range" style="width: 150px; margin-right: 1em;" min="0" max="2" step="0.05" value="0.5" onchange="tween_duration"/> 
+		<input type="range" style="width: 150dp; margin-right: 1em;" min="0" max="2" step="0.05" value="0.5" onchange="tween_duration"/> 
 		Duration <span id="duration">0.50</span> s
 	</div>
 	
@@ -816,7 +818,7 @@ progressbar {
 		<div>
 			<textarea cols="25" rows="4" wrap="nowrap" name="message">😍 Hello 🌐 World! 😎</textarea>
 		</div>
-		<div style="margin-bottom: 15px;">
+		<div style="margin-bottom: 15dp;">
 			<input type="submit">Submit</input>
 		</div>
 		<div id="submit_progress" style="display: none;">

Samples/basic/demo/src/main.cpp

@@ -54,17 +54,13 @@ scrollbarhorizontal sliderbar:active { background: #666; }
 class DemoWindow : public Rml::EventListener
 {
 public:
-	DemoWindow(const Rml::String &title, const Rml::Vector2f &position, Rml::Context *context)
+	DemoWindow(const Rml::String &title, Rml::Context *context)
 	{
 		using namespace Rml;
 		document = context->LoadDocument("basic/demo/data/demo.rml");
-		if (document != nullptr)
+		if (document)
 		{
-			{
-				document->GetElementById("title")->SetInnerRML(title);
-				document->SetProperty(PropertyId::Left, Property(position.x, Property::PX));
-				document->SetProperty(PropertyId::Top, Property(position.y, Property::PX));
-			}
+			document->GetElementById("title")->SetInnerRML(title);
 
 			// Add sandbox default text.
 			if (auto source = static_cast<Rml::ElementFormControl*>(document->GetElementById("sandbox_rml_source")))
@@ -465,7 +461,7 @@ int main(int RMLUI_UNUSED_PARAMETER(argc), char** RMLUI_UNUSED_PARAMETER(argv))
 #endif
 
 	const int width = 1600;
-	const int height = 900;
+	const int height = 890;
 
 	ShellRenderInterfaceOpenGL opengl_renderer;
 	shell_renderer = &opengl_renderer;
@@ -505,7 +501,7 @@ int main(int RMLUI_UNUSED_PARAMETER(argc), char** RMLUI_UNUSED_PARAMETER(argv))
 
 	Shell::LoadFonts("assets/");
 
-	demo_window = Rml::MakeUnique<DemoWindow>("Demo sample", Rml::Vector2f(150, 50), context);
+	demo_window = Rml::MakeUnique<DemoWindow>("Demo sample", context);
 	demo_window->GetDocument()->AddEventListener(Rml::EventId::Keydown, demo_window.get());
 	demo_window->GetDocument()->AddEventListener(Rml::EventId::Keyup, demo_window.get());
 	demo_window->GetDocument()->AddEventListener(Rml::EventId::Animationend, demo_window.get());

Samples/basic/drag/data/icon.rcss

@@ -3,18 +3,18 @@ icon
     /* The icons are floated left so they appear left-to-right. */
     float: left;
     
-    /* The padding is added to push the text down to the bottom of the element. The inner dimensions plus the
-       padding come to 100px square. */
-    width: 80px;
-    height: 40px;
-    padding: 60px 10px 0px 10px;
-    margin: 10px;
+    /* The padding is added to push the text down to the bottom of the element.  */
+	box-sizing: border-box;
+    width: 100dp;
+    height: 100dp;
+    padding: 60dp 10dp 0 10dp;
+    margin: 10dp;
     
     decorator: image( ../../../assets/present.tga );
     
-    font-size: 12px;
+    font-size: 12dp;
     text-align: center;
-    font-effect: shadow(1px 1px black);
+    font-effect: shadow(1dp 1dp black);
 	
 	cursor: move;
     

Samples/basic/drag/data/inventory.rml

@@ -6,8 +6,8 @@
 	<style>
 		body
 		{
-			width: 400px;
-			height: 300px;
+			width: 400dp;
+			height: 300dp;
 		}
 		
 		/* Hide the window icon. */

Samples/basic/drag/src/Inventory.cpp

@@ -38,8 +38,8 @@ Inventory::Inventory(const Rml::String& title, const Rml::Vector2f& position, Rm
 	{
 		using Rml::PropertyId;
 		document->GetElementById("title")->SetInnerRML(title);
-		document->SetProperty(PropertyId::Left, Rml::Property(position.x, Rml::Property::PX));
-		document->SetProperty(PropertyId::Top, Rml::Property(position.y, Rml::Property::PX));
+		document->SetProperty(PropertyId::Left, Rml::Property(position.x, Rml::Property::DP));
+		document->SetProperty(PropertyId::Top, Rml::Property(position.y, Rml::Property::DP));
 		document->Show();
 	}
 

Samples/basic/lottie/data/lottie.rml

@@ -5,8 +5,8 @@
 		<style>
 			body
 			{
-				width: 300px;
-				height: 225px;
+				width: 300dp;
+				height: 225dp;
 				
 				margin: auto;
 			}

Samples/basic/transform/data/transform.rml

@@ -5,8 +5,8 @@
 <style>
 body
 {
-	width: 550px;
-	height: 500px;
+	width: 550dp;
+	height: 500dp;
 	/*transform: rotate3d(0,1,0,15deg);*/
 }
 
@@ -25,7 +25,7 @@ div#title_bar:hover
 spacer
 {
 	display: inline-block;
-	width: 25px;
+	width: 25dp;
 }
 scrollbarvertical sliderbar:hover,scrollbarvertical sliderbar:active
 {
@@ -37,25 +37,25 @@ scrollbarvertical sliderbar:hover,scrollbarvertical sliderbar:active
    https://developer.mozilla.org/en-US/docs/Web/CSS/perspective */
 
 .pers250 {
-	perspective: 250px;
+	perspective: 250dp;
 }
 
 .pers350 {
-	perspective: 350px;
+	perspective: 350dp;
 }
 
 .pers500 {
-	perspective: 500px;
+	perspective: 500dp;
 }
 
 .pers650 {
-	perspective: 650px;
+	perspective: 650dp;
 }
 
 .container {
-	width: 200px;
-	height: 200px;
-	margin: 75px auto;
+	width: 200dp;
+	height: 200dp;
+	margin: 75dp auto;
 	background-color: #a003;
 }
 
@@ -63,18 +63,18 @@ scrollbarvertical sliderbar:hover,scrollbarvertical sliderbar:active
 	width: 100%;
 	height: 100%;
 	position: relative;
-	transform: translateZ(50px);
+	transform: translateZ(50dp);
 	perspective-origin: 150% 150%;
 }
 
 .face {
-	left: 50px; top: 50px;
+	left: 50dp; top: 50dp;
 	display: block;
 	position: absolute;
-	width: 100px;
-	height: 100px;
-	line-height: 100px;
-	font-size: 60px;
+	width: 100dp;
+	height: 100dp;
+	line-height: 100dp;
+	font-size: 60dp;
 	color: white;
 	text-align: center;
 }
@@ -82,7 +82,7 @@ scrollbarvertical sliderbar:hover,scrollbarvertical sliderbar:active
 /* Define each face based on direction */
 .front {
 	background: rgba(0, 0, 0, 160);
-	transform: translateZ(50px);
+	transform: translateZ(50dp);
 }
 .front:hover {
 	background: rgba(255, 255, 0, 120);
@@ -90,23 +90,23 @@ scrollbarvertical sliderbar:hover,scrollbarvertical sliderbar:active
 .back {
 	background: rgba(0, 255, 0, 255);
 	color: black;
-	transform: rotateY(180deg) translateZ(50px);
+	transform: rotateY(180deg) translateZ(50dp);
 }
 .right {
 	background: rgba(196, 0, 0, 200);
-	transform: rotateY(90deg) translateZ(50px);
+	transform: rotateY(90deg) translateZ(50dp);
 }
 .left {
 	background: rgba(0, 0, 196, 200);
-	transform: rotateY(-90deg) translateZ(50px);
+	transform: rotateY(-90deg) translateZ(50dp);
 }
 .top {
 	background: rgba(196, 196, 0, 200);
-	transform: rotateX(90deg) translateZ(50px);
+	transform: rotateX(90deg) translateZ(50dp);
 }
 .bottom {
 	background: rgba(196, 0, 196, 200);
-	transform: rotateX(-90deg) translateZ(50px);
+	transform: rotateX(-90deg) translateZ(50dp);
 }
 </style>
 </head>
@@ -120,7 +120,7 @@ scrollbarvertical sliderbar:hover,scrollbarvertical sliderbar:active
 		<div class="face right">2</div>
 		<div class="face front">1</div>
 	</div>
-	perspective: 650px;
+	perspective: 650dp;
 </div>
 
 <p>Press 'space' to toggle rotation.</p>
@@ -145,7 +145,7 @@ augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
 consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
 laoreet dolore magna aliquam erat volutpat.</p>
 
-<button style="width: 220px; transform: translateZ(-30px);">A wild button appears!</button>
+<button style="width: 220dp; transform: translateZ(-30dp);">A wild button appears!</button>
 
 <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
 lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
@@ -170,7 +170,8 @@ commodo consequat.</p>
 		<div class="face right">2</div>
 		<div class="face front">1</div>
 	</div>
-	perspective: 250px; clip: none;
+	perspective: 250dp; clip:none;<br/>
+	(rendered outside the window)
 </div>
 
 <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse

Samples/basic/transform/src/main.cpp

@@ -46,8 +46,8 @@ public:
 		if (document)
 		{
 			document->GetElementById("title")->SetInnerRML(title);
-			document->SetProperty(Rml::PropertyId::Left, Rml::Property(position.x, Rml::Property::PX));
-			document->SetProperty(Rml::PropertyId::Top, Rml::Property(position.y, Rml::Property::PX));
+			document->SetProperty(Rml::PropertyId::Left, Rml::Property(position.x, Rml::Property::DP));
+			document->SetProperty(Rml::PropertyId::Top, Rml::Property(position.y, Rml::Property::DP));
 			document->Show();
 		}
 	}
@@ -65,7 +65,7 @@ public:
 		if (document && perspective > 0)
 		{
 			std::stringstream s;
-			s << "perspective(" << perspective << "px) ";
+			s << "perspective(" << perspective << "dp) ";
 			document->SetProperty("transform", s.str().c_str());
 		}
 	}
@@ -76,7 +76,7 @@ public:
 		{
 			std::stringstream s;
 			if (perspective > 0)
-				s << "perspective(" << perspective << "px) ";
+				s << "perspective(" << perspective << "dp) ";
 			s << "rotate3d(0.0, 1.0, 0.0, " << degrees << "deg)";
 			document->SetProperty("transform", s.str().c_str());
 		}

Samples/basic/treeview/data/treeview.rml

@@ -4,8 +4,8 @@
 	<title>Tree View</title>
 	<style>
 		body {
-			width: 450px;
-			height: 400px;
+			width: 450dp;
+			height: 400dp;
 			margin: auto;
 		}
 		
@@ -19,8 +19,8 @@
 		}
 		expand {
 			display: inline-block;
-			vertical-align: -3px;
-			margin-right: 2px;
+			vertical-align: -3dp;
+			margin-right: 2dp;
 		}
 		tbody tr {
 			height: 1.5em;
@@ -38,12 +38,12 @@
 <body template="window">
 <table data-model="filebrowser">
 	<thead>
-		<tr><td style="margin-left: 10px; margin-right: 10px;"></td></tr>
+		<tr><td style="margin-left: 10dp; margin-right: 10dp;"></td></tr>
 	</thead>
 	<tbody>
 		<tr data-for="file : files" data-if="file.visible">
 			<td>
-				<spacer data-style-width="25 * (1 - file.directory + file.depth) + 'px'"/>
+				<spacer data-style-width="25 * (1 - file.directory + file.depth) + 'dp'"/>
 				<expand data-if="file.directory" data-class-collapsed="file.collapsed" data-event-click="toggle_expand(it_index)"/>
 				{{ file.name }}
 			</td>

Samples/tutorial/datagrid/data/tutorial.rcss

@@ -44,13 +44,13 @@ body
 	font-family: LatoLatin;
 	font-weight: normal;
 	font-style: normal;
-	font-size: 15px;
+	font-size: 15dp;
 	color: white;
 }
 
 body.window
 {
-	padding: 10px 15px;
+	padding: 10dp 15dp;
 	
 	decorator: tiled-box(
 		window-tl, window-t, window-tr, 
@@ -61,20 +61,20 @@ body.window
 div#title-bar
 {
 	position: absolute;
-	top: -40px;
+	top: -40dp;
 }
 
 div#title-bar span
 {
-	padding-left: 85px;
-	padding-right: 25px;
-	padding-top: 17px;
-	padding-bottom: 48px;
+	padding-left: 85dp;
+	padding-right: 25dp;
+	padding-top: 17dp;
+	padding-bottom: 48dp;
 
-	font-size: 20px;
+	font-size: 20dp;
 	font-weight: bold;
 
-	font-effect: glow(2px 2px 0px 1px #1117);
+	font-effect: glow(2dp 2dp 0dp 1dp #1117);
 	
 	decorator: tiled-horizontal( title-bar-l, title-bar-c, title-bar-r );
 }
@@ -89,10 +89,10 @@ div#content
 
 scrollbarvertical
 {
-	margin-top: -6px;
-	margin-bottom: -6px;
-	margin-right: -11px;
-	width: 27px;
+	margin-top: -6dp;
+	margin-bottom: -6dp;
+	margin-right: -11dp;
+	width: 27dp;
 }
 
 scrollbarvertical slidertrack
@@ -106,9 +106,9 @@ scrollbarvertical slidertrack:active
 
 scrollbarvertical sliderbar
 {
-	margin-left: 4px;
-	width: 23px;
-	min-height: 46px;
+	margin-left: 4dp;
+	width: 23dp;
+	min-height: 46dp;
 
 	decorator: tiled-vertical( sliderbar-t, sliderbar-c, sliderbar-b );
 }
@@ -126,8 +126,8 @@ scrollbarvertical sliderbar:active
 scrollbarvertical sliderarrowdec,
 scrollbarvertical sliderarrowinc
 {
-	width: 27px;
-	height: 24px;
+	width: 27dp;
+	height: 24dp;
 }
 
 scrollbarvertical sliderarrowdec

Samples/tutorial/datagrid/data/tutorial.rml

@@ -5,8 +5,8 @@
 	<style>
 		body
 		{
-			width: 400px;
-			height: 300px;
+			width: 400dp;
+			height: 300dp;
 
 			margin: auto;
 		}
@@ -14,8 +14,8 @@
 		defender
 		{
 				display: block;
-				width: 64px;
-				height: 16px;
+				width: 64dp;
+				height: 16dp;
 
 				decorator: defender( ../../../assets/high_scores_defender.tga );
 		}

Samples/tutorial/datagrid_tree/data/tutorial.rcss

@@ -44,13 +44,13 @@ body
 	font-family: LatoLatin;
 	font-weight: normal;
 	font-style: normal;
-	font-size: 15px;
+	font-size: 15dp;
 	color: white;
 }
 
 body.window
 {
-	padding: 10px 15px;
+	padding: 10dp 15dp;
 	
 	decorator: tiled-box(
 		window-tl, window-t, window-tr, 
@@ -61,20 +61,20 @@ body.window
 div#title-bar
 {
 	position: absolute;
-	top: -40px;
+	top: -40dp;
 }
 
 div#title-bar span
 {
-	padding-left: 85px;
-	padding-right: 25px;
-	padding-top: 17px;
-	padding-bottom: 48px;
+	padding-left: 85dp;
+	padding-right: 25dp;
+	padding-top: 17dp;
+	padding-bottom: 48dp;
 
-	font-size: 20px;
+	font-size: 20dp;
 	font-weight: bold;
 
-	font-effect: glow(2px 2px 0px 1px #1117);
+	font-effect: glow(2dp 2dp 0dp 1dp #1117);
 	
 	decorator: tiled-horizontal( title-bar-l, title-bar-c, title-bar-r );
 }
@@ -89,10 +89,10 @@ div#content
 
 scrollbarvertical
 {
-	margin-top: -6px;
-	margin-bottom: -6px;
-	margin-right: -11px;
-	width: 27px;
+	margin-top: -6dp;
+	margin-bottom: -6dp;
+	margin-right: -11dp;
+	width: 27dp;
 }
 
 scrollbarvertical slidertrack
@@ -106,9 +106,9 @@ scrollbarvertical slidertrack:active
 
 scrollbarvertical sliderbar
 {
-	margin-left: 4px;
-	width: 23px;
-	min-height: 46px;
+	margin-left: 4dp;
+	width: 23dp;
+	min-height: 46dp;
 
 	decorator: tiled-vertical( sliderbar-t, sliderbar-c, sliderbar-b );
 }
@@ -126,8 +126,8 @@ scrollbarvertical sliderbar:active
 scrollbarvertical sliderarrowdec,
 scrollbarvertical sliderarrowinc
 {
-	width: 27px;
-	height: 24px;
+	width: 27dp;
+	height: 24dp;
 }
 
 scrollbarvertical sliderarrowdec

Samples/tutorial/datagrid_tree/data/tutorial.rml

@@ -30,8 +30,8 @@
 	
 		body
 		{
-			width: 400px;
-			height: 300px;
+			width: 400dp;
+			height: 300dp;
 
 			margin: auto;
 		}
@@ -39,8 +39,8 @@
 		defender
 		{
 			display: block;
-			width: 64px;
-			height: 16px;
+			width: 64dp;
+			height: 16dp;
 			
 			decorator: defender( ../../../assets/high_scores_defender.tga );
 		}
@@ -63,8 +63,8 @@
 		datagridheader
 		{
 			width: auto;
-			height: 25px;
-			padding: 5px 10px 0px 10px;
+			height: 25dp;
+			padding: 5dp 10dp 0dp 10dp;
 		
 			decorator: tiled-horizontal( datagridheader-l, datagridheader-c, datagridheader-r );
 		}
@@ -74,9 +74,9 @@
 			color: black;
 			text-align: center;
 			
-			margin-left: 4px;
-			margin-right: 3px;
-			padding: 0px 4px 4px 4px;
+			margin-left: 4dp;
+			margin-right: 3dp;
+			padding: 0dp 4dp 4dp 4dp;
 			
 			decorator: tiled-box(
 				datagridbody-tl, datagridbody-t, datagridbody-tr, 
@@ -94,9 +94,9 @@
 		{
 			display: block;
 			
-			margin: 1px 0px 1px 5px;
-			height: 17px;
-			width: 17px;
+			margin: 1dp 0dp 1dp 5dp;
+			height: 17dp;
+			width: 17dp;
 			
 			decorator: image( datagridexpand );
 		}

Samples/tutorial/drag/data/inventory.rml

@@ -6,8 +6,8 @@
 	<style>
 		body
 		{
-			width: 400px;
-			height: 300px;
+			width: 400dp;
+			height: 300dp;
 		}
 	</style>
 </head>

Samples/tutorial/drag/data/tutorial.rcss

@@ -9,16 +9,16 @@ icon
     /* The icons are floated left so they appear left-to-right. */
     float: left;
     
-    /* The padding is added to push the text down to the bottom of the element. The inner dimensions plus the
-       padding come to 100px square. */
-    width: 80px;
-    height: 40px;
-    padding: 60px 10px 0px 10px;
-    margin: 10px;
+    /* The padding is added to push the text down to the bottom of the element. */
+	box-sizing: border-box;
+    width: 100dp;
+    height: 100dp;
+    padding: 60dp 10dp 0dp 10dp;
+    margin: 10dp;
     
     decorator: image( /assets/present.tga );
     
-    font-size: 12px;
+    font-size: 12dp;
     text-align: center;
-    font-effect: shadow(1px 1px black);
+    font-effect: shadow(1dp 1dp black);
 }

Samples/tutorial/drag/src/Inventory.cpp

@@ -8,8 +8,8 @@ Inventory::Inventory(const Rml::String& title, const Rml::Vector2f& position, Rm
 	if (document)
 	{
 		document->GetElementById("title")->SetInnerRML(title);
-		document->SetProperty(Rml::PropertyId::Left, Rml::Property(position.x, Rml::Property::PX));
-		document->SetProperty(Rml::PropertyId::Top, Rml::Property(position.y, Rml::Property::PX));
+		document->SetProperty(Rml::PropertyId::Left, Rml::Property(position.x, Rml::Property::DP));
+		document->SetProperty(Rml::PropertyId::Top, Rml::Property(position.y, Rml::Property::DP));
 		document->Show();
 	}
 }

Samples/tutorial/template/data/tutorial.rcss

@@ -18,7 +18,7 @@ body
 	font-family: LatoLatin;
 	font-weight: normal;
 	font-style: normal;
-	font-size: 15px;
+	font-size: 15dp;
 	color: white;
 }
 

Samples/tutorial/template/data/tutorial.rml

@@ -5,8 +5,8 @@
 	<style>
 		body
 		{
-			width: 400px;
-			height: 300px;
+			width: 400dp;
+			height: 300dp;
 
 			margin: auto;
 		}