diff --git a/report/completion/index.php b/report/completion/index.php
index 20de8a7294c..03d2d456bad 100644
--- a/report/completion/index.php
+++ b/report/completion/index.php
@@ -156,9 +156,6 @@ if ($csv) {
 
     echo $OUTPUT->header();
 
-    $PAGE->requires->js('/report/completion/textrotate.js');
-    $PAGE->requires->js_function_call('textrotate_init', null, true);
-
     // Handle groups (if enabled)
     groups_print_course_menu($course, $CFG->wwwroot.'/report/completion/?course='.$course->id);
 }
@@ -417,13 +414,13 @@ if (!$csv) {
             // Get criteria details
             $details = $criterion->get_title_detailed();
             print '<th scope="col" class="colheader criterianame">';
-            print '<span class="completion-criterianame">'.$details.'</span>';
+            print '<div class="rotated-text-container"><span class="rotated-text">'.$details.'</span></div>';
             print '</th>';
         }
 
         // Overall course completion status
         print '<th scope="col" class="colheader criterianame">';
-        print '<span class="completion-criterianame">'.get_string('coursecomplete', 'completion').'</span>';
+        print '<div class="rotated-text-container"><span class="rotated-text">'.get_string('coursecomplete', 'completion').'</span></div>';
         print '</th></tr>';
     }
 
diff --git a/report/completion/styles.css b/report/completion/styles.css
index 7973db42ab7..fc4a0028365 100644
--- a/report/completion/styles.css
+++ b/report/completion/styles.css
@@ -7,7 +7,32 @@
     text-align: center;
     list-style: none;
 }
-/*rtl:ignore*/
-#page-report-completion-index #completion-progress th svg {
-    direction: ltr;
+
+#page-report-completion-index .criterianame,
+#page-report-completion-index .criteriaicon,
+#page-report-completion-index .completion-progresscell {
+    text-align: center;
 }
+
+/* Custom CSS for rotated header.. */
+#page-report-completion-index .rotated-text-container {
+    display: inline-block;
+    width: 16px;
+}
+
+/*rtl:begin:ignore*/
+#page-report-completion-index .rotated-text {
+    display: inline-block;
+    white-space: nowrap;
+
+    transform: translate(0, 100%) rotate(-90deg);
+    transform-origin: 0 0;
+    vertical-align: middle;
+}
+
+#page-report-completion-index .rotated-text:after {
+    content: "";
+    float: left;
+    margin-top: 100%;
+}
+/*rtl:end:ignore*/
\ No newline at end of file
diff --git a/report/completion/textrotate.js b/report/completion/textrotate.js
deleted file mode 100644
index e8bda96744f..00000000000
--- a/report/completion/textrotate.js
+++ /dev/null
@@ -1,72 +0,0 @@
-var SVGNS='http://www.w3.org/2000/svg',XLINKNS='http://www.w3.org/1999/xlink';
-
-function textrotate_make_svg(el)
-{
-  var string=el.firstChild.nodeValue;
-
-  // Add absolute-positioned string (to measure length)
-  var abs=document.createElement('div');
-  abs.appendChild(document.createTextNode(string));
-  abs.style.position='absolute';
-  document.body.appendChild(abs);
-  var textWidth=abs.offsetWidth * 1.2,textHeight=abs.offsetHeight;
-  document.body.removeChild(abs);
-
-  // Create SVG
-  var svg=document.createElementNS(SVGNS,'svg');
-  svg.setAttribute('version','1.1');
-  svg.setAttribute('width',20);
-  svg.setAttribute('height',textWidth);
-
-  // Add text
-  var text=document.createElementNS(SVGNS,'text');
-  svg.appendChild(text);
-  text.setAttribute('x',textWidth);
-  text.setAttribute('y',-textHeight/4);
-  text.setAttribute('text-anchor','end');
-  text.setAttribute('transform','rotate(90)');
-
-  text.appendChild(document.createTextNode(string));
-
-  // Is there an icon near the text?
-  var icon=el.parentNode.firstChild;
-  if(icon.nodeName.toLowerCase()=='img') {
-    el.parentNode.removeChild(icon);
-    var image=document.createElementNS(SVGNS,'image');
-    var iconx=el.offsetHeight/4;
-    if(iconx>width-16) iconx=width-16;
-    image.setAttribute('x',iconx);
-    image.setAttribute('y',textWidth+4);
-    image.setAttribute('width',16);
-    image.setAttribute('height',16);
-    image.setAttributeNS(XLINKNS,'href',icon.src);
-    svg.appendChild(image);
-  }
-
-  // Replace original content with this new SVG
-  el.parentNode.insertBefore(svg,el);
-  el.parentNode.removeChild(el);
-}
-
-function browser_supports_svg() {
-    return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1");
-}
-
-function textrotate_init() {
-    if (!browser_supports_svg()) {
-        // Feature detect, else bail.
-        return;
-    }
-
-YUI().use('yui2-dom', function(Y) {
-  var elements= Y.YUI2.util.Dom.getElementsByClassName('completion-criterianame', 'span');
-  for(var i=0;i<elements.length;i++)
-  {
-    var el=elements[i];
-    el.parentNode.style.verticalAlign='bottom';
-    el.parentNode.style.width='20px';
-
-    textrotate_make_svg(el);
-  }
-});
-}
diff --git a/report/progress/index.php b/report/progress/index.php
index ac781f638d9..e643e7bd641 100644
--- a/report/progress/index.php
+++ b/report/progress/index.php
@@ -154,8 +154,6 @@ if ($csv && $grandtotal && count($activities)>0) { // Only show CSV if there are
     $PAGE->set_title($strcompletion);
     $PAGE->set_heading($course->fullname);
     echo $OUTPUT->header();
-    $PAGE->requires->js('/report/progress/textrotate.js');
-    $PAGE->requires->js_function_call('textrotate_init', null, true);
 
     // Handle groups (if enabled)
     groups_print_course_menu($course,$CFG->wwwroot.'/report/progress/?course='.$course->id);
@@ -323,13 +321,14 @@ foreach($activities as $activity) {
         print $sep.csv_quote($displayname).$sep.csv_quote($datetext);
     } else {
         $shortenedname = shorten_text($displayname);
-        print '<th scope="col" class="'.$datepassedclass.'">'.
+        print '<th scope="col" class="completion-header '.$datepassedclass.'">'.
             '<a href="'.$CFG->wwwroot.'/mod/'.$activity->modname.
             '/view.php?id='.$activity->id.'" title="' . s($displayname) . '">'.
-            '<img src="'.$OUTPUT->pix_url('icon', $activity->modname).'" alt="'.
+            '<div class="rotated-text-container"><span class="rotated-text">'.$shortenedname.'</span></div>'.
+            '<div class="modicon"><img src="'.$OUTPUT->pix_url('icon', $activity->modname).'" alt="'.
             s(get_string('modulename', $activity->modname)).
-                '" /> <span class="completion-activityname">'.
-            $shortenedname.'</span></a>';
+            '" /></div></a>';
+
         if ($activity->completionexpected) {
             print '<div class="completion-expected"><span>'.$datetext.'</span></div>';
         }
diff --git a/report/progress/styles.css b/report/progress/styles.css
index a5c87c7f517..ede47d068dc 100644
--- a/report/progress/styles.css
+++ b/report/progress/styles.css
@@ -1,6 +1,6 @@
 #page-report-progress-index #completion-progress th,
 #page-report-progress-index #completion-progress td {
-    padding: 2px 4px;
+    padding: 2px 2px;
     font-weight: normal;
     border-right: 1px solid #eee;
 }
@@ -28,7 +28,35 @@
     display: inline;
     margin-left: 2em;
 }
-/*rtl:ignore*/
-#page-report-progress-index #completion-progress th svg {
-    direction: ltr;
+
+#page-report-progress-index .completion-header,
+#page-report-progress-index .completion-progresscell {
+    text-align: center;
 }
+
+/* Custom CSS for rotated header.. */
+#page-report-progress-index .rotated-text-container {
+    display: inline-block;
+    width: 16px;
+}
+
+/*rtl:begin:ignore*/
+#page-report-progress-index .rotated-text {
+    display: inline-block;
+    white-space: nowrap;
+
+    transform: translate(0, 100%) rotate(-90deg);
+    transform-origin: 0 0;
+    vertical-align: middle;
+}
+
+#page-report-progress-index .rotated-text:after {
+    content: "";
+    float: left;
+    margin-top: 100%;
+}
+
+#page-report-progress-index .modicon {
+    padding-top: 5px;
+}
+/*rtl:end:ignore*/
diff --git a/report/progress/textrotate.js b/report/progress/textrotate.js
deleted file mode 100644
index 374b4522c0e..00000000000
--- a/report/progress/textrotate.js
+++ /dev/null
@@ -1,94 +0,0 @@
-var SVGNS='http://www.w3.org/2000/svg',XLINKNS='http://www.w3.org/1999/xlink';
-
-function textrotate_make_svg(el)
-{
-  var string=el.firstChild.nodeValue;
-
-  // Add absolute-positioned string (to measure length)
-  var abs=document.createElement('div');
-  abs.appendChild(document.createTextNode(string));
-  abs.style.position='absolute';
-  document.body.appendChild(abs);
-  var textWidth=abs.offsetWidth * 1.2,textHeight=abs.offsetHeight;
-  document.body.removeChild(abs);
-
-  // Create SVG
-  var svg=document.createElementNS(SVGNS,'svg');
-  svg.setAttribute('version','1.1');
-  var width=(textHeight*9)/8;
-  svg.setAttribute('width',width);
-  svg.setAttribute('height',textWidth+20);
-
-  // Add text
-  var text=document.createElementNS(SVGNS,'text');
-  svg.appendChild(text);
-  text.setAttribute('x',textWidth);
-  text.setAttribute('y',-textHeight/4);
-  text.setAttribute('text-anchor','end');
-  text.setAttribute('transform','rotate(90)');
-  text.appendChild(document.createTextNode(string));
-
-  // Is there an icon near the text?
-  var icon=el.parentNode.firstChild;
-  if(icon.nodeName.toLowerCase()=='img') {
-    el.parentNode.removeChild(icon);
-    var image=document.createElementNS(SVGNS,'image');
-    var iconx=el.offsetHeight/4;
-    if(iconx>width-16) iconx=width-16;
-    image.setAttribute('x',iconx);
-    image.setAttribute('y',textWidth+4);
-    image.setAttribute('width',16);
-    image.setAttribute('height',16);
-    image.setAttributeNS(XLINKNS,'href',icon.src);
-    svg.appendChild(image);
-  }
-
-  // Replace original content with this new SVG
-  el.parentNode.insertBefore(svg,el);
-  el.parentNode.removeChild(el);
-}
-
-function browser_supports_svg() {
-    return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1");
-}
-
-function textrotate_init() {
-    if (!browser_supports_svg()) {
-        // Feature detect, else bail.
-        return;
-    }
-
-YUI().use('yui2-dom', function(Y) {
-  var elements= Y.YUI2.util.Dom.getElementsByClassName('completion-activityname', 'span');
-  for(var i=0;i<elements.length;i++)
-  {
-    var el=elements[i];
-    el.parentNode.parentNode.parentNode.style.verticalAlign='bottom';
-    textrotate_make_svg(el);
-  }
-
-  elements= Y.YUI2.util.Dom.getElementsByClassName('completion-expected', 'div');
-  for(var i=0;i<elements.length;i++)
-  {
-    var el=elements[i];
-    el.style.display='inline';
-    var parent=el.parentNode;
-    parent.removeChild(el);
-    parent.insertBefore(el,parent.firstChild);
-    textrotate_make_svg(el.firstChild);
-  }
-
-  elements= Y.YUI2.util.Dom.getElementsByClassName('rotateheaders', 'table');
-  for(var i=0;i<elements.length;i++)
-  {
-    var table=elements[i];
-    var headercells = Y.YUI2.util.Dom.getElementsByClassName('header', 'th', table);
-    for(var j=0;j<headercells.length;j++)
-    {
-      var el=headercells[j];
-      textrotate_make_svg(el.firstChild);
-    }
-  }
-});
-}
-