Skip to content

Commit faf189a

Browse files
howcomhowcom
committed
reorganizing the draft
1 parent f82071f commit faf189a

1 file changed

Lines changed: 95 additions & 93 deletions

File tree

‎css3-values/Overview.src.html‎

Lines changed: 95 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -529,6 +529,101 @@ <h5>The 'vm' unit</h5>
529529
units. When the height or width of the viewport is changed, lengths
530530
specified in the 'vm' unit are scaled proportionally.
531531

532+
<h4>The 'calc' function</h4>
533+
534+
<p>The <dfn>calc(&lt;expression&gt;)</dfn> function can be used wherever length values are allowed, with the syntax given below.
535+
536+
<!--
537+
The expression within the parethesis is computed at the same time as 'em' lengths are
538+
computed
539+
-->
540+
541+
<div class="example">
542+
<pre>
543+
section {
544+
float: left;
545+
margin: 1em; border: solid 1px;
546+
width: calc(100%/3 - 2*1em - 2*1px);
547+
}
548+
</pre>
549+
</div>
550+
551+
<div class="example">
552+
<pre>
553+
p {
554+
margin: calc(1rem - 2px) calc(1rem - 1px);
555+
border: solid transparent; border-width: 2px 1px;
556+
}
557+
</pre>
558+
</div>
559+
560+
561+
<p>The simple expression language of the 'calc()' function supports
562+
five arithmetic operators (+ and - have lowest precedence, *, /, and
563+
'mod' have highest precedence) and parentheses.
564+
565+
<p>A value is ignored if a division by zero or other mathemathical
566+
errors occur in the calculation.
567+
568+
<div class="example">
569+
<p>In this example, the second declaration will be ignored due to a
570+
division by zero.
571+
<pre>
572+
p {
573+
margin: 1em;
574+
margin: calc(1em-2px) calc(1em/0)
575+
}
576+
</pre>
577+
</div>
578+
579+
580+
<p class=issue>Issue: At a later date new operators such as min/max, conditionals, new constants, division by length units etc. may be added.
581+
582+
583+
<p>The expression language is defined by 'length-expression' below:
584+
585+
<pre>
586+
&lt;length> := calc( &lt;length-expression> ) | &lt;atomic-length>
587+
588+
&lt;length-expression> := &lt;length-additive-expression>
589+
590+
&lt;length-additive-expression> :=
591+
&lt;length-multiplicative-expression> |
592+
&lt;length-additive-expression> S* '+' S* &lt;length-multiplicative-expression> |
593+
&lt;length-additive-expression> S* '-' S* &lt;length-multiplicative-expression>
594+
595+
&lt;length-multiplicative-expression>
596+
&lt;length-term> |
597+
&lt;length-multiplicative-expression> S* '*' S* &lt;number-term> |
598+
&lt;number-multiplicative-expression> S* '*' S* &lt;length-term> |
599+
&lt;length-multiplicative-expression> S* '/' S* &lt;number-term> |
600+
&lt;length-multiplicative-expression> S* 'mod' S* &lt;number-term>
601+
602+
&lt;length-term> := '(' &lt;length-expression> ')' | &lt;atomic-length>
603+
604+
&lt;number-additive-expression> :=
605+
&lt;number-multiplicative-expression> |
606+
&lt;number-additive-expression> S* '+' S* &lt;number-multiplicative-expression> |
607+
&lt;number-additive-expression> S* '-' S* &lt;number-multiplicative-expression>
608+
609+
&lt;number-multiplicative-expression> :=
610+
&lt;number-term> |
611+
&lt;length-multiplicative-expression> S* '/' S* &lt;length-term> |
612+
&lt;length-multiplicative-expression> S* 'mod' S* &lt;length-term>
613+
614+
&lt;number-term> := '(' &lt;number-additive-expression> ')' | &lt;number>
615+
616+
&lt;atomic-length> := &lt;number>&lt;length-unit>
617+
</pre>
618+
619+
<div class="note">Note that 'mod' is used instead of '%' for modulus since it is very easy to
620+
get confused about whether '%' is acting as a unit or an operator. At
621+
least with 'mod' it always causes a parse error &mdash; invalid unit &mdash; in the
622+
otherwise ambiguous cases.
623+
</div>
624+
625+
626+
532627

533628
<h3>&lt;fraction&gt;</h3>
534629

@@ -1000,99 +1095,6 @@ <h4>The 'counter' function</h4>
10001095
</div>
10011096
-->
10021097

1003-
<h4>The 'calc' function</h4>
1004-
1005-
<p>The <dfn>calc(&lt;expression&gt;)</dfn> function can be used wherever length values are allowed, with the syntax given below.
1006-
1007-
<!--
1008-
The expression within the parethesis is computed at the same time as 'em' lengths are
1009-
computed
1010-
-->
1011-
1012-
<div class="example">
1013-
<pre>
1014-
section {
1015-
float: left;
1016-
margin: 1em; border: solid 1px;
1017-
width: calc(100%/3 - 2*1em - 2*1px);
1018-
}
1019-
</pre>
1020-
</div>
1021-
1022-
<div class="example">
1023-
<pre>
1024-
p {
1025-
margin: calc(1rem - 2px) calc(1rem - 1px);
1026-
border: solid transparent; border-width: 2px 1px;
1027-
}
1028-
</pre>
1029-
</div>
1030-
1031-
1032-
<p>The simple expression language of the 'calc()' function supports
1033-
five arithmetic operators (+ and - have lowest precedence, *, /, and
1034-
'mod' have highest precedence) and parentheses.
1035-
1036-
<p>A value is ignored if a division by zero or other mathemathical
1037-
errors occur in the calculation.
1038-
1039-
<div class="example">
1040-
<p>In this example, the second declaration will be ignored due to a
1041-
division by zero.
1042-
<pre>
1043-
p {
1044-
margin: 1em;
1045-
margin: calc(1em-2px) calc(1em/0)
1046-
}
1047-
</pre>
1048-
</div>
1049-
1050-
1051-
<p class=issue>Issue: At a later date new operators such as min/max, conditionals, new constants, division by length units etc. may be added.
1052-
1053-
1054-
<p>The expression language is defined by 'length-expression' below:
1055-
1056-
<pre>
1057-
&lt;length> := calc( &lt;length-expression> ) | &lt;atomic-length>
1058-
1059-
&lt;length-expression> := &lt;length-additive-expression>
1060-
1061-
&lt;length-additive-expression> :=
1062-
&lt;length-multiplicative-expression> |
1063-
&lt;length-additive-expression> S* '+' S* &lt;length-multiplicative-expression> |
1064-
&lt;length-additive-expression> S* '-' S* &lt;length-multiplicative-expression>
1065-
1066-
&lt;length-multiplicative-expression>
1067-
&lt;length-term> |
1068-
&lt;length-multiplicative-expression> S* '*' S* &lt;number-term> |
1069-
&lt;number-multiplicative-expression> S* '*' S* &lt;length-term> |
1070-
&lt;length-multiplicative-expression> S* '/' S* &lt;number-term> |
1071-
&lt;length-multiplicative-expression> S* 'mod' S* &lt;number-term>
1072-
1073-
&lt;length-term> := '(' &lt;length-expression> ')' | &lt;atomic-length>
1074-
1075-
&lt;number-additive-expression> :=
1076-
&lt;number-multiplicative-expression> |
1077-
&lt;number-additive-expression> S* '+' S* &lt;number-multiplicative-expression> |
1078-
&lt;number-additive-expression> S* '-' S* &lt;number-multiplicative-expression>
1079-
1080-
&lt;number-multiplicative-expression> :=
1081-
&lt;number-term> |
1082-
&lt;length-multiplicative-expression> S* '/' S* &lt;length-term> |
1083-
&lt;length-multiplicative-expression> S* 'mod' S* &lt;length-term>
1084-
1085-
&lt;number-term> := '(' &lt;number-additive-expression> ')' | &lt;number>
1086-
1087-
&lt;atomic-length> := &lt;number>&lt;length-unit>
1088-
</pre>
1089-
1090-
<div class="note">Note that 'mod' is used instead of '%' for modulus since it is very easy to
1091-
get confused about whether '%' is acting as a unit or an operator. At
1092-
least with 'mod' it always causes a parse error &mdash; invalid unit &mdash; in the
1093-
otherwise ambiguous cases.
1094-
</div>
1095-
10961098

10971099

10981100
<h3>Special cases</h3>

0 commit comments

Comments
 (0)