js-beautifyでHTMLをフォーマットすると大分違和感のあるフォーマットになってしまう

問題になるのは長いタグに改行を入れたとき。 以下のように、タグの属性の前に改行が入った場合、属性の前にインデントが付けられるが 閉じタグのインデントがこの属性の先頭と同じインデントになってしまう。。

                <td
                  class="fio-customer-intention-confirm-centering">
                  <div 
                    class="d-flex">
                    </div>
                  </td>

これすごい違和感あるんだけど、海外では普通なのか？ 設定で回避することも出来なさそうなので使うのを諦めました。

参考： github.com

windows環境で再帰的にjs-beautifyを適用する

glob-run packageを入れて以下のように実行するのが一番お手軽と思われます。

npm i -g glob-run js-beautify
glob-run html-beautify -r **/*.html

参考：

stackoverflow.com

無料のonline ocrサービスが便利

時として、画像内の文字を文字起こしすることがあります。 そんな時に便利なのがonlineocr

Free Online OCR - convert scanned PDF and images to Word, JPEG to Word

活字の認識に関して言えば、認識率高いし日本語にも対応してるしかなりいい感じです。 Googleドキュメントも文字認識してくれるらしいけど、こっちもいいよ。

webで上下左右中央寄せ

やり方は以下 * 親要素いっぱいに広がるdivを用意する * そのdivの子要素をflexを使って上下左右中央寄せする * 中央寄せされたdivの中にコンテンツを入れる

以下のサンプルはtd内で上下左右中央寄せする場合。

CSS: centering { position: relative; & > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } }

HTML:

コンテンツ

参考： qiita.com

HTMLのtableの列幅を行毎に変える方法

任意の列幅を設定することはできないけど、以下の手順で出来る。

• 列を一つ余分に使う（2列必要だったら3列）
• 1行目は2列目を広めにしたいという場合は2列目のtdにcolspan="2"を設定する
• 2行目は1列目を広めにしたいという場合は1列目のtdにcolspan="2"を設定する

あまり良い方法ではないが。。なんとかこれで乗り切りました。

参考： oshiete.goo.ne.jp

bootstrapのボタンなどのform要素を横に並べる

親要素にform-inlineクラスを付ければ良い。

参考：

stackoverflow.com

bootstrapのtableクラスのborder colorを変更する

th, tdのborder-topで定義されているので、これを上書きする。 以下のようなclassを定義してtableタグに付ければ良い。

.my-table td {
  border-top: solid 1px <color> !important;
}

全tableのborder colorを変更するには以下のようにする。

.table > thead > tr > th{
    border:1px solid blue;
}
.table > tbody > tr > td{
    border:1px solid blue;
}

参考：

stackoverflow.com