はてなブックマーク

モチベーション WebアプリやElectronアプリなど、クロスプラットフォーム環境のアプリではフォントの互換性も重要になります。Google Fontに代表されるWebフォントは一つの解ですが、日本語の場合はフォントファイルの容量自体が大きく、通信量の増加や遅延が気になる場合もあります。 別の解として、WindowsとMacの標準インストールされているフォントである游ゴシックと游明朝を使うというものがあります。しかし、WindowsとMacでは、インストールされているFontのweightが違ったり、OSのレンダリング方法が違ったりして、一般的にWindowsでは細く、Macでは太く表示されます。しかし、font-weigtの問題さえクリアできれば、クロスプラットフォームアプリにおいてはとても有用です。 二つ目の問題として、font-weightやfont-familyの指定がブラウザに

Chromeだけはcompositionendの後に最後のMutationOvserverが発火します。厄介な問題で、後述します。 また、やはり、MacのSafariだけはcompositionend後にbackspaceのkeydownが発火してしまいます。自前でDOM操作する場合はこのEnterは無視するように対応が必要です。 Firefoxは基本的にWindowsとMacで同じ挙動です。素晴らしい。 Safariの問題１：compositionend後のkeydown発火 Safari特有の問題ですが、compositionendの切っ掛けになるEnterキーやBackspaceキー(おそらくDeleteキーも)の入力に対して、compositionend後にkeydownが発火します。これはIME入力中以外のこれらのキー入力と区別しなければ、独自のDOM操作の邪魔になります。com

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

モチベーション ElectronではwebContents.print()関数やwebContents.printToPDT()関数を使って簡単に印刷やPDF作成ができます。この時、CSSで印刷サイズをmm等の実物長さで指定することで、実際の印刷時の各種要素の大きさを指定できるので便利です。が、注意しないと余分な余白が入ってしまいます。経験則からくる注意点を情報共有します。 ※2020/2/19：色々試行錯誤して、@pageとの関連、print()とprintToPDF()の違いなど大幅に改定しました。 最重要注意点 ChromeおよびChromium系ブラウザ、Electron(7.1.9～8.0.1で確認)において、@page内に記述したmargin, margin-left, margin-right,margin-top,margin-bottomについては、単位の変換におそらくb

/* main.js, case 0 (initial) **************************/ const {electron,BrowserWindow,app} = require('electron'); let mainWindow = null; const CreateWindow = () => { mainWindow = new BrowserWindow({width: 800, height: 600}); mainWindow.loadURL('file://' + __dirname + '/index.html'); mainWindow.webContents.openDevTools(); mainWindow.on('closed', function() { mainWindow = null; }); } app.on('ready'

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 背景 ブラウザ上で動くリッチテキストエディタを作りたい。 時にはtext以外の要素も使いたいので、独自のDOM操作をしたい。そうなると、入力領域はtextareaではなく、contentEditableを設定したdiv等にしたい。このとき、殆どのブラウザではexecCommandでundoとredoができる。しかし、一度でもJavascriptからDOM操作すると、execCommandによるundo/redoは上手く動かなくなる。結局は独自のUndo/Redo機構を作りたくなる。 この際の鬼門がIME入力の検知。ブラウザごとの数々のバ