I want to align East Asian texts vertically in a blog post but have no knowledge of CSS. I want it to look like this https://dl.dropboxusercontent.com/u/444684/OpenWebDemos/css3writingModes/japanese-upright.html .
I tried to do it in my blog but every character is vertically align, instead of just characters within the blog post. Here is my blog: http://dandan-koushun.blogspot.com/
Can you show me what is wrong? Below is my CSS:
<!DOCTYPE html>
<html lang="ja">
<section>
<meta charset="utf-8" />
<style>
html {
font-size: 10px;
width: 100%;
}
body {
width: 100%;
height: 34rem;
margin-bottom: 8rem;
-ms-writing-mode: tb-rl; /* old syntax. IE */
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl; /* new syntax */
}
h1 {
text-shadow: 0 1px 1px grey;
color: white;
font-weight: bold;
font-size: 3rem;
padding: 11rem 12rem 0 0;
}
section {
-ms-writing-mode: tb-rl; /* old syntax. IE */
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl; /* new syntax */
}
</html>
What I would have done would be to use CSS3 to rotate the div by 90 degrees but what they do is the following:
ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
-webkit-text-orientation: upright;
-moz-text-orientation: upright;
-ms-text-orientation: upright;
text-orientation: upright;
Add that to the parent div.
Related
Sorry for the title...I don't know how to really express it. Anyway, I have a simple flex box page that has little content. The issue is in tablet, if I touch-move the screen, the content moves. It shows no horizontal scroll and I see no empty gaps. Since there is no extra content to show horizontally, I don't want it to move horizontally at all.
Screens follow:
The page on load fully shown
Tho content is small, I can move the div and hide it to the left and pull it back again.
What I expect is the element not to move around since there is no content to move around.
My display is outright from this except no header/footer. For convenience:
CSS:
*, *:before, *:after
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body
{
width: 100%;
height: 100%;
left: 0 !important;
top: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body
{
background: #444444;
color: #cccccc;
font-size: 14px;
/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.flexbox-parent
{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
background: rgba(255, 255, 255, .1);
}
.flexbox-item
{
padding: 0px;
}
.flexbox-item-grow
{
flex: 1; /* same as flex: 1 1 auto; */
}
.flexbox-item.content
{
background: rgba(0, 0, 255, .1);
}
.fill-area
{
display: flex;
flex-direction: row;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
}
.fill-area-content
{
background: rgba(0, 0, 0, .3);
border: 1px solid #000000;
/* Needed for when the area gets squished too far and there is content that can't be displayed */
overflow: auto;
}
HTML:
<div class="flexbox-parent">
<div class="flexbox-item fill-area content flexbox-item-grow">
<div class="fill-area-content flexbox-item-grow">
Content
<br /><br />
Emulates height 100% with a horizontal flexbox with stretch
<br /><br />
Content continues
</div>
</div>
</div>
The following code works well on Chrome, but on Edge the Sticky element is out of place
.main {
display: flex;
max-width: 1200px;
width: 100%;
flex-flow: row nowrap;
margin: auto;
text-align: center;
font-size: 30px;
}
.sticky {
width: 300px;
max-height: 715px;
position: sticky;
top: 10px;
padding: 15px;
margin: 20px 30px 0 0;
box-shadow: 0px 5px 25px 0px rgba(41,128,185,0.15);
background: yellow;
}
.content {
height: 1600px;
flex: 1 1;
background: red;
}
<body dir="rtl">
<main class="main">
<div class="content">Scrollable content here</div>
<div class="sticky">Sticky content here</div>
</main>
</body>
Result in Edge:
I noticed that if I remove the box-shadow from the sticky component or the dir=rtl from the body. It all works as expected.
It appears to be a bug in Edge, and after one resize the window in e.g. jsFiddle, it corrects itself.
What Edge also does, with dir="trl" set on the body, it render the scrollbar on the left side of the viewport, which e.g. neither Chrome nor Firefox does.
A workaround could be to instead of swap position with dir=rtl on the body, use Flexbox's own order property, and then set the direction on the inner elements to control the flow.
Fiddle demo
Stack snippet
.main {
display: flex;
max-width: 1200px;
/*width: 100%; default /*
/*flex-flow: row nowrap; default */
margin: auto;
text-align: center;
font-size: 30px;
}
.sticky {
width: 300px;
max-height: 715px;
position: sticky;
top: 10px;
padding: 15px;
margin: 20px 30px 0 0;
box-shadow: 0px 5px 25px 0px rgba(41,128,185,0.15);
background: yellow;
}
.content {
height: 1600px;
flex: 1 1;
background: red;
order: 1; /* added, move last */
}
<body>
<main class="main">
<div class="content">Scrollable content here</div>
<div class="sticky">Sticky content here</div>
</main>
</body>
Updated based on a comment.
After some more testing and research, trying to move the box-shadow, which obviously cause this issue, to an inner element such a pseudo, still offset the .sticky element.
So two simple solutions, so dir="rtl" can be kept on the body, is to either, using a pseudo, use an image to create the shadow, or, as in below sample, use the filter property.
Here I used a CSS trick to apply it only on Edge, but it can fully replace the box-shadow, and which way to go is more about how old browsers one need to support.
Fiddle demo 2
Stack snippet 2
.main {
display: flex;
max-width: 1200px;
width: 100%;
flex-flow: row nowrap;
margin: auto;
text-align: center;
font-size: 30px;
}
.sticky {
width: 300px;
max-height: 715px;
position: sticky;
top: 10px;
padding: 15px;
margin: 20px 30px 0 0;
box-shadow: 0px 5px 25px 0px rgba(41,128,185,0.15);
background: yellow;
}
/* CSS to target Edge only */
#supports (-ms-ime-align: auto) {
.sticky {
box-shadow: none;
filter: drop-shadow( -5px -5px 15px rgba(41,128,185,0.15) );
}
}
.content {
height: 1600px;
flex: 1 1;
background: red;
}
<body dir="rtl">
<main class="main">
<div class="content">Scrollable content here</div>
<div class="sticky">Sticky content here</div>
</main>
</body>
I have simple code
The problem is the red div. It is animated but it have z-index bigger than it parent so while animating it overshadowing the main div. I can solve this problem when i give to animated div z-index: -1 but :hover doesn't work properly (animated div disappears). Anyone can help?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.main {
width: 100px;
height: 100px;
background: green;
position: relative;
}
.main .bar {
height: inherit;
width: 300px;
position: absolute;
background: red;
left: -300px;
}
.main:hover .bar {
left: 100px;
transition: left .3s;
}
</style>
</head>
<body>
<div class="main"><div class="bar"></div></div>
</body>
</html>
https://jsfiddle.net/24qbyh4p/
The solution is wrapping the contents of .main in an inner container with a z-index greater than .bar's one.
.main {
width: 100px;
height: 100px;
position: relative;
}
.main > .bar {
height: inherit;
width: 300px;
position: absolute;
background: red;
left: -300px;
}
.main > .content {
height: 100%;
background: green;
position: relative;
z-index: 1;
}
.main:hover .bar {
left: 100px;
transition: left .3s;
}
<div class="main">
<div class="bar"></div>
<div class="content"></div>
</div>
This issue happens in ALL browsers. Mac or Windows, PC or mobile. It would be nice to have an expert in CSS rendering engines answering this since it doesn't look like an actual bug but a rendering issue instead.
HTML
<a> </a>
CSS
/* just for style */
body {
background-color: black;
text-align: center;
}
a {
/* using the next 3 rules together triggers the leak/bleed problem */
border-radius: 20px;
box-shadow: inset 0 0 0 15px black;
background-color: white;
/* just for style */
display: inline-block;
padding: 5em;
}
CodePen demo: http://codepen.io/nunoarruda/pen/cbCxH
I carefully read this stackoverflow topic
and this article in csstricks
and tried to use all prefix to make my layout working in modern browsers, but its working only in Chrome. In other browsers flex items lost flex value (width). I cant understand whats the matter.
I am greatly appriciate and help and advice! Thank you!
DEMO
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>nested flex</title>
</head>
<body>
<header>Привет мир!</header>
<div class="wrap">
<div class="item1">red</div>
<div class="item_nested">
<div class="b">blue</div>
<div class="c">green</div>
</div>
</div>
<footer>Прощай мир!</footer>
</body>
</html>
.wrap {
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
height: 100%;
-moz-box-orient: horisontal;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
max-width: 1200px;
}
.item1 {
width: 70%; /* No flex here,
-moz-box-flex: 1; /* OLD - Firefox 19- */
background: #eee;
}
.b {
background: #ddd; height:50%;
}
.c {
background: #ccc; height:50%;
}
.item_nested {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
width: 20%; /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
#media all and (max-width: 600px) {
.wrap {-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.wrap > .a, .wrap > .item_nested {width: auto;}
.b.c {
height:auto;
}
.item1 {
width: 100%;
}
}