<div class="controls">
  
  <label for="direction">direction:</label>
  <select id="direction">
    <option value="ltr">ltr</option>
    <option value="rtl">rtl</option>
  </select>

  <label for="writingmode">writing-mode:</label>
  <select id="writingmode">
    <option value="horizontal-tb">horizontal-tb</option>
    <option value="vertical-lr">vertical-lr</option>
    <option value="vertical-rl">vertical-rl</option>
  </select>
  
</div>

<div class="container">
  <div class="box box-1">text-align: start;</div>
  <div class="box box-2">text-align: end;</div>
</div>
html {
  background: #f1f1f1;
}
.box {
  font-size: 2rem;
  color: #3c4442;
  padding: 2rem 1rem;
  margin: 0.625rem;
}
.box-1 {
  text-align: start;
  background-color: #c94e4b;
}
.box-2 {
  text-align: end;
  background-color: #3d8bb1;
}
.controls {
  margin: 0 0.625rem;
  padding: 1.875rem 0.375rem;
  font-size: 1.2rem;
  color: #2f4f4f;
}

.controls select {
  margin-right: 1.25rem;
  color: #2f4f4f;
  font-size: 1.2rem;
}

@supports not (text-align: start) {
  .controls,
  .container {
    display: none;
  }
  body::after {
    content: "Your browser doesn't support logical properties related to text-align. You can test the demo with the following browsers: Firefox 41+, Chrome  69+, or Safari 12.1+";
    font-size: 1.2rem;
    color: #2f4f4f;
  }
}
$(document).ready(function() {
  $("#direction").change(function() {
    var direction = $("#direction").val();
    $(".container").css("direction", direction);
  });

  $("#writingmode").change(function() {
    var wmode = $("#writingmode").val();
    $(".container").css("writing-mode", wmode);
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js