diff --git a/notebook/static/base/js/dialog.js b/notebook/static/base/js/dialog.js index ad779d4660..77d81185f4 100644 --- a/notebook/static/base/js/dialog.js +++ b/notebook/static/base/js/dialog.js @@ -230,6 +230,7 @@ define(['jquery', return false; } options.callback(new_md); + options.notebook.apply_directionality(); } } }, diff --git a/notebook/static/notebook/js/actions.js b/notebook/static/notebook/js/actions.js index 5776f790d5..825b8642d8 100644 --- a/notebook/static/notebook/js/actions.js +++ b/notebook/static/notebook/js/actions.js @@ -65,11 +65,29 @@ define([ * **/ var _actions = { + 'toggle-cell-rtl-layout': { + cmd: i18n.msg._('toggle current cell ltr/rtl direction'), + help: i18n.msg._('Toggle current cell directionality between left-to-right and right-to-left'), + handler: function (env) { + var notebook_direction = document.body.getAttribute('dir') == 'rtl' ? 'rtl' : 'ltr'; + var current_cell_default_direction = env.notebook.get_selected_cell().cell_type == 'code' ? 'ltr' : notebook_direction; + var current_cell_direction = env.notebook.get_selected_cell().metadata.direction || current_cell_default_direction; + var new_direction = current_cell_direction == 'rtl' ? 'ltr' : 'rtl'; + env.notebook.get_selected_cells().forEach( + function(cell) { cell.metadata.direction = new_direction; } + ); + env.notebook.set_dirty(true); + env.notebook.apply_directionality(); + } + }, 'toggle-rtl-layout': { - cmd: i18n.msg._('toggle rtl layout'), - help: i18n.msg._('Toggle the screen directionality between left-to-right and right-to-left'), - handler: function () { - (document.body.getAttribute('dir')=='rtl') ? document.body.setAttribute('dir','ltr') : document.body.setAttribute('dir','rtl'); + cmd: i18n.msg._('toggle notebook ltr/rtl direction'), + help: i18n.msg._('Toggle notebook directionality between left-to-right and right-to-left'), + handler: function (env) { + var new_direction = document.body.getAttribute('dir') == 'rtl' ? 'ltr' : 'rtl'; + env.notebook.metadata.direction = new_direction; + env.notebook.set_dirty(true); + env.notebook.apply_directionality(); } }, 'edit-command-mode-keyboard-shortcuts': { diff --git a/notebook/static/notebook/js/notebook.js b/notebook/static/notebook/js/notebook.js index 230fe92c6e..55a6d83824 100644 --- a/notebook/static/notebook/js/notebook.js +++ b/notebook/static/notebook/js/notebook.js @@ -690,6 +690,27 @@ define([ this.line_numbers = !this.line_numbers; }; + /** + * Reads direction settings (LTR/RTL) from notebook/cells metadata + * and applies them to display elements. + */ + Notebook.prototype.apply_directionality = function () { + var notebook_direction = this.metadata.direction || 'ltr'; + // html + document.body.setAttribute('dir', notebook_direction); + // existing cells + this.get_cells().forEach( function(cell) { + if (cell.cell_type == 'markdown') { + cell.code_mirror.setOption('direction', cell.metadata.direction || notebook_direction); + cell.element.find('.rendered_html').attr('dir', cell.metadata.direction || notebook_direction); + } else if (cell.cell_type == 'code') { + cell.element.find('.output_text').attr('dir', cell.metadata.direction || 'auto'); + } + }); + // new cells + textcell.MarkdownCell.options_default.cm_config.direction = notebook_direction; + }; + /** * Get the cell above a given cell. * @@ -2662,6 +2683,9 @@ define([ this.trusted = trusted; this.events.trigger("trust_changed.Notebook", trusted); } + + this.apply_directionality(); + }; /** diff --git a/notebook/static/notebook/js/textcell.js b/notebook/static/notebook/js/textcell.js index 24e02abf85..275d10f155 100644 --- a/notebook/static/notebook/js/textcell.js +++ b/notebook/static/notebook/js/textcell.js @@ -303,7 +303,6 @@ define([ MarkdownCell.options_default = { cm_config: { mode: 'ipythongfm', - direction: bidi.isMirroringEnabled() ? 'rtl' : 'ltr' }, placeholder: "Type *Markdown* and LaTeX: $\\alpha^2$" }; diff --git a/notebook/static/notebook/less/outputarea.less b/notebook/static/notebook/less/outputarea.less index 573032c216..eb4794aa5d 100644 --- a/notebook/static/notebook/less/outputarea.less +++ b/notebook/static/notebook/less/outputarea.less @@ -211,3 +211,7 @@ div.output_unrecognized { } } } + +div.output_text[dir="rtl"] { + text-align: right; +} diff --git a/notebook/static/notebook/less/renderedhtml.less b/notebook/static/notebook/less/renderedhtml.less index 34b085dcb5..b272f5be6e 100644 --- a/notebook/static/notebook/less/renderedhtml.less +++ b/notebook/static/notebook/less/renderedhtml.less @@ -131,7 +131,11 @@ * + .alert {margin-top: 1em;} } -[dir="rtl"] .rendered_html { +// Right align text iff: +// (a) notebook is rtl and it's not overriden in cell metadata (i.e. rtl or none) +// (b) notebook is whatever but cell metadata specifies rtl +// note that cell metadata is used to set 'dir' attribute of rendered_html element. +[dir="rtl"] .rendered_html:not([dir="ltr"]), .rendered_html[dir="rtl"] { p { text-align : right; }