Direction: RTL does not apply to non-numerical symbols. Why?

Question

I'm trying to create a calculator. For the text inside the display of the calculator, I have used direction:rtl. It works fine for the numbers. However, for the other symbols (+-*/), rtl does not seem to work properly. They show up on the wrong side of the numbers (left instead of right). Especially *. Why is that?

Here's the JS Fiddle

<!DOCTYPE html>
<html>
  <head>
    <title>
      Calculator
    </title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
  </head>
  <body>
    <div class="container">
      <div class="wrapper">

        <div class="display" id="display">
          <p class="displayText" id="displayText">8008135
          </p>
        </div>

        <div class="cancel button special"><button class="module-button" onclick="cancel()">CANC</button></div>
        <div class="del button special"><button class="module-button" onclick="del()">DEL</button></div>

        <div class="plus button operation"><button class="module-button" onclick="clickOperationButton('+','+')">+</button></div>
        <div class="minus button operation"><button class="module-button" onclick="clickOperationButton('-','-')">-</button></div>
        <div class="multiply button operation"><button class="module-button" onclick="clickOperationButton('*','×')">×</button></div>
        <div class="divide button operation"><button class="module-button" onclick="clickOperationButton('/','÷')">÷</button></div>


        <div class="seven button number"><button class="module-button" onclick="clickNumberButton(7)">7</button></div>
        <div class="eight button number"><button class="module-button" onclick="clickNumberButton(8)">8</button></div>
        <div class="nine button number"><button class="module-button" onclick="clickNumberButton(9)">9</button></div>

        <div class="four button number"><button class="module-button" onclick="clickNumberButton(4)">4</button></div>
        <div class="five button number"><button class="module-button" onclick="clickNumberButton(5)">5</button></div>
        <div class="six button number"><button class="module-button" onclick="clickNumberButton(6)">6</button></div>

        <div class="one button number"><button class="module-button" onclick="clickNumberButton(1)">1</button></div>
        <div class="two button number"><button class="module-button" onclick="clickNumberButton(2)">2</button></div>
        <div class="three button number"><button class="module-button" onclick="clickNumberButton(3)">3</button></div>

        <div class="decimal button number"><button class="module-button" onclick="clickNumberButton('.')">.</button></div>
        <div class="zero button number"><button class="module-button" onclick="clickNumberButton(0)">0</button></div>
        <div class="equal button number"><button class="module-button" onclick="equate()">=</button></div>

      </div>
    </div>
  </body>
  <script>

  let digitsArray = [];
  let digitsString = "";
  let displayOutput = "";
  let pressedButtonsArray = [];
  let result;

  function clickNumberButton(button) {
    //Equation has happened//
    if (pressedButtonsArray[pressedButtonsArray.length-1] == "=") {
      pressedButtonsArray = [];
      pressedButtonsArray.push(button);
      pressedButtonsString = pressedButtonsArray.join("");
      document.getElementById("displayText").innerHTML = pressedButtonsString;
    }
    //Equation hasn't happened//
    else {
      pressedButtonsArray.push(button);
      pressedButtonsString = pressedButtonsArray.join("");
      document.getElementById("displayText").innerHTML = pressedButtonsString;
      console.log(pressedButtonsArray);
    }
  }

  function clickOperationButton(button, symbol) {
    if (pressedButtonsArray.length > 0 && (/[0123456789]/.test(pressedButtonsArray[pressedButtonsArray.length-1])) || button == "-") {
      if (pressedButtonsArray[pressedButtonsArray.length-1] == "=") {
        pressedButtonsArray = [];
        pressedButtonsArray.push(result, button);
        pressedButtonsString = pressedButtonsArray.join("");
        document.getElementById("displayText").innerHTML = pressedButtonsString;
      }
      else {
        pressedButtonsArray.push(button);
        pressedButtonsString = pressedButtonsArray.join("");
        document.getElementById("displayText").innerHTML = pressedButtonsString;
      }
    }
    console.log(pressedButtonsArray);
  }

  function equate() {
    if (pressedButtonsArray.length > 0 && (/[0123456789]/.test(pressedButtonsArray[pressedButtonsArray.length-1]))) {
      pressedButtonsArray.push("=");
      result = eval(pressedButtonsString);
      document.getElementById("displayText").innerHTML = result;
      console.log(pressedButtonsArray);
    }
  }

  function del() {
    if (pressedButtonsArray[pressedButtonsArray.length-1] == "=") {
      pressedButtonsArray = [];
      pressedButtonsString = "";
      result = "";
      document.getElementById("displayText").innerHTML = "";
    }
    else {
      pressedButtonsArray.splice(-1,1)
      pressedButtonsString = pressedButtonsArray.join("");
      document.getElementById("displayText").innerHTML = pressedButtonsString;
    }
    console.log(pressedButtonsArray);
  }

  function cancel() {
    pressedButtonsArray = [];
    pressedButtonsString = "";
    result = "";
    document.getElementById("displayText").innerHTML = "";
  }

  </script>

</html>

Style:

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 100px;
  font-family: sans-serif;
}

.container {
  width: 40%;
  height: auto;
}

.display {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 80px;
  grid-column-start: 1;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 2;
}

.cancel {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 2;
  grid-row-end: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}

.del {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 2;
  grid-row-end: 3;
}

.divide {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 2;
  grid-row-end: 3;
}

.multiply {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 3;
  grid-row-end: 4;
}

.minus {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 4;
  grid-row-end: 5;
}

.plus {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 5;
  grid-row-end: 7;
}

.seven {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
}

.eight {
  grid-column-start: 4;
  grid-column-end: 7;
  grid-row-start: 3;
  grid-row-end: 4;
}

.nine {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 3;
  grid-row-end: 4;
}

.four {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 4;
  grid-row-end: 5;
}

.five {
  grid-column-start: 4;
  grid-column-end: 7;
  grid-row-start: 4;
  grid-row-end: 5;
}

.six {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 4;
  grid-row-end: 5;
}

.one {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 5;
  grid-row-end: 6;
}

.two {
  grid-column-start: 4;
  grid-column-end: 7;
  grid-row-start: 5;
  grid-row-end: 6;
}

.three {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 5;
  grid-row-end: 6;
}

.decimal {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 6;
  grid-row-end: 7;
}

.zero {
  grid-column-start: 4;
  grid-column-end: 7;
  grid-row-start: 6;
  grid-row-end: 7;
}

.equal {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 6;
  grid-row-end: 7;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 35px;
  border: thin black solid;
}

.display {
  background-color: #DABE4A;
  align-items: center;
  justify-content: center;
  display: flex;
}

.displayText {
  width: 100%;
  direction: rtl;
  }

.special {
  background-color: #C6CE71;
}

.operation {
  background-color: #8CD4B9;
}

.number {
  background-color: #153058;
}

.module-button {
  background-color: inherit;
  font: inherit;
  border: none;
  width: 100%;
  height: 100%;
}

.module-button:focus {outline:0;}

.module-button:hover {
  filter:brightness(1.5);
}

.module-button:active {
  filter:brightness(1);
}

score 0 · Answer 1 · answered Jul 30 '18 at 09:11

0

In your case you should use text-align: right instead of rtl

Just change this css:

.displayText {
  width: 100%;
  text-align: right;
 }

And it should work.

Here is a jsfiddle of your code working: https://jsfiddle.net/1g70b64c/1/

answered Jul 30 '18 at 09:11

John Baker

2,315
13
12

That works, EXCEPT that the numbers are pushed out onto the right instead of the left. – Benisburgers Jul 30 '18 at 23:26
@Benisburgers usually [Calculators](https://www.google.com/search?hl=en&source=hp&ei=8BNgW5yCMYSAacS4u8gF&q=calculator&oq=calculator&gs_l=psy-ab.3..35i39k1j0i20i263i264k1j0j0i131k1j0l6.493.2276.0.2388.11.10.0.0.0.0.218.1034.0j7j1.8.0....0...1.1.64.psy-ab..3.8.1028.0..0i67k1j0i20i264k1j0i131i67k1j0i131i20i263k1.0.K1RnNDSUab0) have the numbers pushed onto the right instead of left, but if you want your numbers to be pushed into left simply put `text-align: left` – John Baker Jul 31 '18 at 07:46
I have. It does not work for me. Thank you. It still pushed to the right. – Benisburgers Aug 03 '18 at 16:12
I have ended up using this solution: [link](https://stackoverflow.com/a/12646655/9697317) – Benisburgers Aug 03 '18 at 16:36

Direction: RTL does not apply to non-numerical symbols. Why?

1 Answers1