Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[b33eff]: CSS to put text on screen when rotated #2109

Merged
merged 9 commits into from
Dec 14, 2023
Merged

[b33eff]: CSS to put text on screen when rotated #2109

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
bcdaf01
CSS to put text on screen when rotated
tombrunet Aug 31, 2023
d466213
Add author
tombrunet Aug 31, 2023
dd82e5c
Merge branch 'develop' into issue-1782
Jym77 Sep 28, 2023
41fe475
Fix Fail 1 and 4 to rotate in a square
tombrunet Oct 20, 2023
0a06454
space to tab
tombrunet Oct 20, 2023
49db08a
Merge branch 'develop' into issue-1782
tombrunet Oct 20, 2023
620cc8f
Merge branch 'develop' into issue-1782
tombrunet Nov 3, 2023
fd773b3
Merge branch 'develop' into issue-1782
Jym77 Dec 7, 2023
f9c3d64
Merge branch 'develop' into issue-1782
Jym77 Dec 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
13 changes: 13 additions & 0 deletions _rules/css-restrict-orientation-b33eff.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ acknowledgments:
authors:
- Audrey Maniez
- Jey Nandakumar
- Tom Brunet
funding:
- WAI-Tools
---
Expand Down Expand Up @@ -160,6 +161,8 @@ A page where CSS [transform](https://www.w3.org/TR/css-transforms/#propdef-trans
@media (orientation: portrait) {
html {
transform: rotate(1.5708rad);
width: min(100vw, 100vh);
height: min(100vw, 100vh);
}
}
</style>
Expand Down Expand Up @@ -203,11 +206,16 @@ This page appears rotated at a slight angle of 2.5 degrees for stylistic purpose
<style>
body {
transform: rotate(2.5deg);
padding: 2rem;
width: min(100vw, 100vh);
height: min(100vw, 100vh);
}

@media (orientation: landscape) {
body {
transform: rotate(92.5deg);
position: absolute;
right: 0px;
}
}
</style>
Expand All @@ -230,6 +238,8 @@ A page where the CSS [rotate](https://www.w3.org/TR/css-transforms-2/#individual
@media (orientation: portrait) {
html {
rotate: 90deg;
width: min(100vw, 100vh);
height: min(100vw, 100vh);
}
}
</style>
Expand Down Expand Up @@ -315,6 +325,9 @@ A page where CSS [transform](https://www.w3.org/TR/css-transforms/#propdef-trans
<style>
body {
transform: rotate(90deg);
width: calc(min(100vw, 100vh) - 2rem);
height: calc(min(100vw, 100vh) - 2rem);
padding: 1rem;
}
</style>
</head>
Expand Down