Skip to content

Commit dc1b34b

Browse files
fantasaifantasai
committed
Add some more interesting values to text-orientation. This should allow layout of pretty much anything reasonably desired in vertical layout. Note this is a first cut of the spec for these values; their definitions probably still need refinement.
1 parent 77206eb commit dc1b34b

1 file changed

Lines changed: 1 addition & 205 deletions

File tree

‎css3-writing-modes/Overview.src.html‎

Lines changed: 1 addition & 205 deletions
Original file line numberDiff line numberDiff line change
@@ -826,12 +826,7 @@ <h2 id="text-combine">Glyph Composition: the 'text-combine' property</h2>
826826
<p>In Japanese, this effect is known as <i lang="ja">tate-chu-yoko</i>.
827827
</div>
828828

829-
<h2 id="writing-mode-switching">Proposals for Dealing with Writing Mode Switching</h2>
830-
831-
<p class="issue">NOTE: These are only proposals for dealing with writing mode switching. The CSS Working Group has not endorsed any of them yet, and that they are very likely to be removed at any time.</p>
832-
833-
834-
<h3 id="logical-directional">Logical directional properties and values</h3>
829+
<h2 id="logical-directional">Logical directional properties and values</h2>
835830

836831
<p class="issue">NOTE: This is only a proposal under discussion.</p>
837832

@@ -1340,205 +1335,6 @@ <h4 id="logical-value">Logical property values: before, after, start, end</h4>
13401335
<li>'caption-side'</li>
13411336
</ul>
13421337

1343-
1344-
<h3 id="directional-modes">Directional Mode Switch</h3>
1345-
1346-
<p class="issue">NOTE: This is only a proposal under discussion.</p>
1347-
1348-
<p>User agents that support vertical writing mode must support the <dfn>directional mode</dfn> switch:</p>
1349-
1350-
<dl>
1351-
<dt><dfn>physical directional mode</dfn></dt>
1352-
<dd>The directional terms (e.g., 'left', 'right', 'top', 'bottom', 'width' and 'height') in property definitions are interpreted as physical directions, e.g., the 'top' means physically the top side even in vertical writing modes.
1353-
</dd>
1354-
<dt><dfn>logical directional mode</dfn></dt>
1355-
<dd>The directional terms (e.g., 'left', 'right', 'top', 'bottom', 'width' and 'height') in property definitions are interpreted as logical directions defined relative to the block-flow direction, e.g., the 'top' means physicallly the right side in the rl block-flow direction.
1356-
</dd>
1357-
</dl>
1358-
1359-
<p>In physical directional mode, authors can use directional terms in their normal meanings.</p>
1360-
1361-
<p>In logical directional mode, authors can use same properties in both horizontal and vertical writing modes for specifying common styles such as indents, margins between blocks, and block dimensions. Style sheets using vertical writing mode with logical directional mode are compatible with existing user agents, that ignore the 'writing-mode' and get fallback to horizontal writing mode, the common styles are kept.</p>
1362-
1363-
1364-
<h4 id="directional-mode">Specifying Directional Mode: the 'directional-mode' property</h4>
1365-
1366-
<table class="propdef">
1367-
<tbody>
1368-
<tr>
1369-
<th>Name:</th>
1370-
<td><dfn>directional-mode</dfn></td>
1371-
</tr>
1372-
<tr>
1373-
<th>Value:</th>
1374-
<td>physical | logical</td>
1375-
</tr>
1376-
<tr>
1377-
<th>Initial:</th>
1378-
<td>physical</td>
1379-
</tr>
1380-
<tr>
1381-
<th>Applies to:</th>
1382-
<td>all elements</td>
1383-
</tr>
1384-
<tr>
1385-
<th>Inherited:</th>
1386-
<td>yes</td>
1387-
</tr>
1388-
<tr>
1389-
<th>Percentages:</th>
1390-
<td>N/A</td>
1391-
</tr>
1392-
<tr>
1393-
<th>Media:</th>
1394-
<td>visual</td>
1395-
</tr>
1396-
<tr>
1397-
<th>Computed&#160;value:</th>
1398-
<td>specified value</td>
1399-
</tr>
1400-
</tbody>
1401-
</table>
1402-
1403-
<p>Values for this property have the following meanings:</p>
1404-
1405-
<dl>
1406-
<dt><strong>physical</strong></dt>
1407-
<dd>Physical directional mode. Physical directional terms (e.g., 'top') are interpreted as physical directions.</dd>
1408-
<dt><strong>logical</strong></dt>
1409-
<dd>Logical directional mode. Physical directional terms (e.g., 'top') are interpreted as logical directions defined relative to the block-flow direction.</dd>
1410-
</dl>
1411-
1412-
<p>In logical directional mode, the directional terms in property definitions are interpreted as logical, i.e.:<p>
1413-
1414-
<dl>
1415-
<dt>left</dt>
1416-
<dd>the start side for left-to-right text, the end side for right-to-left text.</dd>
1417-
1418-
<dt>right</dt>
1419-
<dd>the end side for left-to-right text, the start side for right-to-left text.</dd>
1420-
1421-
<dt>top</dt>
1422-
<dd>the before side (the side occurring first in the block direction)</dd>
1423-
1424-
<dt>bottom</dt>
1425-
<dd>the after side (the side opposite the before side)</dd>
1426-
1427-
<dt>width</dt>
1428-
<dd>the logical width (the dimension in the inline direction)</dd>
1429-
1430-
<dt>height</dt>
1431-
<dd>the logical height (the dimension in the block direction)</dd>
1432-
1433-
<dt>horizontal</dt>
1434-
<dd>in the inline direction</dd>
1435-
1436-
<dt>vertical</dt>
1437-
<dd>in the block direction</dd>
1438-
</dl>
1439-
1440-
<p>The mappings of directional terms in logical directional mode to physical directional mode are the following:</p>
1441-
1442-
<div class="figure">
1443-
<table border="1" style="border-collapse: collapse" cellpadding="0" cellspacing="0" width="100%">
1444-
<tr>
1445-
<th rowspan="2">in logical directional mode:</th>
1446-
<th colspan="4">physical directions for each writing-mode:</th>
1447-
</tr>
1448-
<tr>
1449-
<th>writing-mode: horizontal-tb</th>
1450-
<th>writing-mode: vertical-rl</th>
1451-
<th>writing-mode: vertical-lr</th>
1452-
<th>writing-mode: horizontal-bt</th>
1453-
</tr>
1454-
<tr>
1455-
<td>left</td>
1456-
<td>left</td>
1457-
<td>top</td>
1458-
<td>top</td>
1459-
<td>left</td>
1460-
</tr>
1461-
<tr>
1462-
<td>right</td>
1463-
<td>right</td>
1464-
<td>bottom</td>
1465-
<td>bottom</td>
1466-
<td>right</td>
1467-
</tr>
1468-
<tr>
1469-
<td>top</td>
1470-
<td>top</td>
1471-
<td>right</td>
1472-
<td>left</td>
1473-
<td>bottom</td>
1474-
</tr>
1475-
<tr>
1476-
<td>bottom</td>
1477-
<td>bottom</td>
1478-
<td>left</td>
1479-
<td>right</td>
1480-
<td>top</td>
1481-
</tr>
1482-
<tr>
1483-
<td>width</td>
1484-
<td>width</td>
1485-
<td>height</td>
1486-
<td>height</td>
1487-
<td>width</td>
1488-
</tr>
1489-
<tr>
1490-
<td>height</td>
1491-
<td>height</td>
1492-
<td>width</td>
1493-
<td>width</td>
1494-
<td>height</td>
1495-
</tr>
1496-
<tr>
1497-
<td>horizontal</td>
1498-
<td>horizontal</td>
1499-
<td>vertical</td>
1500-
<td>vertical</td>
1501-
<td>horizontal</td>
1502-
</tr>
1503-
<tr>
1504-
<td>vertical</td>
1505-
<td>vertical</td>
1506-
<td>horizontal</td>
1507-
<td>horizontal</td>
1508-
<td>vertical</td>
1509-
</tr>
1510-
</table>
1511-
</div>
1512-
1513-
1514-
<div class="example">
1515-
<pre>
1516-
/* A basic style sheet for vertical writing */
1517-
:root {
1518-
/* specifying the principal writing mode as vertical,
1519-
with logical directional mode */
1520-
writing-mode: rl;
1521-
directional-mode: logical;
1522-
}
1523-
img {
1524-
/* I'd like to use physical coordinate system for images */
1525-
directional-mode: physical;
1526-
width: attr(width, px, auto); /* width from the width attribute */
1527-
height: attr(height, px, auto); /* height from the height attribute */
1528-
}
1529-
1530-
/* common styles for both writing modes */
1531-
blockquote {
1532-
margin-left: 40px;
1533-
margin-right: 40px;
1534-
}
1535-
ol, ul, dd {
1536-
margin-left: 40px; /* physical top margin in vertical writing */
1537-
}
1538-
...
1539-
</pre>
1540-
</div>
1541-
15421338
<h2>Appendix B: Bidi Rules for HTML</h2>
15431339

15441340
<p>The style sheet rules that would achieve the bidi behaviors specified

0 commit comments

Comments
 (0)